angular2自學筆記（二）---路由、服務等八大主要構造塊

angular的思想：老是把數據訪問工做委託給一個支持性服務類。

Angular 應用的：用 Angular 擴展語法編寫 HTML 模板， 用組件類管理這些模板，用服務添加應用邏輯， 用模塊打包發佈組件與服務。

咱們經過引導根模塊來啓動該應用。 Angular 在瀏覽器中接管、展示應用的內容，並根據咱們提供的操做指令響應用戶的交互。

angular2的八大主要構造塊：
模塊 (module)
組件 (component)
模板 (template)
元數據 (metadata)
數據綁定 (data binding)
指令 (directive)
服務 (service)
依賴注入 (dependency injection)

一。模塊
Angular 應用是模塊化的，而且 Angular 有本身的模塊系統，它被稱爲 Angular 模塊或 NgModules。
每一個 Angular 應用至少有一個模塊（根模塊），習慣上命名爲AppModule。
根模塊在一些小型應用中多是惟一的模塊，大多數應用會有不少特性模塊，每一個模塊都是一個內聚的代碼塊專一於某個應用領域、工做流或緊密相關的功能。
Angular 模塊（不管是根模塊仍是特性模塊）都是一個帶有@NgModule裝飾器的類。
裝飾器是用來修飾 JavaScript 類的函數。 Angular 有不少裝飾器，它們負責把元數據附加到類上，以瞭解那些類的設計意圖以及它們應如何工做。


NgModule是一個裝飾器函數，它接收一個用來描述模塊屬性的元數據對象。其中最重要的屬性是：

官網解釋：
imports - 本模塊聲明的組件模板須要的類所在的其它模塊。
declarations - 聲明本模塊中擁有的視圖類。 Angular 有三種視圖類：組件、指令和管道。
exports - declarations 的子集，可用於其它模塊的組件模板。
providers - 服務的建立者，並加入到全局服務列表中，可用於應用任何部分。
bootstrap - 指定應用的主視圖（稱爲根組件），它是全部其它視圖的宿主。只有根模塊才能設置bootstrap屬性。

理解：
imports：導入其餘模塊，就是要使用其餘模塊的功能，必需要導入。
declarations：聲明，聲明本模塊包含的內容。可能有些同窗會遇到，定義了一個指令，在component中使用卻老是沒有生效的問題，首先咱們要檢查的就是是否進行了聲明。
exports：外部可見的內容。至關於.net中聲明爲public的那些類。
providers：服務提供者，主要用來定義服務。估計ng2框架會自動將註冊的服務體檢到依賴注入實例中，目前測試也是如此。
bootstrap：啓動模塊。只在根模塊使用。在除了根模塊之外的其餘模塊不能使用。


eg：

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

AppComponent的export語句只是用於演示如何導出的，它在這個例子中並非必須的。根模塊不須要導出任何東西，由於其它組件不須要導入根模塊。


Angular 模塊 vs. JavaScript 模塊
JavaScript 也有本身的模塊系統，用來管理一組 JavaScript 對象。 它與 Angular 的模塊系統徹底不一樣且徹底無關。
JavaScript 中，每一個文件是一個模塊，文件中定義的全部對象都從屬於那個模塊。 經過export關鍵字，模塊能夠把它的某些對象聲明爲公共的。 其它 JavaScript 模塊可使用import 語句來訪問這些公共對象。

引入：import {javascript模塊名} from '文件相對路徑'；  
        使用裝飾器以前須要從angular2的庫中引入裝飾器組件    import  {Component} from '@angular/core';
        從angular中導入angular模塊： import {BrowserModule} from '@angular/platform-browser';

        兩個系統比較容易混淆，共享相同的詞彙 「imports」 和 「exports」。

定義：export class 模塊名 { javascript代碼塊 }


二.組件
組件負責控制屏幕上的一小塊區域，咱們稱之爲視圖。

**組件在類中定義組件的應用邏輯，爲視圖提供支持。 組件經過一些由屬性和方法組成的 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; }
}

生命週期鉤子：當用戶在這個應用中漫遊時，Angular會建立、更新和銷燬組件。在組件生命週期的各個時間點上插入本身的操做，例如上面聲明的ngOnInit()。生命鉤子也須要提早引入import { OnInit } from '@angular/core';


 三.模板

     模板中能夠任意使用自定義組件和原生HTML、模板語法（*ngFor、{{hero.name}}、(click)、[hero]）；



四.元數據：元數據告訴 Angular 如何處理一個類

上邊的組件HeroListComponent其實就是一個類，想要把類變爲組件，須要把元數據添加到這個類，在TypeScript 中，咱們用裝飾器 (decorator) 來附加元數據。

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

@Component裝飾器能接受一個配置對象， Angular 會基於這些信息建立和展現組件及其視圖。

 @Component的配置項包括：
    moduleId: 爲與模塊相關的 URL（例如templateUrl）提供基地址。
    selector： CSS 選擇器，它告訴 Angular 在父級 HTML 中查找<hero-list>標籤，建立並插入該組件。 例如，若是應用的 HTML 包含<hero-list></hero-list>， Angular 就會把HeroListComponent的一個實例插入到這個標籤中。
    templateUrl：組件 HTML 模板的模塊相對地址，如前所示。
    providers：組件所需服務的依賴注入提供商數組，Angular：該組件的構造函數須要一個HeroService服務，這樣組件就能夠從服務中得到英雄數據。

@Component裏面的元數據會告訴 Angular 從哪裏獲取你爲組件指定的主要的構建塊。模板、元數據和組件共同描繪出這個視圖。
其它元數據裝飾器用相似的方式來指導 Angular 的行爲。 例如@Injectable、@Input和@Output等是一些最經常使用的裝飾器。這種架構處理方式是：你向代碼中添加元數據，以便 Angular 知道該怎麼作。


