掌握Angular2的NgModule(模块系统)

我们今天要学习的是Angular2的模块系统,一般情况下我们使用一个根模块去启动我们的应用,然后使用许多的功能模块去丰富我们的应用,扩展我们应用的功能.这些全部依靠我们的NgModule装饰器,接下来我们就来好好学习一下这个装饰器.当然在这个过程中你会遇到一些新的指令,概念等等;但是别慌,我们会在以后的文章中一个一个的详细讲解呢.

在开始今天的练习之前,我们首先来熟悉一下NgModule的API,

 interface NgModule {
     // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
     //            然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
    providers : Provider[]
     // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
     //               然后我们就可以在这个模块中使用它们了.
    declarations : Array<Type<any>|any[]>
     // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
     //          可以直接使用别的模块提供的一些指令,组件等等.
    imports : Array<Type<any>|ModuleWithProviders|any[]>
     // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
     //          如果别的模块导入了我们这个模块,
     //          那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
    exports : Array<Type<any>|any[]>
    // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
    //                  Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
    entryComponents : Array<Type<any>|any[]>
    // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
    bootstrap : Array<Type<any>|any[]>
    // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
    schemas : Array<SchemaMetadata|any[]>
    // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
    //     那么这个模块将不会被注册.
    id : string
 }

那么,接下来让我们先来尝试一个简单的例子;现在官网的quickstart就是一个使用NgModule的例子,所以我们先按照官网的quickstart来走一遍;如果你翻墙很困难的话可以看看这里中文版的quickstart,或者看看我按照官网做的一个例子angular2-travel.

我们首先来看一下这个最简单的版本的代码吧,首先是app.component.ts:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.template.html'
})
export class AppComponent { }

这个就比较简单了,使用@Component装饰器来定义我们的AppComponent组件.重点是app.module.ts中的代码:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

首先导入NgModule和BrowserModule以及AppComponent;NgModule是我们组织Angular应用所必须的,导入BrowserModule是因为它提供了启动和运行浏览器应用的那些基本的服务提供商.如果你想深入了解可以看看这里我应该导入 BrowserModule 还是 CommonModule