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 是一样的.