Angular 從入坑到挖坑 - 模塊簡介

来源:https://www.cnblogs.com/danvic712/archive/2020/06/28/angular-modules-introduction.html

一、Overview Angular 入坑記錄的筆記第七篇,介紹 Angular 中的模塊的相關概念,瞭解相關的使用場景,以及知曉如何通過特性模塊來組織我們的 Angular 應用 對應官方文檔地址: NgModule 簡介 NgModules JavaScript 模塊 vs. NgModule ...


一、Overview

Angular 入坑記錄的筆記第七篇,介紹 Angular 中的模塊的相關概念,瞭解相關的使用場景,以及知曉如何通過特性模塊來組織我們的 Angular 應用

對應官方文檔地址:

二、Contents

  1. Angular 從入坑到棄坑 - Angular 使用入門
  2. Angular 從入坑到挖坑 - 組件食用指南
  3. Angular 從入坑到挖坑 - 表單控制項概覽
  4. Angular 從入坑到挖坑 - HTTP 請求概覽
  5. Angular 從入坑到挖坑 - Router 路由使用入門指北
  6. Angular 從入坑到挖坑 - 路由守衛連連看
  7. Angular 從入坑到挖坑 - 模塊簡介

三、Knowledge Graph

思維導圖

四、Step by Step

4.1、前端模塊化

前端模塊化是指將程式中一組相關的功能按照一定的規則組織在一塊,整個模塊內部的數據和功能實現是私有的,通過 export 暴露其中的一些介面(方法)與系統中的別的模塊進行通信

NgModule 簡介

在 Angular 應用中,至少會存在一個 NgModule,也就是應用的根模塊(AppModule),通過引導這個根模塊就可以啟動整個項目

像開發中使用到 FormsModule、HttpClientModule 這種 Angular 內置的庫也都是一個個的 NgModule,在開發中通過將組件、指令、管道、服務或其它的代碼文件聚合成一個內聚的功能塊,專註於系統的某個功能模塊

常見的 NgModule 模塊
模塊名稱 模塊所在文件 功能點
BrowserModule @angular/platform-browser 用於啟動和運行瀏覽器應用的的基本服務
CommonModule @angular/common 使用 NgIf、NgFor 之類的內置指令
FormsModule @angular/forms 使用 NgModel 構建模板驅動表單
ReactiveFormsModule @angular/forms 構建響應式表單
RouterModule @angular/router 使用前端路由
HttpClientModule @angular/common/http 發起 http 請求
JavaScript 模塊與 NgModule

在 JavaScript 中,每一個 js 文件就是一個模塊,文件中定義的所有對象都從屬於那個模塊。 通過 export 關鍵字,模塊可以把其中的某些對象聲明為公共的,從而其它 JavaScript 模塊可以使用 import 語句來訪問這些公共對象

例如下麵的示例代碼中,別的 javascript 模塊可以通過導入這個 js 文件來直接使用暴露的 getRolesgetUserInfo 方法

function getRoles() {
    // ...
}

function getUserInfo() {
    // ...
}

export {
    getRoles,
    getUserInfo
}

NgModule 是一個帶有 @NgModule 裝飾器的類,通過函數的參數來描述這個模塊,例如在上節筆記中創建的 CrisisModule,定義了我們在該特性模塊中創建的組件,以及需要使用到的其它模塊

NgModule

在使用 @NgModule 裝飾器時,通常會使用到下麵的屬性來定義一個模塊

  • declarations:當前模塊中的組件、指令、管道

  • imports:當前模塊所需的其它 NgModule 模塊

  • exports:其它模塊中可以使用到當前模塊可聲明的對象

  • providers:當前模塊向當前應用中其它應用模塊暴露的服務

  • bootstrap:用來定義整個應用的根組件,是應用中所有其它視圖的宿主,只有根模塊中才會存在

4.2、應用的根模塊

根模塊是用來啟動此 Angular 應用的模塊, 按照慣例,它通常命名為 AppModule

通過 Angular CLI 新建一個應用後,預設的根模塊代碼如下,通過使用 @NgModule 裝飾器裝飾 AppModule 類,定義了這個模塊的一些屬性特征,從而告訴 Angular 如何編譯和啟動本應用

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

declarations 數組告訴 Angular 哪些組件屬於當前模塊。 當創建新的組件時,需要將它們添加到 declarations 數組中。每個組件都只能聲明在一個 NgModule 類中,同時,如果你使用了未聲明過的組件,Angular 將會報錯

同樣的,對於當前模塊使用到的自定義指令、自定義管道,也需要在 declarations 數組中進行聲明

imports

imports 數組表明當前模塊正常工作時需要引入哪些的模塊,例如這裡使用到的 BrowserModuleAppRoutingModule 或者是我們使用雙向數據綁定時使用到的 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 { }

當創建完成後,為了將該特性模塊包含到應用中,需要和 BrowserModuleAppRoutingModule 一樣,在根模塊中 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 { }

您的分享是我們最大的動力!

