Angularv4入門篇1

國慶時按照官網的tutorial寫了遍官方示例，只知其一;不知其二，不明白angular的服務的服務爲什麼要單獨抽離出來、angular應用是如何啓用的。近期打算看下angular的文檔部分，而後梳理遍以理解angular的架構思想。

下面是一些須要明確的關鍵概念：

• angular：編寫客戶端應用的前端框架，官方推薦用angular/cli腳手架來進行開發，而且最新的angular版本使用ts語言。
• 組件(component)：負責控制屏幕一小塊區域，也能夠叫作視圖(view)。
• 模塊(module): 每一個 Angular 應用至少有一個模塊（根模塊），習慣上命名爲AppModule。根模塊在一些小型應用中多是惟一的模塊，大多數應用會有不少特性模塊，每一個模塊都是一個內聚的代碼塊專一於某個應用領域、工做流或緊密相關的功能。
• 模板： 組件經過模板來定義視圖，模板以html的模式告訴angular如何渲染組件。與標準html不一樣的是，模板使用angular的模板語法，所以還能使用其餘元素如*ngFor、<my-component>等。
• 元數據(metadata): 元數據告訴angular如何處理一個類。使用裝飾器如@Component、@Injectable、@Input、@Output添加元數據來指導angular的行爲。好比export class MyComponent implements OnInit{} 是一個js的原生類，須要使用@Component(configObj)附加元數據來修飾這個類，這會將之標記成angular的組件。
• 數據綁定(data binding): mvvm框架的核心功能。數據的變更會使UI更新，用戶交互行爲會修改數據，這使得建立應用程序的邏輯更爲清楚。
• 指令(directive)：當angular渲染組件時，angular會根據指令提供的操做對dom進行轉換。
• 服務(service): 通常是一個類，具備專一、明確的用途。它應該作一個特定的事情，並把它作好，好比：日誌服務、服務數據、消息總線等。
• 依賴注入(Dependency injection):「依賴注入」是提供類的新實例的一種方式，還負責處理好類所需的所有依賴。大多數依賴都是服務。 Angular 使用依賴注入來提供新組件以及組件所需的服務。

angular的架構設計

這是angular的架構圖。

angular用組件模塊（Module Component）來構成應用程序，並向組件注入服務模塊（Module Service）來向模塊組件添加應用的邏輯部分，最終使用模塊打包器來打包成最終的應用程序。組件模塊的命名通常爲組件.component.ts。
通常用模板(Template)來寫頁面部分，在腳手架中是使用擴展的語法來寫html文件，模板名爲組件名.component.ts,模板中能夠寫angular的指令(directive)，而且能夠綁定組件模塊中的數據（屬性綁定、事件綁定等）。
經過向組件注入(inject)服務，可以讓組件具備各種功能。
angular應用程序按組件來編寫應用程序頁面，頁面的一小塊區域就是一個組件，而且通常會把css與模板抽離成單獨的文件。好比有一個分頁組件，那麼在page-select文件夾下會有page-elect.component.ts,page-elect.component.html,page-elect.component.css這麼三個文件。寫組件模塊化意味着頁面且的解耦，便於維護。
在全部頁面組件都編寫完成後，angular能夠從引導根模塊（通常命名爲AppModule)來啓動應用。

模塊

angular是模塊化的，angular有本身的模塊系統NgModules，angular中的模塊都是帶有@NgModule裝飾器的類,裝飾器用來把元數據附加到類上。模塊通常都是專一於某個應用領域、某一工做流、或者由一系列功能相近的功能構成的。簡單根模塊示例：

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

• declarations - 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令和管道。程序編寫的全部頁面佈局組件都須要在這裏聲明。
• bootstrap - 指定應用的主視圖（稱爲根組件），它是其餘視圖的宿主。只有根模塊才能設置bootstrap屬性。
• providers 與服務(service)有關的類，它會在應用程序的其餘部分均可訪問。
• imports 其餘一些模塊，它們能被declarations中的組件模板所使用。
• exports 它是其餘declarations的子集，對其餘模塊的組件模板可見且能使用。

須要注意的是，angular的模塊與js的模塊系統徹底不一樣且無關。不過在angular中它們是互補的。

另外，angular提供了一組JS模塊，能夠把它們看成庫模塊。

組件

