Angualr2 之 angular模块

用@NgModule来定义应用中的模块。

Angular 模块是带有 @NgModule 装饰器函数的。 @NgModule
接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。

它标记出该模块拥有的组件、指令和管道， 并把它们的一部分公开出去，以便外部组件使用它们。 它可以向应用的依赖注入器中添加服务提供商。

Angular 模块化

模块是组织应用程序和使用使用外部程序库的最佳途径。

很多Angular库都是模块，e.g. FormsModule、HttpModule …

Angular模块把组件、指令和管道打包成内聚的功能块，每块聚焦于一个特性分区、业务领域、工作流或一组通用的工具。

Angular模块是由一个@NgModule装饰器提供元数据的类，元数据包括：

• 1-导入其他模块
• 2-声明哪些组件、指令、管道属于该模块
• 3-公开某些类，以便其他的组件模块可以使用它们
• 4-在应用程序级提供服务，以便应用中的任何组件都能使用它。

e.g. √

@NgModule({
  // 1-这里只导入了CommonModule和IonicModule
  // CommonModule中有 *ngIf和*ngFor
  // IonicModule 中有ionic的样式
  imports: [
    CommonModule,
    IonicModule,
  ],
  // 2- 这里声明了这3个组件属于该模块
  declarations: [
    SinoListComponent,
    SinoItemDetailComponent,
    SinoLoadingHintComponent,
  ],
  /**
   * entryComponents : Array<Type<any>|any[]>
   * Specifies a list of components that should be compiled when this module is defined. 
   * For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.
   * 等价于，将组建放到这里，除去模板中用到的组件外，别的地方都可可以随意使用，尤其是ionic的导航中。 
   */
  entryComponents: [
    SinoItemDetailComponent,
    SinoListComponent,
  ],
  // 3-公开一些组件,这样其他模块只要导入了CrudModule，就可以在其组件模板中使用到出的这些组件了。
  exports: [SinoListComponent, SinoItemDetailComponent],
})

export class CrudModule {
  static forRoot(config: any, routeConfig?: any): ModuleWithProviders {
    return {
      ngModule: CrudModule,
      // 4- 提供服务
      providers: [
        BaseDataService,
        {
          provide: ModuleConfig,
          useValue: config,
        }, {
          provide: RouteConfig,
          useValue: routeConfig ? routeConfig : DEFAULT_ROUTE_CONFIG,
        },
      ],
    };
  }
}

提供服务

有很多组件，是需要依靠外部的服务才能完成其功能的。那么我们提供服务的地方就有多个：

• 可以在组件中提供服务
• 可以在模块创建中提供服务

在组件中提供服务

在组件中提供服务，它的作用范围就仅仅局限于该组件以及其子组件。

e.g.
下面这个组件，就是仅仅在该组件以及其子组件中使用了FileService服务，也就是说，sino-file-list组件每次创建都是创建新的FileService服务

@Component({
  selector: 'sino-file-list',
  templateUrl: './sino-file-list.component.html',
  styleUrls: ['./sino-file-list.component.css'],
  providers: [FileService],
})

在模块创建中提供服务

在模块创建中提供服务，可以在该模块的任何组建个中依赖注入然后使用。

特性模块

根模块和特性模块共享着相同的执行环境。它们共享着同一个依赖注入器，这意味着某个模块中定义的服务在所有模块中也都能用到。

根模块和特性模块

• 我们引导根模块来启动应用程序，但是导入特性模块（e.g. crudModule）来扩展应用。
• 特性模块可以对其他模块暴露或隐藏自己的实现。

特性模块用来提供了内聚的功能集合。 聚焦于应用的某个业务领域、用户工作流、某个基础设施（表单、HTTP、路由），或一组相关的工具集合。

虽然这些都能在根模块中做，但特性模块可以帮助我们把应用切分成具有特定关注点和目标的不同区域。

特性模块通过自己提供的服务和它决定对外共享的那些组件、指令、管道来与根模块等其它模块协同工作。

共享模块

共享模块其实就是将一些公共的东西整理出来，放到一个模块中去，避免了其他模块的重复导入。

XxxModule.forRoot配置核心服务

模块的静态方法forRoot可以同时提供并配置服务。
它接收一个服务配置对象，并返回一个ModuleWithProviders。
ModuleWithProviders对象有两个属性：

• ngModule - XxxModule类
• providers - 配置好的服务提供商

知识点

• NgModel是Angular指令。

• ✔️如果两个指令同名，那么我们需要使用as关键字来为第二个指令创建别名。

  import {
  HighlightDirective as ContactHighlightDirective
  } from './contact/highlight.directive';

• ❤特性模块

  特性模块不会集成其他模块中对组件、指令或者管道的访问权。AppModule中的 imports 与crudModule的 imports 互不相干。

  e.g.

  我们在根模块中imports了IonicModule,但是在crud模块中也必须重新importsIonicModule,不然，crud模块中会不识别ionic的指令。

• ❤forRoot

  根模块AppModule会导入CrudModule类并把它的providers添加到AppModule的服务提供商中。
  更精确的说法是，Angular 会先累加所有导入的提供商，然后才把它们追加到@NgModule.providers
  中。 这样可以确保我们显式添加到AppModule
  中的那些提供商总是优先于从其它模块中导入的提供商。

写在后面

GitHub上集大家之力搞了一个前端面试题的项目，里面都是大家面试时所遇到的题以及一些学习资料，有兴趣的话可以关注一下。如果你也有兴趣加入我们的话，请在项目中留言。项目同时也可以在gitbook上查看。

InterviewLibrary-GitHub
InterviewLibrary-gitbook