摘要：引言是用于構(gòu)建基于瀏覽器的復(fù)雜應(yīng)用的下一代框架。它涵蓋了的一些基本概念，包括組件模型服務(wù)管道傳入傳出以及事件播散等使用方法，并介紹了項(xiàng)目的基本組織結(jié)構(gòu)等。用于雙向綁定，使用來定義，專門用于定義雙向綁定。

Angular2 是 Google 用于構(gòu)建基于瀏覽器的復(fù)雜應(yīng)用的下一代 MV* 框架。該項(xiàng)目是我學(xué)習(xí) Angular2 的入門項(xiàng)目，我覺得它很友好地表達(dá)了 Angular2 的有趣實(shí)現(xiàn)方式，并更易于了解和入門。它涵蓋了 Angular2 的一些基本概念，包括：組件（Component）、模型（Model）、服務(wù)（Service）、管道（Pipe）、傳入傳出（Input / Output）以及事件播散（EventEmitter）等使用方法，并介紹了項(xiàng)目的基本組織結(jié)構(gòu)等。

Anguar2 可使用 ES6 或 TypeScript 來編寫，我在這里使用了 TypeScript。

若您對本文感興趣，也非常歡迎來我的 GitHub 主頁閱讀，同時(shí)也是本文的項(xiàng)目代碼地址（https://github.com/DotHide/angular2-quickstart）

以下羅列的是該項(xiàng)目中的幾個(gè)重要概念：

在 Angular2 中，Component 是我們在頁面中構(gòu)建自定義元素和業(yè)務(wù)邏輯的主要方式。在 Angular1 中，我們則是通過 directives，controllers 以及 scope 來實(shí)現(xiàn)，而現(xiàn)在所有的這一切都結(jié)合到了 Component 中。Component 中需要定義 selector 和 templete，即組件生效的標(biāo)記和對應(yīng)的 HTML 模板

// Component 是 Angular2 提供的組件，使用前需要先 import
import {Component} from "angular2/core";

@Component({
  selector: "todo-input",
  template: `
  

    

    
    
  
  `
})

其中 templete 使用到了多行模板的用法，即使用`作為模板開始結(jié)束標(biāo)記

定義組件后需要定義相匹配的類：

export class TodoInput {
  
}

類名使用 UpperCamelCase，如：TodoInput，文件名及 selector 使用 DashCase，如：todo-input(.ts)

任何 Component 在使用前需要 import，如果是組件中的組件需要在 @Component 中定義 directives，如：

@Component({
  selector: "todo-app",
  directives: [TodoInput],
  templete: "..."
})

模型比較簡單，通知只需要定義好構(gòu)造函數(shù)及相關(guān)方法即可：

export class TodoModel{
  constructor(
     public title:string = "",
     public status:string = "started"
  ){}

  toggle():void{
     this.status = this.status == 
       "completed"? "started": "completed";
  }
}

這里構(gòu)造函數(shù)的參數(shù)定義了 public，這樣可以被其他類訪問到

服務(wù)通常需要聲明 @Injectable()，一般服務(wù)也會(huì) import 模型類

import {Injectable} from "angular2/core";
import {TodoModel} from "../models/todo-model";

@Injectable()
export class TodoService {
  todos:TodoModel[] = [
    new TodoModel("arm"),
    new TodoModel("battle"),
    new TodoModel("code", "completed"),
    new TodoModel("eat"),
    new TodoModel("fly"),
    new TodoModel("sleep", "completed")
  ];

  addTodoItem(item:TodoModel) {
    ...
  }

  toggleTodo(todo: TodoModel) {
    ...
  }
}

聲明了 Injectable 之后，需要在入口函數(shù)中 inject 相關(guān)服務(wù)

bootstrap(TodoApp, [TodoService]);

即 Angular 1 中的 ng-repeat，這里用法有些差異，如：

  

    {{ todo }}
  

使用 ngFor 時(shí)需要在前加 號(hào)（ 號(hào)表示該動(dòng)作將引起模板的變化），循環(huán)中的個(gè)體元素引用前需要添加 # 號(hào)，這些都是語法上的變化。

ngModel 用于雙向綁定，使用 [(ngModel)]= 來定義，[()] 專門用于定義雙向綁定。

@Component({
  selector: "todo-input",
  template: `
  

    

    
    
  
  `
})

export class TodoInput {
  todoItem:TodoModel = new TodoModel();
  constructor() {}
}

使用 ngModel 前需要在 class 中定義變量，變量可以是任何類型。

利用 Pipe 來篩選（filter）數(shù)據(jù)，與 Angualr1 十分類似，這里還是使用 | 符號(hào)來定義篩選，如：

// todo-list.ts
...
@Component({
  selector: "todo-list",
  pipes: [SearchPipe],
  directives: [TodoItemRender],
  template: `

    

      

      
      
      
    
  