組件負責控制屏幕一小塊區域，也能夠叫作視圖(view)。
組件主要控制頁面UI，建立一個angular組件須要從angular核心模塊(@angular/clore)中引入component修改器，而後用它來修飾一個JS類，這樣auglar就會知道這是一個組件。
簡單示例：

@Component({

selector : 'mycomponent',

template : '<h2>測試</h2>'，

directives : [ComponentDetails]

})

export class TestComponent{...}

@Component中的參數是這個組件的配置信息，好比:

• template 模板，通常是用反引號`括起來的字符串。
• templateUrl 模板的url，把一個文件看成該組件的模板。templateUrl與template並與本質區別，但顯然若是模板代碼較多應使用templateUrl。
• selector 選擇器，父組件使用該組件須要使用該選擇器的中線命名法(dash-case)，好比這個示例就是<my-component></my-component>。當頁面發現一個<my-component> 元素時，就會建立一個該組件TestComponent的實例，而後將其渲染到<my-component>標記處。
• directives組件用到的指令

元數據

好比@Component裝飾器就是經過給一個js類附加相應的元數據來讓angular知道它是一個組件。

數據綁定

MVVM框架的一大優勢。想象Jquery時代是如何手動push和pull數據的。若是有多種途徑能夠改變某個值，那麼數據的變更就會變得混亂且不方便跟蹤。
數據綁定有三個方向： 綁定到 DOM 、綁定自 DOM 以及雙向綁定（ to the DOM, from the DOM, or in both directions），具體有以下4種形式：

• {{person.age}}插值表達式;
• [name]屬性綁定;
• (click)事件綁定;
• [(ngModel)]雙向綁定。

Angular 在每一個 JavaScript 事件循環中處理全部的數據綁定，它會從組件樹的根部開始，遞歸處理所有子組件。
數據綁定也在父子組件的通信間起到做用。但若是同級組件、或者多個組件間須要共享數據的話，只使用數據綁定會把事情弄的複雜。這時候就須要使用狀態管理如ngrx和redux,在angular的官方示例中有專門的服務。
數據綁定被人稱做單向數據綁定(one-way data binding)，由於只能從組件的數據流動到目標的元素，而不能從目標元素流動到組件的數據中。一樣的，也不能用數據綁定來調用目標元素上的方法。

指令

嚴格來講組件就是一個指令， @Component裝飾器實際就是一個 @Directive裝飾器。
此外還有其餘兩種類型的指令：結構型指令(structural directives)和(屬性型指令(attribute directives)。
結構型指令一般在DOM中添加、移除和替換元素來修改佈局，如 *ngIf、 *ngFor。
屬性型指令修改一個現有元素的外觀或行爲。在模板中，它們看起來就像是標準的HTML屬性，故名。好比 ngModel實現了雙向綁定， Ngclass用於添加或者移除CSS類, NgStyle用於添加或移除一組CSS樣式。

服務

按照個人理解，服務是指將組件中的一些功能單獨抽離出來，以保持組件的精簡。
好比一個簡單的購物車組件Cart，固然能夠在其中定義大量的方法好比獲取商品的詳細信息的方法getDetail、判斷倉庫是否還有剩餘你選中的商品isRest、根據你購物車中的商品給出推薦的搭配match，甚至還有對比購物車中商品在不一樣店鋪中的價格等等各種功能。若是你想，你能夠爲一個購物車寫上十幾種方法，但如今這個組件就會顯得很複雜。若是把這個方法抽離成獨立的服務，好比商品信息獲取服務、推薦搭配服務、價格比對服務等，單獨寫到一個文件中，再導入到組件，這就會顯得比較簡潔。
angular推薦的做法:組件只提供用戶體驗，它介於視圖與應用邏輯之間，並把諸如寫日誌之類的任務委託給服務;服務自己不從服務器得到數據、不進行驗證輸入。
雖然這些要求不是強制性的，但顯然將任務委託給服務能讓代碼更容易看懂些。

依賴注入

能夠經過查看構造函數的參數類型得知須要哪些服務，好比如下示例類須要一個ServiceA服務：constructor(private service:ServiceA){} 當 Angular 建立組件時，會首先爲組件所需的服務請求一個注入器 (injector)。 注入器維護了一個服務實例的容器，存放着之前建立的實例。 若是所請求的服務實例不在容器中，注入器就會建立一個服務實例，而且添加到容器中，而後把這個服務返回給 Angular。 當全部請求的服務都被解析完並返回時，Angular 會以這些服務爲參數去調用組件的構造函數。 這就是依賴注入 。