Angular2 模块简介

2019年9月4日 138次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