Angular2 模块简介

2019年8月20日 217次阅读 来源: Twait

Angular2 模块简介

NgModule 简介

Angular 运用是模块化的， 而NgModule我们能够把它当作一个容器，用于寄存一些内聚的代码块，它吸收一个元数据对象并经由过程该对象通知 Angular 怎样编译和运转模块代码。它标记出该模块具有的组件、指令和管道， 并把它们的一部份公然出去，以便外部组件运用它们。 它能够向运用的依靠注入器中增加效劳供应商。
每一个 Angular 运用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。指导这个根模块就能够启动你的运用。

NgModule 元数据

NgModule 是一个带有 @NgModule() 装潢器的类。@NgModule() 装潢器是一个函数，它接收一个元数据对象，该对象的属性用来形貌这个模块。个中最主要的属性以下。

  • declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。
  • exports（导出表） —— 那些能在别的模块的组件模板中运用的可声明对象的子集。
  • imports（导入表） —— 那些导出了本模块中的组件模板所需的类的别的模块。
  • providers —— 本模块向全局效劳中孝敬的那些效劳的建立器。
    这些效劳能被本运用中的任何部份运用。（你也能够在组件级别指定效劳供应商，这通常是首选体式格局。）
  • bootstrap —— 运用的主视图，称为根组件。它是运用中一切别的视图的宿主。只要根模块才应当设置这个 bootstrap 属性。

浅显一点讲即：

  1. 声明哪些组件、指令、管道属于该模块；
  2. 公然某些类，以便别的的组件模板能够运用它们；
  3. 导入别的模块，从别的模块中取得本模块所需的组件、指令和管道；
  4. 在运用顺序级供应效劳，以便运用中的任何组件都能运用它。

如：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { RouterModule } from '@angular/router';
import { appRoutes } from './app.routes';
import { AppcontentModule } from './appcontent/appcontent.module';
import { AppComponent } from './app.component';
import { CommonService } from './shared/common.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    AppcontentModule
  ],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

特征模块

我们平常把自定义的其他模块叫特征模块。跟着运用的扩展，一切的事变都在一个模块中完成难免会变乱，我们就会想着把统分为多个模块，每一个模块都只做各自的事变而互不滋扰，用根模块来指导顺序并治理一切子模块即经由过程路由定向以及为它们供应全局设置与效劳实例。
完成体式格局以下：

  1. 根模块担任全局的路由。
  2. 中心模块担任全局效劳，也能够定义一些只在根模块中运用的组件等，并只能由根模块引入一次，不再导出。
  3. 同享模块不做效劳的供应，而是定义全局同享的组件等，以及协助子模块导入体系模块，让子模块只须要导入此同享模块就够了。
  4. 子模块内部能够细分本身的子路由到详细的子组件，以及供应本身的效劳等。
  5. 除了页面进口模块(即除了根模块外的详细营业模块)以外的其他子模块均斟酌写成惰性加载的模块，以提拔页面指导的速率削减机能糟蹋。
  6. 当须要一个比较通用的全局效劳时，能够将其到场CoreModule，也能够再建立一个仅被根模块引入的特征模块。进一步的，以至能够将此模块宣布到npm，这就须要更强的编码才能和手艺积累了。

Angular2模块的目次和目次构造平常以下：

  1. 每一个模块一个应当零丁的文件夹
  2. 模块内功用相干或邻近
  3. 每一个模块最好都有零丁的路由定义

《Angular2 模块简介》

    原文作者：Twait
    原文地址: https://segmentfault.com/a/1190000017789090
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