五.數據綁定

    數據綁定的語法有四種形式。
    綁定到DOM：  [prototype]="value";    (even)="handle"    
    綁定到DOM：  {{vlue}}
    雙向綁定：   [(ng-module)]="property";

    eg:
    {{hero.name}}插值表達式在<li>標籤中顯示組件的hero.name屬性的值。
    [hero]屬性綁定把父組件HeroListComponent的selectedHero的值傳到子組件HeroDetailComponent的hero屬性中。
    (click) 事件綁定在用戶點擊英雄的名字時調用組件的selectHero方法。
    <input [(ngModel)]="hero.name"> 雙向數據綁定：數據屬性值經過屬性綁定從組件流到輸入框。用戶的修改經過事件綁定流回組件，把屬性值設置爲最新的值

    Angular 在每一個 JavaScript 事件循環中處理全部的數據綁定，它會從組件樹的根部開始，遞歸處理所有子組件。


六.指令：Angular 模板是動態的。當 Angular 渲染它們時，它會根據指令提供的操做對 DOM 進行轉換。

指令和模板的區別：
指令是一個帶有「指令元數據」的類。在 TypeScript 中，要經過@Directive裝飾器把元數據附加到類上。組件是一個帶模板的指令；@Component裝飾器實際上就是一個@Directive裝飾器，只是擴展了一些面向模板的特性。

還有兩種其它類型的指令：結構型指令和屬性 (attribute) 型指令。
        1.結構型指令：經過在 DOM 中添加、移除和替換元素來修改佈局。
            <li *ngFor="let hero of heroes"></li>
            <hero-detail *ngIf="selectedHero"></hero-detail>

        2.屬性型指令：修改一個現有元素的外觀或行爲。 在模板中，它們看起來就像是標準的 HTML 屬性。
            ngModel指令就是屬性型指令的一個例子，它實現了雙向數據綁定。 ngModel修改現有元素（通常是<input>）的行爲：設置其顯示屬性值，並響應 change 事件。
            <input [(ngModel)]="hero.name">

        3.自定義指令：如上面的HeroListComponent就是一個自定義指令


七.服務：

    一個把記錄到console.log的服務類示例：

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

經過向後臺傳遞數據並經過一個已接收的promise返回數據：

export class HeroService {
          private heroes: Hero[] = [];

          constructor(
            private backend: BackendService,
            private logger: Logger) { }

          getHeroes() {
            this.backend.getAll(Hero).then( (heroes: Hero[]) => {
              this.logger.log(`Fetched ${heroes.length} heroes.`);
              this.heroes.push(...heroes); // fill cache
            });
            return this.heroes;
          }
        }

服務的getHeroes()和addHero()方法返回一個英雄數據的可觀察對象Observable這些數據是由AngularHttp從服務器上獲取的。咱們能夠把可觀察對象Observable看作一個由某些「源」發佈的事件流。 經過訂閱到可觀察對象Observable，咱們監聽這個流中的事件。 在這些訂閱中，咱們指定了當 Web 請求生成了一個成功事件（有效載荷是英雄數據） 或失敗事件（有效載荷是錯誤對象）時該如何採起行動。

    組件自己不從服務器得到數據、不進行驗證輸入，也不直接往控制檯寫日誌。 它們把這些任務委託給服務。
    組件的任務就是提供用戶體驗。它介於視圖（由模板渲染）和應用邏輯（一般包括模型的某些概念）之間。設計良好的組件爲數據綁定提供屬性和方法，把其它雜事都委託給服務。把應用邏輯拆分到服務，並經過依賴注入來在組件中使用這些服務。

八.依賴注入：
    「依賴注入」是提供類的新實例的一種方式，還負責處理好類所需的所有依賴。大多數依賴都是服務。Angular使用依賴注入來提供新組件以及組件所需的服務。
    Angular 經過查看構造函數的參數類型得知組件須要哪些服務。 例如，HeroListComponent組件的構造函數須要一個HeroService服務：
        constructor(private service: HeroService) { }
    當 Angular 建立組件時，會首先爲組件所需的服務請求一個注入器 (injector)。

    依賴注入的流程：
        注入器維護了一個服務實例的容器，存放着之前建立的實例。若是所請求的服務實例不在容器中，注入器就會建立一個服務實例，而且添加到容器中，而後把這個服務返回給Angular。當全部請求的服務都被解析完並返回時，Angular會以這些服務爲參數去調用組件的構造函數。

    在要求注入HeroService以前，在注入器中註冊HeroService的提供商 Provider。 提供商用於建立並返回一個服務，一般是服務類自己。
咱們能夠在模塊或組件中註冊提供商。一般會把提供商添加到根模塊上，以便在任何地方使用服務的同一個實例。

providers: [
          BackendService,
          HeroService,
          Logger
        ],

也能夠在@Component元數據中的providers屬性中把它註冊在組件層，表示該組件的每個新實例都會有一個服務的新實例。

@Component({
          moduleId: module.id,
          selector:    'hero-list',
          templateUrl: 'hero-list.component.html',
          providers:  [ HeroService ]
        })

須要記住的關於依賴注入的要點是：
        依賴注入滲透在整個 Angular 框架中，被處處使用。
        注入器 (injector) 是本機制的核心。
        注入器負責維護一個容器，用於存放它建立過的服務實例。
        注入器能使用提供商建立一個新的服務實例。
        提供商是一個用於建立服務的配方。
        把提供商註冊到注入器。