了解angular10模組相關概念，快速入門！-js教程-PHP中文網

首頁

web前端

js教程

了解angular10模組相關概念，快速入門！

青灯夜游

Aug 02, 2021 pm 06:59 PM

angular模組

本篇文章給大家了解一下angular10中的模組，介紹一下模組構成、ngModule 屬性、常用模組、angualr模組和js模組的區別以及模組懶加載，下面來一起看看。

了解angular10模組相關概念，快速入門！

模組概述

NgModule 模組是Angular種一個重要的點，因為Angular的基本建構塊就是NgModule。 NgModule 會把相關的程式碼（元件，指令，服務）收集到一些功能集中，形成功能單元。可以說：模組為元件，指令，服務提供了編譯的上下文環境。【相關教學推薦：《angular教學》】

在使用Angular CL 指令新建一個專案的時候，會給我們產生一個根模組，命名為AppModule，根模組有一個根元件AppComponent，引導這個根模組就可以啟動應用。 Angular 應用是模組化的，我們在開發中會根據其功能作用以及其特性，建立大大小小各種模組，從而構建其成為一個應用程序，任何模組都能包含任意數量的其它組件。

模組構成（基礎，掌握）

angular模組就是一個帶有@ngModule() 裝飾器的類，裝飾器@ngModule接受一個元資料物件。該物件的屬性用來描述該模組。

declarations: 宣告元件，指令，管道
imports：引入依賴項
exports：匯出模組
providers：服務註冊
bootstrap：指定宿主元件

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
//从主模块中引入NgModule(模块装饰器或模块注解)
import { NgModule } from &#39;@angular/core&#39;;
//引入组件，因为模块为组件提供编译的上下文环境
import { AppComponent } from &#39;./app.component&#39;;
// 引入路由模块
import { AppRoutingModule } from &#39;./app-routing.module&#39;;

//装饰器以json的形式声明元数据
@NgModule({
   //组合模块的组件和管道
  declarations: [ AppComponent ],
  //模块依赖项
  imports: [ BrowserModule,AppRoutingModule ],
  //子模块可以输入导出的模块
  imports: [],
  //模块提供的服务
  providers: [],
  //指定宿主组件，只在根模块中出现
  bootstrap: [AppComponent]
})
export class AppModule { }

ngModule 屬性解釋(理解)

點進去@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[]>;
}

屬性的詳細解釋

#providers：將本模組所有在元件中註入的服務，在這裡提前定義好，否則在此模組中使用此服務會有錯誤提示。

declaration：declaration 英文意思為宣告。在這裡聲明一些模組中要使用到的一些元件，指令，管道等。

imports：導入一些模組，比如說我把所有的指令構成一個模組我使用其中某些指令的時候，我可以選擇導入整個指令模組。也可以導入一些透過npm install 安裝的一些模組導入其中，才可以使用。

exports：匯出元件or指令管道等，以供引用此模組的模組可以使用此模組的元件or 指令管道等。

exporyComponents：entry component 表示 angular 的入口元件，可以引導元件是一個入口元件，Angular 會在引導過程中把它載入到 DOM 中。其它入口組件是在其它時機動態載入的。字面上的意義，但是啥時候用呢，比如，我要彈出一個元件，那麼這個元件是要動態載入到DOM中了吧，這個時候就需要將這個元件xxxComponent寫上了。

bootstrap:這個模組啟動的時候應該啟動的元件，上面程式碼可以看到AppModule是作為根模組的啟動元件。

schemas：不屬於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	#當你要和伺服器對話時

如何创建一个模块（基础，掌握）（未完待续）

ng generate module <module-name> //创建一个模块

ng g m <module-name> // 缩写

ng g m order // 创建订单模块

ng g m order --routing // 创建带路由订单模块

angualr模块和js模块有什么区别？（了解）

js模块（ES6 中的模块）

模块功能主要由两个命令构成：export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能

