Angular 是一個用 HTML 和 TypeScript 構建客戶端應用的平臺與框架。 Angular 本身使用 TypeScript
寫成的。它將核心功能和可選功能作為一組 TypeScript 庫進行實現，你可以把它們導入你的應用中。

一：模塊

NgModule 為一個組件集聲明了編譯的上下文環境，NgModule 可以將其組件和一組相關代碼（如服務）關聯起來，形成功能單元

每個 Angular 應用都有一個根模塊，通常命名為 AppModule。根模塊提供了用來啟動應用的引導機制。
一個應用通常會包含很多功能模塊。

像 JavaScript 模塊一樣，NgModule 也可以從其它 NgModule 中導入功能，并允許導出它們自己的功能供其它
NgModule 使用。 比如，要在你的應用中使用路由器（Router）服務，就要導入 Router 這個 NgModule。

export class AppModule { } //導出import { AppModule } from './app/app.module'; //導入

這項技術還能讓你獲得按需加載模塊的優點，以盡可能減小啟動時需要加載的代碼體積。

NgModule 是一個帶有 @NgModule 裝飾器的類，@NgModule 裝飾器是一個函數，它接受一個元數據對象，該對象的屬性用來描述這個模塊

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({imports: [ BrowserModule ],providers: [ Logger ],declarations: [ AppComponent ],exports: [ ],bootstrap: [ AppComponent ] }) export class AppModule { }

解釋

declarations（可聲明對象表）—— 聲明屬于本 NgModule 的組件、指令、管道。exports（導出表） —— 那些能在其它模塊的組件模板中使用的可聲明對象的子集，為空是因為根模塊沒有任何理由導出任何東西，因為其它模塊永遠不需要導入根模塊。imports（導入表） —— 導入其他模塊providers —— 定義服務，這些服務能被本應用中的任何部分使用。（你也可以在組件級別指定服務提供商，這通常是首選方式。在這里面定義之后在組件里面只需要注入不需要在組件內定義了）bootstrap —— 應用的主視圖，稱為根組件。它是應用中所有其它視圖的宿主。只有根模塊才應該設置這個 bootstrap 屬性。

NgModule與組件的關系：

根模塊總會有一個根組件，并在引導期間創建它，

比如前面介紹的元數據bootstrap中定義的AppComponent就是 AppModule的根組件

任何模塊都能包含任意數量的組件，這些組件可以通過路由器加載，也可以通過模板創建。屬于這個 NgModule
的組件會共享這個模塊提供的同一個編譯上下文環境。

angular自帶的庫

Angular 自帶了一組 JavaScript 模塊，你可以把它們看成庫模塊。每個 Angular 庫的名稱都帶有 @angular
前綴。 使用 npm install 包管理器安裝它們，并使用 JavaScript 的 import 語句導入其中的各個部分。

import { Component } from '@angular/core'; //從 @angular/core 庫中導入 Component 裝飾器 import { BrowserModule } from '@angular/platform-browser'; //從 Angular 庫中導入 Angular 模塊：這個代碼從 platform-browser 庫中導入了 BrowserModule 模塊

NgModule 和 JavaScript 的模塊

這兩種模塊系統不同但互補。你可以同時使用 Angular 和 JavaScript 的這兩種模塊系統。 雖然這兩種模塊系統容易混淆（它們共享了同樣的詞匯 import 和export）

二：組件

下面的例子中就是 HeroListComponent 的基礎元數據：

