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

模組概述

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

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

模組構成（基礎，掌握）

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

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

import { BrowserModule } from '@angular/platform-browser';
//從主模組中引入NgModule(模組裝飾器或模組註解)
import { NgModule } from '@angular/core';
//引入元件，因為模組為元件提供編譯的上下文環境
import { AppComponent } from './app.component';
// 引入路由模組
import { AppRoutingModule } from './app-routing.module';

//裝飾器以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的元件或者指令的元素或者屬性都需要在這裡進行宣告。

常用模組（基礎，掌握）

如何建立一個模組（基礎，掌握）（未完待續）

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 = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

// 優先考慮下面寫法
var firstName = 'Michael';
var lastName = 'Jackson';
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 './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import命令接受一對大括號，裡面指定要從其他模組匯入的變數名。大括號裡面的變數名，必須與被匯入模組（profile.js）對外介面的名稱相同

我們也可以對載入的模組進行重新命名

import { lastName as surname } from './profile.js';

除了指定載入某個輸出值，還可以使用整體載入，即用星號（*）指定一個物件，所有輸出值都載入在這個物件上面

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

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

// 使用
import * as circle from './circle';

console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14))

這裡有一個地方需要注意，模組整體載入所在的那個物件（上例是circle），應該是可以靜態分析的，所以不允許執行時改變，下面的寫法都是不允許的

import * as circle from './circle';

// 下面兩行都是不允許的
circle.foo = 'hello';
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 '@angular/core';
import { CommonModule } from '@angular/common'; //為一些結構性指令提供支援

import { OrderRoutingModule } from './order-routing.module'; //模組具有自己的路由
import { ListComponent } from './list/list.component'; //引入list元件

@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 { }

user模組如此類推

設定總路由（重點，掌握）

<!--AppRoutingModule 根路由模組-->
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [ //根路由的設定
  {
    path: 'orders',
    loadChildren: './order/order.module#OrderModule' // 設定訂單子模組
  },
  {
    path: 'users',
    loadChildren: './user/user.module#UserModule' // 設定使用者子模組
  }
];

@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進行操作。當我需要使用時才載入，極大的減少了頁面初始載入的時間以及減少了資源的消耗。

模組共用

共用模組顧名思義，就是共用於所有的模組中。首先得定義好這個模組的具體功能特性，比如指令、管道和元件等分別封裝成一個個模組，哪些業務模組需要使用到其裡面的功能便匯入其模組中便可。 這極大的規範了系統的統一性和降低了以後的維護成本。

如果你引入了第三方UI，就不要把UI引入共用模組中匯出，這樣你的共用模組越來越龐大。別人UI框架設計的初衷就是按需載入。你把UI元件放到共用模組，載入那些無關的的UI元件，會浪費掉大量的效能。

更多程式設計相關知識，請存取：！！

以上就是了解angular10模組相關概念，快速入門！的詳細內容，更多請關注TW511.COM其它相關文章！