模块

模块是Angular重要的概念之一。Angular整个框架就是由很多个模块组成的，而不同的模块需要从不同的地方导入。

一、angular 自带模块

打开package.json文件，可以看到依赖的angular包：

1
2
3
4
5
6
7
8
      "@angular/common": "^2.3.1", 
      "@angular/compiler": "^2.3.1",
      "@angular/core": "^2.3.1",
      "@angular/forms": "^2.3.1",
      "@angular/http": "^2.3.1",
      "@angular/platform-browser": "^2.3.1",
      "@angular/platform-browser-dynamic": "^2.3.1",
      "@angular/router": "^3.3.1",

angular/core：这里包含了很多常用的模块

  • NgModule：模块定义装饰器
  • Component：组件定义装饰器
  • Directive：指令定义装饰器
  • Pipe ：管道定义装饰器
  • PipeTransform：管道接口
  • Injectable：服务定义装饰器
  • ElmentRef：元素引用
  • ViewChild：获取子元素
  • Render：渲染
  • Input：接受参数输入
  • Output：事件输出
  • EventEmitter：触发自定义事件

angular/common

  • CommonModule：通用模块，包含内置指令ngIf，ngFor

angular/forms

  • FormsModule：定义模版驱动表单
  • ReactiveFormsModule：定义响应式表单
  • FormGroup, FormArray, FormControl, FormBuilder：响应式表单元素
  • Validators：表单校验

angular/http

  • HttpModule：http请求模块

angular/router

  • RouterModule 路由模块
  • Routes 路由数据结构

angular/platform-browser

  • platformBrowser：AoT编译
  • BrowserModule：浏览器支持，注意该模块导入了CommonModule，然后导出去，所以引用了这个模块也就引用了CommonModule

angular/platform-browser-dynamic

  • platformBrowserDynamic：JIT编译

二、了解模块组成

开发的完整单元也是模块，一个应用中至少要有一个模块，也就是根模块。模块的组成由组件，服务，指令，管道等等组成,所有用到的组件，指令，管道，模块都需要事先在模块中声明好，才能在具体组件中使用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@NgModuel({
    declarations: [],   // 用到的组件，指令，管道
    providers: [],      // 依赖注入服务 
    imports: [],        // 导入需要的模块
    exports: [],        // 导出的模块，跨模块交流
    entryComponents: [] // 需提前编译好的模块
    bootstrap: []       // 设置根组件

})
export class AppModule { }