精华内容
下载资源
问答
  • 今天小编就为大家分享一篇angular4强制刷新视图的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • angular4的框架

    2018-04-11 11:45:47
    基于angular4的系统框架,包括angular2,以及各个组件,模块
  • Angular4 Http

    2017-08-10 06:39:46
    angular的http模块应用 参考教材以及代码 实现的youtube搜索框 启动: npm install, npm start
  • 主要介绍了深入理解Angular4订阅(Subscribe)与取消,详细的介绍了订阅与取消的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • angular4_AOT-源码

    2021-02-22 07:12:07
    Angular4 Webpack入门 一个Angular入门工具包,具有 ,,,, ,,, ),,,,, , , , ,和通过 。 如果您正在寻找Angular 1.x,请使用如果您想了解Webpack和ES6构建工具,请查看如果您想学习TypeScript,请...
  • Angular4Lazyload 利用Angular CLI实现懒加载,通过loadChildren以两种方式加载module。
  • Angular 2 / Angular 4 / Angular 5搜索过滤器管道 过滤搜索项 Angular 2过滤器可进行自定义搜索。 同样适用于Angular 4Angular 5。 安装 npm i ng2-search-filter --save yarn add ng2-search-filter 用法 如果...
  • angular4实例讲解
  • angular4使用GET请求向后台获取数据,显示到前端THML中
  • angular 4视频教程 高清版,包括视频与课堂代码与ppt。
  • Angular4终于在两天前发布了正式版本,那么怎么升级呢?其实Angular2和Angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码。 Angular4现已发布 //www.jb51.net/article/109685.htm 为什么跳过Angular 3? ...
  • 简介 关于”Angular”版本,”Angular”官方已经统一命名...下面就来给大家详细介绍关于Angular4 Angular CLI的安装与使用教程,需要的朋友可以参考借鉴,下面话不多说了,来一起看看详细的介绍吧。 安装Angular CLI
  • angular5.x介绍以及和vue、react对比 angular5.x介绍以及和vue、react对比
  • 主要为大家详细介绍了.Net Core+Angular Cli/Angular4开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Angular4高级文档

    2017-06-07 22:50:39
    Angular4高级文档
  • sandbox-angular4:用于Angular 4工作的Sandbox
  • Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入...
  • Angular-angular4-docker-example.zip,高效对接的angular cli示例app dockerized angular 4 app(带angular cli),Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。...
  • 移动开发 H5开发angular4教程 移动开发 H5开发angular4教程
  • Froala所见即所得编辑器的Angular 4Angular 9绑定。 目录 手动初始化 显示HTML 执照 开发环境设置 安装说明 从npm安装angular-froala-wysiwyg npm install angular-froala-wysiwyg 您将需要CSS样式 <!-- ...
  • angular4.x中的路由

    2018-11-20 16:42:17
    11 angular4.x 中的路由 --routing生成路由 配置路由 路由重定向(1)
  • Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入...
  • 您所在城市的Angular 4 Search开发人员 此Angular 4项目是上 克隆此仓库 git clone https://github.com/sandeep1995/angular-4-search-devs.git 安装套件 npm install 安装Angular CLI npm install -g @angular/...
  • Angular4 - 共享模块

    千次阅读 2018-01-28 20:52:21
    Angular4 - 共享模块 1. AppModule @NgModule({  declarations: [  AppComponent  ],  imports: [  BrowserModule  ],  exports: [ AppComponent ],  providers: [],  bootstrap: [App

     Angular4 - 共享模块

    1. AppModule

    @NgModule({  
      declarations: [  
        AppComponent  
      ],  
      imports: [  
        BrowserModule  
      ],  
      exports: [ AppComponent ],  
      providers: [],  
      bootstrap: [AppComponent]  
    })  
    export class AppModule { }  
    
    imports 本模块声明的组件模板需要的类所在的其它模块。
    providers 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。
    declarations 声明本模块中拥有的视图类。Angular 有三种视图类:组件、指令和管道。
    exports declarations 的子集,可用于其它模块的组件模板。
    bootstrap 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。

    2. CommonModule

    先看一下CommonModule中有什么内容。


    common.module.ts代码

    @NgModule({
      imports: [
        NgZorroAntdModule,
        AngularCommonModule
      ],
      declarations: [
        CommonComponent,
        NumberFilterPipe,
        ButtonDirective,
        StepComponent
      ],
      exports: [
        CommonComponent,
        NumberFilterPipe,
        ButtonDirective,
        StepComponent
      ],
      providers: [
    
      ],
    })
    我在comon 文件夹中创建了service, pipe, component, directive,但是这个service和这个module没有任何关系。至于service会在下面说到。然后将 pipe, component, directive输出,这样其他模块才能使用。

    3. AngularModule

    然后我们需要在其他的模块中使用这个模块,就需要import进来。
    import { NgModule } from '@angular/core';
    import { AngularComponent } from './angular.component';
    import {RouterModule, Routes} from '@angular/router';
    import {CommonModule as CommonPrivateModule} from '../../common/common.module';
    import {CommonModule} from '@angular/common';
    import {HttpService} from '../../common/service/http.service';
    import {HttpCommonService} from '../../common/service/http-common.service';
    import {BrowserModule} from '@angular/platform-browser';
    
    const routes: Routes = [
      {path: '', component:  AngularComponent}
    ];
    
    @NgModule({
      imports: [
        CommonModule,
        RouterModule.forChild(routes),
        CommonPrivateModule
      ],
      declarations: [AngularComponent],
      providers: []
    })
    export class AngularModule { }
    因为CommonModule与系统内的module重名,所以我重命名为CommonProvateModule。这样我们就可以在AngularModule中使用共享模块的内容。

    angular.component.html

    <p>
      <app-step [stepString]="['common component']"></app-step>
      <button appButton> common directive</button> <br>
      common pipe: {{1 | numberFilter}}
    </p>
    这个html文件中我使用了之前创建的 StepComponent, NumberFilterPipe,  ButtonDirective。

    4. Service

    service前面在Common的文件加下,但是没有在CommonModule provide。这是为什么呢,因为service靠Angular 的依赖注入体系实现的,而不是模块体系。如果我们在CommonModule provide,那么我们在各个模块使用的service不是一个实例,而是多个实例。下面我们就来测试一下。


    先说一下例子的模块结构, AppModule,HomeModule(AppModule的子模块), AngularModule(HomeModule的子模块)。然后分别在三个模块中引入CommonModule。


    修改一下上面的CommonModule,将HttpCommonService 提供出去。

    @NgModule({
      imports: [
        NgZorroAntdModule,
        AngularCommonModule
      ],
      declarations: [
        CommonComponent,
        NumberFilterPipe,
        ButtonDirective,
        StepComponent
      ],
      exports: [
        CommonComponent,
        NumberFilterPipe,
        ButtonDirective,
        StepComponent
      ],
      providers: [
        HttpCommonService
      ],
    })

    HttpCommonService

    import { Injectable } from '@angular/core';
    import {Http, Request, RequestOptions} from '@angular/http';
    import {Observable} from 'rxjs/Observable';
    import {NzMessageService} from 'ng-zorro-antd';
    
    @Injectable()
    export class HttpCommonService {
    
      private testService: number;
    
      constructor(public httpService: Http, private _message: NzMessageService) {
      }
    
      set(number) {
        this.testService = number;
      }
    
      get() {
        return this.testService;
      }
    }
    这里在service内部有两个方法,一个用于设置变量testService,一个用于取这个变量。


    AppComponent

    export class AppComponent implements OnInit {
    
      title = 'app';
    
      constructor(private httpCommonService: HttpCommonService) {}
    
      ngOnInit(): void {
        console.log('appmodule 取值之前的number:' + this.httpCommonService.get());
        this.httpCommonService.set(1);
      }
    }


    HomeCompoent

    export class HomeComponent implements OnInit {
    
      constructor(private httpCommonService: HttpCommonService) { }
    
      ngOnInit() {
        console.log('homemodule 取值之前的number:' + this.httpCommonService.get());
        this.httpCommonService.set(2);
      }
    }
    

    AngularComponent

    export class AngularComponent implements OnInit {
      firstString: string;
    
      constructor(private httpCommonService: HttpCommonService) { }
    
      ngOnInit() {
        console.log('angularmodule 取值之前的number:' + this.httpCommonService.get());
      }
    }


    最后看一下控制台的输出:

    可以看到service内部的变量每一次都是一个新值。


    然后我们在将CommonModule中的service去掉,就是这个公共模块不提供service。然后在将AppModule修改一下,提供HttpCommonService。 我们再看一下页面控制台的输出。


    可以看到现在是一个实例,而且service内部的变量也是缓存起来的。

    所以对于service我们还是放在模块中去提供,不要放在共享模块中了。

    至于页面的模板可以访问angular - blank .

    展开全文
  • Visual Studio Angular4开发示例--数据显示
  • Learning Angular A Hands On Guide to Angular 2 and Angular 4(2nd) 英文epub 第2版 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
  • Angular-angular4-primeng-admin.zip,Angular4 Primerg Admin@angular/cli发出,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发...
  • Learning Angular A Hands On Guide to Angular 2 and Angular 4(2nd) 英文无水印pdf 第2版 pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除...
  • Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 191,617
精华内容 76,646
关键字:

angular4