Angular 从入坑到挖坑 - 模块简介 (2)

imports 数组表明当前模块正常工作时需要引入哪些的模块,例如这里使用到的 BrowserModule、AppRoutingModule 或者是我们使用双向数据绑定时使用到的 FormsModule,它表现出当前模块的一个依赖关系

providers

providers 数组定义了当前模块可以提供给当前应用其它模块的各项服务,例如一个用户模块,提供了获取当前登录用户信息的服务,因为应用中的其它地方也会存在调用的可能,因此,可以通过添加到 providers 数组中,提供给别的模块使用

bootstrap

Angular 应用通过引导根模块来启动的,因为会涉及到构建组件树,形成实际的 DOM,因此需要在 bootstrap 数组中添加根组件用来作为组件树的根

4.3、特性模块

特性模块是用来将特定的功能或具有相关特性的代码从其它代码中分离出来,聚焦于特定应用需求。特性模块通过它提供的服务以及共享出的组件、指令和管道来与根模块和其它模块合作

在上一章中,定义了一个 CrisisModule 用来包括包含与危机有关的功能模块,创建特性模块时可以通过 Angular CLI 命令行进行创建

-- 创建名为 xxx 的特性模块 ng new component xxx import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CrisisRoutingModule } from './crisis-routing.module'; import { FormsModule } from '@angular/forms'; import { CrisisListComponent } from './crisis-list/crisis-list.component'; import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component'; @NgModule({ declarations: [ CrisisListComponent, CrisisDetailComponent ], imports: [ CommonModule, FormsModule, CrisisRoutingModule ] }) export class CrisisModule { }

当创建完成后,为了将该特性模块包含到应用中,需要和 BrowserModule、AppRoutingModule 一样,在根模块中 imports 引入

默认情况下,NgModule 都是急性加载的,也就是说它会在应用加载时尽快加载,所有模块都是如此,无论是否立即要用。对于带有很多路由的大型应用,考虑使用惰性加载的模式。惰性加载可以减小初始包的尺寸,从而减少程序首次的加载时间

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; // 添加自定义的模块 import { CrisisModule } from './crisis/crisis.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, CrisisModule, // 引入自定义模块 AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpgwjf.html