Angular 架構簡述
一個最簡單的根模組:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { } 接下來我們通過引導根模組來啟動應用，開發過程通常在 main.ts 檔案中來引導 AppModule ，程式碼如下：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);元件 (component)
元件是一個模板的控制類用於處理應用和邏輯頁面的檢視部分。
元件是構成 Angular 應用的基礎和核心，可用於整個應用程式中。
元件知道如何渲染自己及配置依賴注入。
元件通過一些由屬性和方法組成的 API 與檢視互動。
建立 Angular 元件的方法有三步：
- 從 @angular/core 中引入 Component 修飾器
- 建立一個普通的類，並用 @Component 修飾它
- 在 @Component 中，設定 selector 自定義標籤，以及 template 模板
模板 (template)
Angular模板的預設語言就是HTML。
我們可以通過使用模板來定義元件的檢視來告訴 Angular 如何顯示元件。以下是一個簡單是例項：
<div> 網站地址 : {{site}} </div>
在Angular中，預設使用的是雙大括號作為插值語法，大括號中間的值通常是一個元件屬性的變數名。
元資料 (metadata)
元資料告訴 Angular 如何處理一個類。
考慮以下情況我們有一個元件叫作 Component ，它是一個類，直到我們告訴 Angular 這是一個元件為止。
你可以把元資料附加到這個類上來告訴 Angular Component 是一個元件。
在 TypeScript 中，我們用 裝飾器 (decorator) 來附加元資料。
例項
@Component({ selector : 'mylist', template : '<h2>菜鳥教程</h2>' directives : [ComponentDetails] }) export class ListComponent{...}
@Component 裝飾器能接受一個配置物件，並把緊隨其後的類標記成了元件類。
Angular 會基於這些資訊建立和展示元件及其檢視。
@Component 中的配置項說明：
selector - 一個 css 選擇器，它告訴 Angular 在 父級 HTML 中尋找一個 <mylist> 標籤，然後建立該元件，並插入此標籤中。
templateUrl - 元件 HTML 模板的地址。或者直接寫html內容，用“`”括起來
directives - 一個數組，包含此模板需要依賴的元件或指令。
providers - 一個數組，包含元件所依賴的服務所需要的依賴注入提供者。
資料繫結 (data binding)
資料繫結為應用程式提供了一種簡單而一致的方法來顯示資料以及資料互動，它是管理應用程式裡面數值的一種機制。
通過這種機制，可以從HTML裡面取值和賦值，使得資料的讀寫，資料的持久化操作變得更加簡單快捷。
如圖所示，資料繫結的語法有四種形式。每種形式都有一個方向——從 DOM 來、到 DOM 去、雙向，就像圖中的箭頭所示意的。
程式碼例子：
//插值表示式 在 HTML 標籤中顯示元件值。 <li>{{hero.name}}</li> //屬性繫結 把父元件HeroListComponent的selectedHero的值傳到子元件HeroDetailComponent的hero屬性中。 <hero-detail [hero]="selectedHero"></hero-detail> //事件繫結 使用者點選英雄的名字時呼叫元件的selectHero方法。 <li (click)="selectHero(hero)"></li> //雙向繫結 資料屬性值通過屬性繫結從元件流到輸入框。使用者的修改通過事件繫結流回元件，把屬性值設定為最新的值。 <input [(ngModel)]="hero.name">
可能大家對各種括號看的眼花了，總結一下：
- 雙花括號是單向繫結，傳遞的是值。方向是
元件 -> 模板。 - 方括號是單向繫結，傳遞的是屬性。方向是
元件 -> 模板。 - 圓括號是事件繫結，處理
點選等活動（action）。方向是 模板-> 元件。 - 方括號套圓括號是雙向繫結，方向是
元件 <-> 模板。
指令 (directive)
Angular模板是動態的 。當 Angular 渲染它們時，它會根據指令對 DOM 進行修改。
指令是一個帶有"指令元資料"的類。在 TypeScript 中，要通過 @Directive 裝飾器把元資料附加到類上。
在Angular中包含以下三種類型的指令：
- 屬性指令：以元素的屬性形式來使用的指令。
- 結構指令：用來改變DOM樹的結構
- 元件：作為指令的一個重要子類，元件本質上可以看作是一個帶有模板的指令。
<li *ngFor="let site of sites"></li> <site-detail *ngIf="selectedSite"></site-detail>
*ngFor 告訴 Angular 為 sites 列表中的每個項生成一個 <li> 標籤。
*ngIf 表示只有在選擇的項存在時，才會包含 SiteDetail 元件。
管道
Angular 的管道可以讓你在模板中宣告顯示值的轉換邏輯。 帶有 @Pipe 裝飾器的類中會定義一個轉換函式，用來把輸入值轉換成供檢視顯示用的輸出值。
Angular 自帶了很多管道，比如 date 管道和 currency 管道，完整的列表參見 Pipes API 列表。你也可以自己定義一些新管道。
要在 HTML 模板中指定值的轉換方式，請使用 管道操作符 (|)。
{{interpolated_value | pipe_name}}
你可以把管道串聯起來，把一個管道函式的輸出送給另一個管道函式進行轉換。 管道還能接收一些引數，來控制它該如何進行轉換。比如，你可以把要使用的日期格式傳給 date 管道：
<!-- Default format: output 'Jun 15, 2015'--> <p>Today is {{today | date}}</p> <!-- fullDate format: output 'Monday, June 15, 2015'--> <p>The date is {{today | date:'fullDate'}}</p> <!-- shortTime format: output '9:43 AM'--> <p>The time is {{today | date:'shortTime'}}</p>
服務 (service)
服務是一個廣義的概念，它包括應用所需的任何值、函式或特性。狹義的服務是一個明確定義了用途的類。它應該做一些具體的事，並做好。
Angular 把元件和服務區分開，以提高模組性和複用性。
通過把元件中和檢視有關的功能與其他型別的處理分離開，你可以讓元件類更加精簡、高效。 理想情況下，元件的工作只管使用者體驗，而不用顧及其它。 它應該提供用於資料繫結的屬性和方法，以便作為檢視（由模板渲染）和應用邏輯（通常包含一些模型的概念）的中介者。
元件不應該定義任何諸如從伺服器獲取資料、驗證使用者輸入或直接往控制檯中寫日誌等工作。 而要把這些任務委託給各種服務。通過把各種處理任務定義到可注入的服務類中，你可以讓它可以被任何元件使用。 通過在不同的環境中注入同一種服務的不同提供商，你還可以讓你的應用更具適應性。
Angular 不會強制遵循這些原則。它只會通過依賴注入讓你能更容易地將應用邏輯分解為服務，並讓這些服務可用於各個元件中。
依賴注入 (dependency injection)
依賴注入是提供類的新例項的一種方式，還負責處理類所需的全部依賴。大多數依賴都是服務。 Angular 使用依賴注入來提供新元件以及元件所需的服務。
比如我們要給某元件匯入 HeroService 這個服務，看這段程式碼：
constructor(private service: HeroService) {
...
}當 Angular 建立元件時，會首先為元件所需的服務找一個注入器（ Injector ） 。
注入器是一個維護服務例項的容器，存放著以前建立的例項。
如果容器中還沒有所請求的服務例項，注入器就會建立一個服務例項，並且新增到容器中，然後把這個服務返回給 Angular 。
當所有的服務都被解析完並返回時， Angular 會以這些服務為引數去呼叫元件的建構函式。 這就是依賴注入 。
我們必須先用注入器 injector 為 HeroService 註冊一個提供商 provider。意思就是我們必須在 providers 寫上才能用，看這段程式碼：
@Component({
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})轉自：