3.3　模块与依赖注入

在图3.4的Angular应用的概要组件图中没有出现模块的字样，然而这不代表它没出现在图里。实际上图中的指令、服务、控制器都是定义在Angular的模块里。读者从图3.6展现的图中可以看到所有类型的Angular组件都是归属于作为容器的某个模块的。

图3.6　Angular模块与组件定义关系

自然地，如果要会使用Angular，就需要解决两个问题：如何在模块里创建组件以及如何使用其他模块里的组件。下文的3.3.1和3.3.2节将分别回答这两个问题。

3.3.1　根模块

Angular或者Ionic新建的项目，都会存在一个根模块，默认名是AppModule。如果你使用了模块化来创建应用，包括AppModule，每个都会存在一个@NgModule装饰器的类（虽然他很像Java中的注解，但是他的官方命名叫装饰器）。我们新建的页面，如果不使用懒加载，都要在@NgModule中先声明后使用。

下面举个例子，简单介绍一下@NgModule中的内容：

     //app.module.ts


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

•　Imports：本模块声明的组件模板需要的类所在的其他模块。

•　Providers：服务的创建者，并加入到全局服务列表中，可用于应用任何部分。

•　Declarations：声明本模块中拥有的视图类。Angular有三种视图类：组件、指令和管道。

•　Exports：declarations的子集，可用于其他模块的组件模板。

•　Bootstrap：指定应用的主视图（称为根组件），它是所有其他视图的宿主。只有根模块才能设置bootstrap属性。

3.3.2　使用模块与组件依赖注入

依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。大多数依赖都是服务。Angular使用依赖注入来提供新组件以及组件所需的服务。

比如我们要给某组件导入HttpService这个服务，看这段代码：

     constructor(private service: HttpService) {
         ...
     }

这个constructor就是构造函数，依赖注入在constructor中进行。你也许会觉得前面写上private、public之类的很怪，这是TypeScript语法比较特殊，习惯就好。

当Angular创建组件时，会首先为组件所需的服务请求一个注入器injector。我们必须先用注入器injector为HttpService注册一个提供商provider。

我们必须在providers写上才能用，看这段代码：

     @Component({
     selector:    'some-list',
     templateUrl: './some-list.component.html',
     providers:  [ HttpService]
     })