Angular2中的NgModule

NgModule是帮助编译器和依赖注入对依赖进行组织的方式。

 1、编译器和组件

　　在angular2中，通过NgModule将标签和Component建立联系，否则html会识别到无效标签

　　在RC.5之前的版本还需要指定directives来指定所用到的指令。

　　改用NgModule，就可以在‘模块’一级告诉Angular组件的依赖关系。

2、依赖注入和提供者

　　依赖注入是一种让依赖在整个应用中可用的组织形式。它对简单的import代码进行了强化，让我们得以用一种标准化的方式来共享单例、创建工厂以及在测试期间改写依赖。

　　在RC5版本之前，我们不得不在bootstrap函数的providers参数中指定带注入的一切（提供者）。

　　但是有了NgModule我们就能更方便的标记模块

　　比如：

@NgModule({
    imports:[BrowserModule],
    declearations:[HelloWorld],
    bootstrap:[HelloWorld]
})
class HelloWorldAppModule{}
platformBrowserDynamic().bootstrapModule(HelloWorldAppModule);

　　这里定义了一个HelloWorldAppModule类，用作程序的顶层组件，也可以说是入口点。从RC5开始就不再使用组件来引导应用。而改用bootstrapModule。

　　NgModule可以导入其他模块作为自己的依赖。我们要在浏览器中运行此应用，所以要导入BrowserModule。

　　我们要在此应用中使用HelloWorld组件，需要把他放在declarations中。因为这个组件在NgModule中声明过才能使用。

　　我们说HelloWorld组件从属于HelloWorldAppModule；任何组件都只能从属于一个NgModule。

　　我们通常辉把很多组件放在一个NgModule中，这很像java中的package。

　　bootstrap属性作用是将这个组件作为程序的入口点，本例中的入口点是HelloWorld组件，这个属性不是必选的。

3、组件可见性

　　要使用组件有两种方式

　　①、位于同一个NgModule中，就是在@NgModule的declarations属性里面声明组件

　　②、在root模块中引入组件所在的模块，在imports里面引入新Module

例如：

@Component({
    selector: 'user-greeting',
    template: `<span>hello</span>`
})
class UserGreeting{}

@NgModule({
    declarations: [UserGreeting],
    exports: [UserGreeting]
})
export class UserGreetingModule{}

 

@NgModule({
    declarations: [HelloWorld],
    imports: [BrowserModule, UserGreetingModule],
    bootstrao:[HelloWorld]
})
class HelloWorldAppModule{}

　　

4、指定provider