首先我们来看下【Angular 官网模块】的定义:
NgModules 用于配置注入器和编译器,并帮你把那些相关的东西组织在一起。
NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。 它会标出该模块自己的组件、指令和管道,通过 exports 属性公开其中的一部分,以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的依赖注入器中。
-
Angular 模块化
- 模块是组织应用和使用外部库扩展应用的最佳途径;
- Angular 自己的库都是 NgModule,比如 FormsModule、HttpClientModule 和 RouterModule。 很多第三方库也是 NgModule,比如 Material Design、 Ionic 和 AngularFire2。
- NgModule 把组件、指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。
- 模块还可以把服务加到应用中。 这些服务可能是内部开发的(比如你自己写的),或者框架内置的(比如 Angular 的路由和 HTTP 客户端),或者外部模块(Material Design、Ionic);
- 模块可以在应用启动时急性加载,也可以由路由器进行异步的惰性加载;
- NgModule 的元素可以做什么?
- 声明某些组件、指令和管道属于这个模块;
- 公开其中的部分组件、指令和管道,以便其它模块中的组件模板中可以使用它们;
- 导入其它带有组件、指令和管道的模块,这些模块中的元件都是本模块所需的;
- 提供一些供应用中的其它组件使用的服务;
每个 Angular 应用都至少有一个模块,也就是根模块。 你可以引导那个模块,以启动该应用。
为什么要自定义模块?
当我们开发一个应用程序时,功能单一只需要少量的组件就可以完成,此时根模块就是需要一并的加载这些组件;但是随着业务的发展,应用程序相应的改造和成长,就需要不断的重构和改造组件,有一些可能是特定的组件,他们之间有着密切相关的功能集,假如再按原来的方式一并的在根组件中挂载这些组件,那么该应用程序就显得比较杂乱,并且首次加载应用程序性能也随之降低,持续原有的方式就不足以体现 Angular 框架工程化的优势了,此时我们就需对组件进行模块化改造,以更好的体现Angular工程化实践。
组件模块化的优点(相对):
- 项目(中大型)结构工程化明显,方便灵活扩展和结构复用。
- 可以在根组件中动态实现子组件懒加载,提升应用程序初始化性能和用户体验;
- 有密切相关的功能组件更加集中化或者组件模块化,对组件进行分类归并形成一个合理的模块;
Angular 模块分类:
如何在Angular项目中创建自定义模块以及实现路由模块的懒加载?
- 通过Angular指令在headerRout文件中创建一个名为modules的文件夹,并同时创建了一个名为user的模块;
PS E:\Angular\headRout> ng g module modules/user
- 将需要的子组件创建在user模块下,此时组件默认引入在子组件的根模块下;
PS E:\Angular\headRout> ng g component modules/user/components/nav
- 创建带路由模块的根组件;
PS E:\Angular\headRout> ng g component modules/user --routing
- 配置user模块中的根路由;
/* 路由配置 */
const routes: Routes = [
{path:'user',component: UserComponent}
];
- 创建模块中的服务;
PS E:\Angular\headRout> ng g service modules/user/services/head
- 在user模块的根模块中引入服务;
import { HeadService } from './services/head.service';
- 如何在项目根组件中使用模块中的组件(包括模块的根组件和子组件);
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//引入模块中的组件
import { UserComponent } from './user.component';
import { NavComponent } from './components/nav/nav.component';
//引入服务
import { HeadService } from './services/head.service';
@NgModule({
//声明组件:User模块组件
declarations: [ UserComponent, NavComponent],
//暴露组件:将其他外部模块需要使用的组件用exports暴露出来,供外部其他组件使用
exports:[UserComponent],
//声明模块
imports: [
CommonModule
],
//声明服务
providers:[HeadService]
})
export class UserModule { }
- 在项目根模块中引入并声明自定义模块;
//引入自定义模块
import { UserModule } from './modules/user/user.module';
@NgModule({
/* 声明组件 */
declarations: [
AppComponent,
HeaderComponent,
HomeComponent,
MiaoshaComponent,
CouponComponent
],
/* 声明模块 */
imports: [
BrowserModule,
AppRoutingModule,
UserModule //声明自定义模块
],
/* 声明服务 */
providers: [],
/* 启动应用 */
bootstrap: [AppComponent]
})
export class AppModule { }
- 根组件的html页面中挂载自定义模块;
<app-header></app-header>
<router-outlet></router-outlet>
<hr /><br />
//模块子组件挂载
<app-user></app-user>
- 根组件路由模块【app-routing.module.ts】实现自定义模块懒加载;
/* 配置路由 */
const routes: Routes = [
{path:'user', loadChildren:'./modules/user.module#UserModule'}, /* 载入自定义模块,#UserModule是自定义模块的类名称 */
{path:'', pathMatch:'full', redirectTo:'user'} /* 此处是配置默加载认模块,如果存在多个自定义模块 */
];
以上就是在Angular项目中自定义模块的全部过程分析。