`
})

// search-pipe.ts
...
@Pipe({
  name: "search"
})

export class SearchPipe {
  transform(items) {
    // 定義轉(zhuǎn)換邏輯，用于結(jié)果輸出，這里是篩選出以 s 字符開頭的項(xiàng)目
    return value.filter((item) => {
      return item.title.startsWith("s");
    });
  }
}

使用 Pipe 時(shí)需要先在 Component 中定義 pipes 屬性，然后在 html 中使用 Pipe 的 name。

當(dāng)然，這里的 Pipe 還可以傳遞參數(shù)，仍然以上面的為例，可以傳參設(shè)定 search 的內(nèi)容，如：

// search-pipe.ts
...
@Pipe({
  name: "search"
})

export class SearchPipe {
  // 增加 term 參數(shù)
  transform(items, [term]) {
    // 定義轉(zhuǎn)換邏輯，用于結(jié)果輸出，這里是篩選出以 s 字符開頭的項(xiàng)目
    return value.filter((item) => {
      return item.title.startsWith(term);
    });
  }
}

這里分兩步修改，首先修改 SearchPipe 類中的方法，增加 term 參數(shù)，然后再修改使用處的代碼

// todo-list.ts
...
@Component({
  selector: "todo-list",
  pipes: [SearchPipe],
  directives: [TodoItemRender],
  template: `

    

      

      
      
      
    
  
`
})

這里我們先看到 search 進(jìn)行了賦值，我們進(jìn)一步把這個(gè)賦值變?yōu)橐粋€(gè)輸入項(xiàng)（@Input），這也是 Angular2 中特殊用法：

// todo-list.ts
import {Component, Input} from "angular2/core";
...
@Component({
  selector: "todo-list",
  pipes: [SearchPipe],
  directives: [TodoItemRender],
  template: `

    

      

      
      
      
    
  
`
})

export class TodoList {
  @Input() term; // 定義該項(xiàng)是從外部輸入的
  constructor(public todoService: TodoService) {
     
  }
}

由此，需要在使用 TodoList 組件的地方（即外部），定義相關(guān)的屬性。

...

這里表示從搜索框輸入過來的值（前一個(gè) term），被賦值到了 todo-list 的 [term] 屬性中，并傳遞到 TodoList 類的輸入項(xiàng)中去

事件散播，又一個(gè) Angular2 的新特性，用于將組件內(nèi)部的事件向上散播，如：

@Component({
  selector: "todo-item-render",
  template: `
  
  {{ todo.title }}
  Toggle
  `
})
export class TodoItemRender {
  @Input() todo;
  @Output() toggle = new EventEmitter();
}

這里的 toggle 是 EventEmitter 對象，被聲明為 Output 后，可以將按鈕的 click 事件向上散播成為 todo-list 中該組件的 toggle 事件，其中的 $event 就是 TodoItemRender 類中聲明的 todo（此 todo 又是來自外部輸入），而后再觸發(fā) toggle 事件對應(yīng)的業(yè)務(wù)邏輯。

請按以下步驟打開項(xiàng)目：

# 安裝 TypeScript
$ npm install -g tsd typescript

# 安裝項(xiàng)目依賴
$ npm install

# 啟動(dòng)項(xiàng)目
$ npm start

琢磨調(diào)用第三方庫花了些時(shí)間，這里也記錄一下。以添加 lodash 庫為例，需要經(jīng)過如下5個(gè)步驟：

$ npm install lodash --save

安裝后到 package.json 文件中查看，如有 loash 再進(jìn)入下一步

$ tsd install lodash

如果沒有 tsd 命令行工具，則先安裝 $ npm install -g tsd

在 index.html 文件中引用：

在 System.config() 中添加 path：

System.config({
  paths: {
    lodash: "./node_modules/lodash/lodash.js"
  }
});

在需要使用的地方 import：

import * as _ from "lodash";

...

function (){
   _.sum([4, 2, 8, 6]); // → 20
}

Angular 2 5mins Quickstart

Angular 2 Fundaments