更多相關文章
  • getCookie(cookie_name) { var allcookies = document.cookie; //索引長度,開始索引的位置 var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引,就代表cookie存在,否則不 ...
  • 一:定義 1.TypeScript無法直接在瀏覽器上運行(node也無法去運行),會被編譯成JavaScript語法再去運行 2.是JavaScript的超集,是靜態類型,一旦定義成某類型,將無法改變 //靜態類型 let c: number=123; c='123';//報錯 c=123; 二:優 ...
  • 1、年齡的問題。年齡確實是一個必須考慮的重要問題,30歲大多已成家,可能已經有了小孩,分給家庭的時間會越來越多,能夠投入的時間和精力必然比不上20出頭的小伙子。但我認為精力反而不是最大的問題,最大的問題是越來越輸不起。到了30歲的人應該都有體會,你做的每一個決策都有很高的機會成本,是牽一發而動全身的 ...
  • 因為所出標簽太多,所以我們很難都用得上或者意識到需要用。 但其實也有許多有趣但是我們未曾發掘的標簽,本文所要介紹的 便是一個。 <dataList>是什麼? 標簽一個類似於 標簽一樣可以通過包裹 來表示控制項可選值的,唯一不同的就是 需要配合 來使用,而且 不表示任何內容,僅作展示。 我們康個慄子: ...
  • 本案例製作一個咖啡銷售網站,通過網站呈現自己的理念和咖啡文化,頁面佈局設計獨特,採用兩欄的佈局形式;頁面風格設計簡潔,為瀏覽者提供一個簡單、時尚的頁面,瀏覽時讓人心情舒暢。 1、網站概述網站的設計思路和設計風格與Bootstrap框架風格完美融合,下麵就來具體地介紹實現的步驟。 2、網站結構 本案例 ...
  • 盒模型 盒模型主要兩種,標準盒模型和怪異和模型 標準盒模型:width指content部分的寬度 怪異盒模型:width指content、padding、border的總寬度 解決方法:box-sizing屬性,值為content-box(標準盒模型),值為border-box(怪異盒模型) 垂直居 ...
  • /** * 對象、數組變化監聽(增刪改) * @author w-bing * @date 2020-04-22 * @param {Object} obj * @param {Function} cb * @return {Proxy} */ function deepProxy(obj, cb) ...
  • Laravel 如何在blade文件中使用Vue組件 1. 安裝laravel/ui依賴包 composer require laravel/ui 2.生成vue基本腳手架 php artisan ui react 系統還提供了非常便捷的auth腳手架,帶登錄註冊。 php artisan ui r ...
一周排行
  • 圖文講解,一門教學級邏輯式編程語言,NMiniKanren,的運行原理。 ...
  • 多Sheet導入教程 說明 本教程主要說明如何使用Magicodes.IE.Excel完成多個Sheet數據的Excel導入。 要點 多個相同格式的Sheet數據導入 多個不同格式的Sheet數據導入 主要步驟 1. 多個相同格式的Sheet數據導入 1.1 創建導入Sheet的Dto 主要代碼如下 ...
  • 在KeyPress事件中寫入 private void txtBoxKeyPress(object sender, KeyPressEventArgs e) { if ((e.KeyChar >= 'a' && e.KeyChar <= 'z') || (e.KeyChar >= 'A' && e. ...
  • 在 Xunit 中使用依賴註入 Intro 之前寫過一篇 xunit 的依賴註入相關的文章,但是實際使用起來不是那麼方便 今天介紹一個基於xunit和微軟依賴註入框架的“真正”的依賴註入使用方式 ——— Xunit.DependencyInjection, 來自大師的作品,讓你在測試代碼里使用依賴註 ...
  • 官網 http://www.hzhcontrols.com/ 前提 入行已經7,8年了,一直想做一套漂亮點的自定義控制項,於是就有了本系列文章。 GitHub:https://github.com/kwwwvagaa/NetWinformControl 碼雲:https://gitee.com/kww ...
  • 在項目的實際開發過程中,我們經常會遇到Tab頁面的開發 EciTab控制項有多種使用方式: 下麵介紹Frame容器方式: 下麵介紹的Tab頁面採用的策略是 Tab頁面管理幾個子頁面,頁面組織上用Iframe管理的模式 採用Iframe的原因主要有兩個 1.開發簡單,每一個頁面都是簡單的畫面 2.性能考 ...
  • 引用的DLL MySql.Data.MySqlClient System.Data City實體 public class City { public int ID { get; set; } public string Name { get; set; } public string Countr ...
  • 案例故事: 即時通訊(IM)軟體有很多,比如企業微信,釘釘,飛書,Skype, 微軟的Lync等, 這些軟體現在都很牛,還能監控誰誰在不在電腦旁工作,誰誰誰提前下班溜了。。。 一次偶然的機會,有個妹子請教我,她每天都想準時18點下班, 她問我如何做到: 假裝企業微信線上,併在2個小時後(20點)準時 ...
  • 一.官方文檔 https://pypi.org/project/muggle-ocr/ 二模塊安裝 pip install muggle-ocr # 因模塊過新,阿裡/清華等第三方源可能尚未更新鏡像,因此手動指定使用境外源,為了提高依賴的安裝速度,可預先自行安裝依賴:tensorflow/numpy ...
  • 前言 ​ 關於 Python 這個欄目,咕了幾個月了,今天講講如何發送驗證碼並驗證。 ​ 因為部分原因,寫這篇文章的時候心情是不太好的,播放首歌吧。 代碼 導入 導入yagmail,random和time庫 import yagmail,random,time #導入 yagmail , rando ...