angular2 学习笔记 ( ngModule 模块 )

2016-08-25, 当前版本是 RC 5.

参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html

提醒 : 这系列笔记的 "ng" 指的是 angular2 哦!

 

ECMA 6 中, 每个 .js 文件都是一个模块. 

ng 中的模块则指的是一组被封装起来的组件, 指令, 管道, 它们能够来自不一样的 .js 文件.

因此 ng 模块能够说是 ECMA 模块的更上一层封装. 这正是咱们须要的. 

 

import { NgModule } from '@angular/core'; 
  
@NgModule({
    imports: [],
    declarations: [],
    exports: [],
    bootstrap: [],
    providers : []
})
export class AppModule { }

　　

大概长这样.

imports 顾名思义, 就是导入其它的模块，这和 ECMA 模块是同样的概念. 

declarations : [ProductComponent, ProductPipe, ProductDirective] declarations 是用来声明当前这个模块所具备的组件, 指令, 管道的. ( 组件若是没有被声明是不能用的哦，会报错的. )

exports : [ImportedModule, DeclaredComponent] 咱们想导出什么就写什么, 默认状况下全部导入和声明的模块或组件都是私有的. 除非咱们导出它们. 

 

以上3项很好理解.

须要注意, 若是一个组件已经被"声明"过了，请不要再次"声明"它, 好比 : 模块A 声明了 组件A, 而 模块B 导入了 模块A, 那么在 模块B 中就可使用 组件A 了, 不须要在 模块B 中"再次声明", 即便你再声明也无效 

 

 

bootstrap: [AppComponent] 只有在主模块 AppModule 会使用到.

在 main.js 中启动主模块

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

这是动态的方式, 还有一个静态的方式, 有兴趣能够去参考 

 

providers : [ProductService] 

模块的 providers 会注册进根注入器中. 意味着这是全局的. (lazyload module 例外, 由于 lazyload 的 module 会是 root module 的 child)

例如 : (we have 3 module : A,B,C ) A import B,C -> C can use B service, even C not import B 

因此, 若是你只想在某个 module 内使用某个 service 的话, 那写在 component.providers 吧. 但其实把全部provider 定义全局也没很大的问题, 毕竟 provider 都是 class or token 不会有命名冲突的问题.

ng 有个延迟加载 module 的功能叫 lazy load, 它是配合 router 一块使用的. 

lazy load 会建立子注入器, 这个要留意哦, 它会影响到 providers (本来 module's providers 是注册到 root injector 的), 

ng给出的理由是, 注入器一旦开始工做就不能修改了, 因此 lazyload 只能经过建立子注入器来扩展.

因此, 通常上 lazy load 的 module 须要声明 providers 的话, 会这样作.

这个作法是这样的, 不把 providers 声明到 @NgModule 里面, 而是提供一个静态方法给 root module import.

或则你能够把 providers 独立写成另外一个模块.

 

 

特性模块

特性模块和根模块是差很少的，也是有根组件，路由等等 

区别以下

1.不会有 bootstrap: [AppComponent]

2.不会有 BrowserModule, 取而代之的是 CommonModule

@NgModule({
    imports: [       
        CommonModule,
        routing       
    ],
    declarations: [
        ProductComponent 
    ],
    providers: [routingProviders]
})
export class ProductModule { }

 

以前说的 forRoot 还有扩展模块的好处, 能够看到 import module 时能够经过一个带参数的方法, 那样咱们就能够依据不一样的项目去设定或则扩展咱们的模块了. (相似 ng1 的 app.config)

有一个叫 entryComponents 的属性, 他和 declarations 不同的地方是, 它是专门用来定义动态组建的. 动态组建是经过 class 来建立的不是写在 html 里的. 若是咱们没有告诉 ng 咱们有什么动态的 component 的话, 那么在 aot 的时候就没办法预编辑了.

 

更新 : 2017-01-26 

module 能够不须要 import 直接 export 其它 module, 这和 ecma module 是同样的.