认识NgModule~Angular的模块化

目录

@NgModule() 装饰器的类

Angular常用的系统模块

1. 示例——创建,导入特性模块

order.module.ts

list.component.ts

app.module.ts

app.component.html

2. 示例——惰性加载模块

order.module

order-routing.module

在*路由AppRoutingModule中配置

app.component.html


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule() 装饰器的类

​export declare interface NgModule {
    providers?: Provider[];// 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。(你也可以在组件级别指定服务提供商,这通常是首选方式。)
    declarations?: Array<Type<any> | any[]>;// 那些属于本 NgModule 的组件、指令、管道
    imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;// 那些导出了本模块中的组件模板所需的类的其它模块
    exports?: Array<Type<any> | any[]>;//那些能在其它模块的组件模板中使用的可声明对象的子集
    entryComponents?: Array<Type<any> | any[]>;
    bootstrap?: Array<Type<any> | any[]>;
    schemas?: Array<SchemaMetadata | any[]>;
}

  1. providers:将本模块所有在组件中注入的服务,在这里提前定义好,否则在此模块中使用这个服务会有错误提示。
  2. declaration:declaration 英文意思为声明。在这里声明一些模块中要使用到的一些组件,指令,管道等。
  3. imports:导入一些模块,比如说我把所有的指令构成一个模块 我使用其中某些指令的时候,我可以选择导入整个指令模块。也可以导入一些通过npm install 安装的一些模块导入其中,才可以使用。
  4. exports:导出组件or指令管道等,以供引用此模块的模块可以使用此模块的组件or 指令管道等。
  5. exporyComponents:entry component 表示 angular 的入口组件,可以引导组件是一个入口组件,Angular 会在引导过程中把它加载到 DOM 中。 其它入口组件是在其它时机动态加载的。字面上的意义,但是啥时候用呢,比如,我要弹出一个组件,那么这个组件是要动态加载到DOM中了吧,这个时候就需要将这个组件xxxComponent写上了。
  6. bootstrap:这个模块启动的时候应该启动的组件,上面代码可以看到AppModule是作为根模块的启动组件。
  7. schemas:不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明。

Angular常用的系统模块

NgModule

导入自

为何使用

BrowserModule

@angular/platform-browser

当你想要在浏览器中运行应用时

CommonModule

@angular/common

当你想要使用 NgIf 和 NgFor 时

FormsModule

@angular/forms

当要构建模板驱动表单时(它包含 NgModel )

ReactiveFormsModule

@angular/forms

当要构建响应式表单时

RouterModule @angular/router

要使用路由功能,并且你要用到 RouterLink,.forRoot() 和 .forChild() 时

HttpClientModule

@angular/common/http

当你要和服务器对话时

1. 示例——创建,导入特性模块

order.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ListComponent } from './list/list.component';

@NgModule({
  declarations: [ListComponent],//定义list组件
  exports: [ListComponent],//导出list组件
  imports: [
    CommonModule
  ]
})
export class OrderModule { }

list.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OrderModule } from './order/order.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OrderModule //将order模块导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-list></app-list>
<router-outlet></router-outlet>

2. 示例——惰性加载模块

如果我们将所有的模块都导入根模块,那么应用在初始化加载的时候就会非常慢。这时候我们应该考虑使用惰性加载。根据需求加载相应都模块,减少应用初始化包的大小以及减少加载的时间,提高用户体验性。

order.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrderRoutingModule } from './order-routing.module';
import { ListComponent } from './list/list.component';


@NgModule({
  declarations: [ListComponent],
  imports: [
    CommonModule,
    OrderRoutingModule
  ]
})
export class OrderModule { }

order-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from './list/list.component';


const routes: Routes = [
  {
    path: 'list',
    component: ListComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OrderRoutingModule { }

在*路由AppRoutingModule中配置

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'orders',
    loadChildren: './order/order.module#OrderModule'
  },
  {
    path: 'user',
    loadChildren: './user/user.module#UserModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h2>
    Welcome to {{ title }}!
  </h2>
</div>


<button routerLink="/user/list">user</button>
<button routerLink="/order/list">order</button>

<router-outlet></router-outlet>

上一篇:angular中如何将后端返回的多层嵌套json数据转换成树状层级结构


下一篇:angular和spring boot的standalone部署