一般来说，一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

// profile.js
export var firstName = &#39;Michael&#39;;
export var lastName = &#39;Jackson&#39;;
export var year = 1958;

// 优先考虑下面写法
var firstName = &#39;Michael&#39;;
var lastName = &#39;Jackson&#39;;
var year = 1958;

export {firstName，lastName, year}

export 命令除了可以导出变量，还可以导出函数和类（class）

function a () {...}
function b () {...}

export {
    a,
    b as b_ // 通过as关键字重命名对外接口
}

使用export命令定义了模块的对外接口后，其他js文件就可以通过import命令来加载这个模块了。

// main.js
import {firstName, lastName, year} from &#39;./profile.js&#39;;

function setName(element) {
  element.textContent = firstName + &#39; &#39; + lastName;
}

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同

我们也可以对加载的模块进行重命名

import { lastName as surname } from &#39;./profile.js&#39;;

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// 使用
import * as circle from &#39;./circle&#39;;

console.log(&#39;圆面积：&#39; + circle.area(4));
console.log(&#39;圆周长：&#39; + circle.circumference(14))

这里有一个地方需要注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变，下面的写法都是不允许的

import * as circle from &#39;./circle&#39;;

// 下面两行都是不允许的
circle.foo = &#39;hello&#39;;
circle.area = function () {};

angualr模块

angualr模块在文章开头有作介绍（angualr模块概述和angualr模块构成）

NgModule 类与 JavaScript 模块有下列关键性的不同：

NgModule 只绑定了可声明的类，这些可声明的类只是供 Angular 编译器用的。
NgModule 与 JavaScript 类把它所有的成员类都放在一个巨型文件中不同，只要把该模块的类列在它的 @NgModule.declarations 列表中。
NgModule 只能导出可声明的类。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。
与 JavaScript 模块不同，NgModule 可以通过把服务提供商加到 @NgModule.providers 列表中，来用服务扩展整个应用。

相比之下我们可以看出，NgModule模块更灵活，扩展性强，更具优势。

模块懒加载

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

惰性加载的模块特点是该模块拥有路由模块。因此接着上面我们创建了一个订单模块我们给订单模块加上路由。并再创建一个user.module以及user.module模块下的list组件。

ng g m user --routing //创建user模块
ng g c user/list --skip-tests //在user模块里面创建组件list

创建order和user两个模块，list一个组件

<!--order.module 订单模块-->
import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;; //为一些结构性指令提供支持

import { OrderRoutingModule } from &#39;./order-routing.module&#39;; //模块具有自己的路由
import { ListComponent } from &#39;./list/list.component&#39;; //引入list组件

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

配置子路由

<!--order-routing.module 订单模块对应的路由模块-->
import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;
import { ListComponent } from &#39;./list/list.component&#39;;


const routes: Routes = [ //子路由的组件配置
  {
    path: &#39;list&#39;,
    component: ListComponent
  },
];

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

user模块如此类推

配置总路由（重点，掌握）

<!--AppRoutingModule 根路由模块-->
import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;

const routes: Routes = [ //根路由的配置
  {
    path: &#39;orders&#39;,
    loadChildren: &#39;./order/order.module#OrderModule&#39; // 配置订单子模块
  },
  {
    path: &#39;users&#39;,
    loadChildren: &#39;./user/user.module#UserModule&#39; // 配置用户子模块
  }
];

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

我们给app.component.html新增两个button

<!--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>

惰性加载模块有什么好处呢？

在大型项目中往往有许多个模块，而且大很大。如果一个模块1m，如果我们在浏览器输入地址打开这个应用，瞬间要加载100m 是非常慢的，而且我们并非要是用到着这100个模块。

将系统业务拆分为各个模块，划分好界限。按需加载，我点击了user 就加载user 模块，页面出现user 列表，对user进行操作。当我需要使用时才加载，极大的减少了页面初始加载的时间以及减少了资源的消耗。