@Component({selector: 'app-hero-list',templateUrl: './hero-list.component.html',providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ }

組件控制視圖上的一小片區域，視圖都是由一個個組件所組成和控制的

組件通過一些由屬性和方法組成的 API 與視圖交互。

export class HeroListComponent implements OnInit {heroes: Hero[];selectedHero: Hero;constructor(private service: HeroService) { }ngOnInit() {this.heroes = this.service.getHeroes();}selectHero(hero: Hero) { this.selectedHero = hero; } }

比如上面的組件就由heroes、selectedHero屬性以及 selectHero()方法與視圖進行數據交互的

每個 Angular 應用都至少有一個組件，也就是根組件—AppComponent，每個組件都會定義一個類，其中包含應用的數據和邏輯

@Component 裝飾器表明緊隨它的那個類是一個組件，并提供模板和該組件專屬的元數據。

模板與視圖

模板就是一種 HTML，它會告訴 Angular 如何渲染該組件

模板很像標準的 HTML，但是它還包含 Angular 的模板語法，你的模板可以使用數據綁定加粗樣式來協調應用和 DOM
中的數據，使用管道在顯示出來之前對其進行轉換，使用指令來把程序邏輯應用到要顯示的內容上。

<h2>Hero List</h2><p><i>Pick a hero from the list</i></p> <ul><li *ngFor="let hero of heroes" (click)="selectHero(hero)">{{hero.name}}</li> </ul><app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>上面的例子使用了典型的 HTML 元素，比如 <h2> 和 <p>，還包括一些 Angular 的模板語法元素，如 *ngFor（指令），{{hero.name}}（數據綁定），click（數據綁定）、[hero] （數據綁定）和 <app-hero-detail>（組件的子組件）

1：數據綁定

Angular 支持雙向數據綁定

數據綁定標記有四種形式。每種形式都有一個方向 —— 從組件到 DOM、從 DOM 到組件或雙向

<li>{{hero.name}}</li> <app-hero-detail [hero]="selectedHero"></app-hero-detail> <li (click)="selectHero(hero)"></li> <input [(ngModel)]="hero.name">分析： 1：{{}}：插值表達式 從組件---DOM 2：[hero] = ''selectedHero'' 屬性綁定，把父組件 HeroListComponent 的 selectedHero 的值傳到子組件 HeroDetailComponent 的 hero 屬性中。從組件---DOM 3：(click)=''selectHero(hero)''事件綁定 從DOM---組件4：[(ngModel)] = ''hero.name'' 雙向綁定 從DOM<>組件

在雙向綁定中，數據屬性值通過屬性綁定從組件流到輸入框。用戶的修改通過事件綁定流回組件，把屬性值設置為最新的值。

數據綁定在模板及其組件之間的通訊中扮演了非常重要的角色，它對于父組件和子組件之間的通訊也同樣重要。

2：管道

帶有 @Pipe 裝飾器的類中會定義一個轉換函數，用來把輸入值轉換成供視圖顯示用的輸出值。

Angular 自帶了很多管道，比如 date 管道和 currency 管道，你也可以自己定義一些新管道。

語法：{{value_name| pipe_name}}

3：指令

Angular 的模板是動態的。當 Angular 渲染模板的時候，會根據指令給出的指示對 DOM 進行轉換。 指令就是一個帶有
@Directive 裝飾器的類。

組件從技術角度上說就是一個指令，除組件外，還有兩種指令：結構型指令和屬性型指令。

<1結構型指令

結構型指令通過添加、移除或替換 DOM 元素來修改布局

<li *ngFor="let hero of heroes"></li> <app-hero-detail *ngIf="selectedHero"></app-hero-detail>

<2屬性型指令

屬性型指令會修改現有元素的外觀或行為。 在模板中，它們看起來就像普通的 HTML 屬性一樣，因此得名“屬性型指令”

ngModel 指令就是屬性型指令的一個例子,它實現了雙向數據綁定。 ngModel 修改現有元素（一般是 ）的行為：設置其顯示屬性值，并響應 change 事件。Angular 還有很多預定義指令，它們或者修改布局結構（比如 ngSwitch），或者修改 DOM 元素和組件的某些方面（比如 ngStyle 和 ngClass）。

<input [(ngModel)]="hero.name">

三：服務與依賴注入

<1:服務

比如你寫了一個公共的方法，這個方法將在很多組件中用到，你就可以把這個公共方法寫進一個服務里面，到時候只需要在不同組件引入這個服務就好，我理解的服務就是服務組件的類，Angular 把組件和服務區分開，以提高模塊性和復用性。

對于與特定視圖無關并希望跨組件共享的數據或邏輯，可以創建服務類

服務類的定義通常緊跟在 “@Injectable” 裝飾器之后

該裝飾器提供的元數據可以讓你的服務作為依賴被注入到客戶組件中。

下面是一個服務類的范例，用于把日志記錄到瀏覽器的控制臺：

export class Logger {log(msg: any) { console.log(msg); }error(msg: any) { console.error(msg); }warn(msg: any) { console.warn(msg); } }

服務也可以依賴其它服務

<2：依賴注入（DI）

你可以把一個服務注入到組件中，讓組件類得以訪問該服務類，在 Angular 中，要把一個類定義為服務，就要用 @Injectable
裝飾器來提供元數據，以便讓 Angular 可以把它作為依賴注入到組件中

constructor(private service: HeroService) { }

對于任何服務，你必須至少注冊一個提供商，你也可以為特定的模塊或組件注冊提供商。要注冊提供商，就要在服務的 @Injectable 裝飾器中提供它的元數據providedIn，或者在@NgModule 或 @Component 的元數據providers中。

@Injectable({providedIn: 'root', })

當你在組件級注冊提供商時，你會為該組件的每一個新實例提供該服務的一個新實例。 要在組件級注冊，就要在 @Component 元數據的
providers 屬性中注冊服務提供商。

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],providers:[] })

當你使用特定的 NgModule 注冊提供商時，該服務的同一個實例將會對該 NgModule 中的所有組件可用。要想在這一層注冊，請用
@NgModule 裝飾器中的 providers 屬性

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

五：路由

它的工作模型基于人們熟知的瀏覽器導航約定

不過路由器會把類似 URL 的路徑映射到視圖而不是頁面，當用戶執行一個動作時（比如點擊鏈接），本應該在瀏覽器中加載一個新頁面，但是路由器攔截了瀏覽器的這個行為，并顯示或隱藏一個視圖層次結構。

如果路由器認為當前的應用狀態需要某些特定的功能，而定義此功能的模塊尚未加載，路由器就會按需惰性加載此模塊。

這五個概念會有詳細的教程。。。

總結

以上是生活随笔為你收集整理的angular架构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。