摘要：為了簡單起見，在本文中將會使用。已經(jīng)實(shí)例化了并且將它的模板載入到了元素中。中的依賴注入發(fā)生在該類的構(gòu)造函數(shù)中，因此我們將在構(gòu)造函數(shù)中注入。

國內(nèi) Angular2 資料比較少，這里看到一篇不錯(cuò)的入門文章就分享過來了 —— Angular 2 快速上手，這里面還有很多有關(guān)于 Angular2 的文章，感興趣的朋友可以去看一看

目前angular2已經(jīng)來到了beta版，這意味著它已經(jīng)做好了開發(fā)出穩(wěn)定應(yīng)用的準(zhǔn)備了。和angular1.x相比，它發(fā)生了許多顛覆性的變化，angular2的官方網(wǎng)站上，有一個(gè)5分鐘快速開始教程(angular.io)，有興趣的朋友可以去開一下，幫助你快速的了解angular2。在本文中，我將會通過制作一個(gè)簡單的小網(wǎng)站，來為大家展示angular2的新特性，帶領(lǐng)大家走入angular2的全新世界。

現(xiàn)在有兩種主要的方法配置angular2的應(yīng)用程序，一個(gè)是通過systemjs，而另一個(gè)則是webpack。為了簡單起見，在本文中將會使用systemjs。
你可以使用ES5、EcmaScript 2015 或者 TypeScript來開發(fā)你的angular2應(yīng)用，angular2的團(tuán)隊(duì)的推薦是使用TypeScript開發(fā)。在使用TypeScript之前，需要完成一些配置工作，雖然你會感覺到有些繁瑣，但是用起來你還是會感到得心應(yīng)手的，你的代碼也將會更加清晰明了。
我們先借用在angular2官網(wǎng)的教程中使用的工程 Tour of Heroes 來開始我們的征程。
你可以通過git下載這個(gè)工程，當(dāng)你下載下來之后，第一件事應(yīng)該是用npm i命令來初始化項(xiàng)目。

因?yàn)槲覀兪怯肨ypeScript編寫我們的程序，所以我們先得在我們的工程中配置TypeScript，告訴編譯器如何產(chǎn)生JavaScript文件。關(guān)于配置文件中的其他屬性在這里我就不贅述了，我只介紹兩個(gè)最重要的屬性，一個(gè)是"target":"ES5"和"module":"system"。target屬性將設(shè)置TypeScript編譯出來的ECMAScript版本為
ES5，"module":"system"以為著我們想用
system的格式來生成我們的模塊。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}

我們已經(jīng)定義了該如何編譯TypeScript文件，接下來我們需要在工程的 package.json 文件中添加一些選項(xiàng)。

"scripts": {
   "tsc": "tsc",
   "tsc:w": "tsc -w",
   "lite": "lite-server",
   "start": "concurrent "npm run tsc:w" "npm run lite" "
 }

Angular2中對于我來說最神秘的一點(diǎn)就是“我該如何運(yùn)行我的應(yīng)用？”，第二神秘的一點(diǎn)就是“好吧，我該如何啟動我的應(yīng)用程序？”

啟動我們的應(yīng)用的第一件事就是在工程的index.html文件中引用必要的資源。除了angular的資源的之外，最重要的一環(huán)就是system.src.js，用它來作我們的模塊加載器。

我們打算通過使用systemjs來輸入我們的啟動模塊。

在boot.ts文件中，我們輸入了3格組件：bootstrap、ROUTER_PROVIDERS和AppComponent。然后實(shí)例化了我們的應(yīng)用并指明了我們的根組件，AppComponent并注入了ROUTER_PROVIDERS作為一個(gè)子模塊。

import {bootstrap} from "angular2/platform/browser";
import {ROUTER_PROVIDERS} from "angular2/router";
import {AppComponent} from "./app.component";

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

回到之前的index.html文件中，Loading...這一行就是我們應(yīng)用的入口標(biāo)記。Angular已經(jīng)實(shí)例化了AppComponent并且將它的模板載入到了app元素中。

    Loading...

在講解了如何編譯、配置和啟動一個(gè)angular2的應(yīng)用程序之后。讓我們看一看angular2中組件的組成部分，以便我們能更好的理解AppComponent和app之間的聯(lián)系。

Angular中的組件是angular中最基本的概念之一。一個(gè)組件控制一個(gè)視圖（View）――一片為用戶展示信息和響應(yīng)用戶反饋的網(wǎng)頁。一般來說，一個(gè)組件就是一個(gè)用于控制視圖模板的JavaScript類。
引用（有關(guān)于組件的更多內(nèi)容，你可以去閱讀我的《CIDER:創(chuàng)建一個(gè)Angular2組件》，你將會了解到如何創(chuàng)建和使用你的組件）

創(chuàng)建組建的第一件事就是先寫一個(gè)類（class）,我們先做聲明，一會再來改進(jìn)它。

export class AppComponent {}

接下來，我們應(yīng)該輸入我們的依賴模塊。在本例中，我們僅需要從angular2/core中輸入Component。

import {Component} from "angular2/core";

之后，我們需要裝飾(decorate)我們的類。通過添加@Component的元數(shù)據(jù)來告訴我們的應(yīng)用程序，我們想要一個(gè)怎么樣的AppComponent。我們將使用selector屬性為我們的組件取一個(gè)HTML元素的名字，這樣就可以通過定義好的HTML元素的名字來使用組件了。同時(shí)還需要通過templateUrl和styleUrls為組件設(shè)置模板和樣式。最后，我們將ROUTER_DIRECTIVES這個(gè)指令通過directives屬性注入到組件中去。

@Component({
  selector: "app",
  templateUrl: "app/app.component.html",
  styleUrls: ["app/app.component.css"],
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {}

在這個(gè)示例中，我們還想增加為我們的組件增加路由功能，因此我們將會使用RouterConfig模塊，并用@RouterConfig來裝飾我們的組件。為了能夠路由，我們需要在文件中的最頂部輸入RouterConfig、ROUTER_DIRECTIVES、AboutComponent、ExperimentsComponent和HomeComponent。

import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
import {AboutComponent} from "./about/about.component";
import {ExperimentsComponent} from "./experiments/experiments.component";
import {HomeComponent} from "./home/home.component";

我們需要路由模塊來開啟路由功能以及其他的組件作為路由的目標(biāo)。接下來就需要向@RouterConfig中傳入一組路由的定義，來告訴應(yīng)用程序路由的路徑、路由的名字和每個(gè)路由所對應(yīng)的組件。我們?yōu)?b>home路由的屬性useAsDefault設(shè)置為true，將其作為默認(rèn)路由。

@RouteConfig([
  {path: "/home",        name: "Home",        component: HomeComponent, useAsDefault: true },
  {path: "/about",       name: "About",       component: AboutComponent },
  {path: "/experiments", name: "Experiments", component: ExperimentsComponent }
])

然后，我們將StateService和ExperimentService輸入到我們的組件中并放入component修飾符的providers屬性中。以下是整個(gè) AppComponent 的代碼。

import {Component} from "angular2/core";
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
import {AboutComponent} from "./about/about.component";
import {ExperimentsComponent} from "./experiments/experiments.component";
import {HomeComponent} from "./home/home.component";
import {StateService} from "./common/state.service";
import {ExperimentsService} from "./common/experiments.service";

@Component({
  selector: "app",
  templateUrl: "app/app.component.html",
  styleUrls: ["app/app.component.css"],
  directives: [ROUTER_DIRECTIVES],
  providers: [StateService, ExperimentsService],
})
@RouteConfig([
  {path: "/home",        name: "Home",        component: HomeComponent, useAsDefault: true },
  {path: "/about",       name: "About",       component: AboutComponent },
  {path: "/experiments", name: "Experiments", component: ExperimentsComponent }
])
export class AppComponent {}

在完成 App 組件之后，我們繼續(xù)編寫我們的 Home 組件。首先還是先定義一個(gè) HomeComponent 類，同時(shí)在類中為組件的標(biāo)題和內(nèi)容定義兩個(gè)屬性。

export class HomeComponent {
  title: string = "Home Page";
  body:  string = "This is the about home body";
}

然后輸入合適的依賴模塊。

import {Component} from "angular2/core";

之后裝飾我們的類并設(shè)置selector和templateUrl屬性。

@Component({
    selector: "home",
    templateUrl: "app/home/home.component.html"
})

然后我們將為我們的組件引用 StateService 并使用它來存儲狀態(tài)兩個(gè)路由之間的狀態(tài)。Angular2中的依賴注入發(fā)生在該類的構(gòu)造函數(shù)中，因此我們將在構(gòu)造函數(shù)中注入 StateService。Angular的每個(gè)組件都有有生命周期的鉤子（lifecycle hooks），我們可以按順序使用它們。在本組件中，我們想在組件初始化的時(shí)候從 StateService 中獲取和設(shè)置我們的信息。這時(shí)候我們需要使用ngOnInit鉤子。（有關(guān)于組件的生命周期的詳細(xì)內(nèi)容可以參考官網(wǎng)教程（https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html））

import {Component} from "angular2/core";
import {StateService} from "../common/state.service";

export class HomeComponent {
  title: string = "Home Page";
  body:  string = "This is the about home body";
  message: string;

constructor(private _StateService: StateService) { }

ngOnInit() {
    this.message = this._StateService.getMessage();
  }

updateMessage(m: string): void {
    this._StateService.setMessage(m);
  }
}

許多組件可能會需要訪問相同的一組數(shù)據(jù)，而我們并不想像傻瓜一樣的一遍又一遍的復(fù)制粘貼同樣的代碼。這個(gè)時(shí)候，服務(wù)（Service）出現(xiàn)了。我們需要?jiǎng)?chuàng)建一個(gè)單一的且可以重復(fù)使用的數(shù)據(jù)服務(wù)，并學(xué)會將該服務(wù)注入到我們需要的組件中去。

將數(shù)據(jù)的存取重新包裝成一個(gè)獨(dú)立的服務(wù)讓組件的重心傾向于對視圖的支持。它能讓組件的單元測試變得更加容易。

在上面的組件中，我們經(jīng)常見到一個(gè)叫StateService的東西，它到底是什么呢？沒錯(cuò)，它就是一個(gè)服務(wù)，接下來，讓我們一步一步的創(chuàng)建它。首先我們需要聲明一個(gè)叫 StateService 的類并將它暴露給我們的應(yīng)用程序。

export class StateService {
  private _message = "Hello Message";

getMessage(): string {
    return this._message;
  };

setMessage(newMessage: string): void {
    this._message = newMessage;
  };
}

該服務(wù)中定義了_message屬性以及它的屬性獲取器(getter)和設(shè)置器(setter)。我們要想使StateService能夠注入到其他組件中去，首先需要在我們的類中輸入Injectable，并用@Injectable修飾我們的類。

import {Injectable} from "angular2/core";
@Injectable()
export class StateService {
  private _message = "Hello Message";

getMessage(): string {
    return this._message;
  };

setMessage(newMessage: string): void {
    this._message = newMessage;
  };
}

好了，現(xiàn)在服務(wù)模塊也寫好了，感覺我們的應(yīng)用終于快完成了，最后也是最重要的一步，就是要描述應(yīng)用的樣子了。

我將通過home.component.html作為切入點(diǎn)來簡單介紹一下 Angular2 中的升級版模板語法（template syntax）。

單向數(shù)據(jù)綁定與 Angular1.x 中的形式是一樣的，就是通過字符串插入。

{{title}}

{{body}}

用戶輸入事件不再通過在我們的HTML標(biāo)簽中使用自定義的Angular指令來捕獲，而是通過在插入語句中封裝原生的DOM事件來捕獲它們。我們可以在下面代碼中看到，我通過(click)="updateMessage(message)"來為元素注冊 click 事件，當(dāng)事件觸發(fā)時(shí)調(diào)用 updateMessage 方法。

Update Message

Angular2中的雙向數(shù)據(jù)綁定基于單向數(shù)據(jù)綁定。之前我們看到單向數(shù)據(jù)綁定中使用了字符串插入的方法，其實(shí)在我們綁定一個(gè)元素的屬性時(shí)，可以使用方括號語法。我們將屬性綁定（組件到視圖）和事件綁定（視圖到組件）的方法組合起來就是雙向數(shù)據(jù)綁定了。是不是很神奇？雙向數(shù)據(jù)綁定的方法很簡單，就是在 ngModel 用方括號和圓括號包起來變成[(ngModel)]=”message。

以下是整個(gè) home.component.html 的內(nèi)容。

{{title}}

{{body}}




    
Home: {{message}}
    

      
      Update Message
    

接下來，我們需要回到 app.component.html 中，來探討一下如何在模板語法中加入路由鏈接。在我們定義一個(gè)路由的時(shí)候，每個(gè)組件都有它對應(yīng)的模板，那么問題來了，當(dāng)路由到一個(gè)組件的時(shí)候，這個(gè)模板應(yīng)該被放在哪里呢？這個(gè)時(shí)候，router-outlet出現(xiàn)了，它告訴應(yīng)用程序路由中組件的擺放位置。

在定義了路由組件的擺放位置之后，那么我們?nèi)绾螐囊粋€(gè)路由到另一個(gè)路由呢？RouterLink 就是完成了路由的指向問題。

  



  Home
  About
  Experiments

整個(gè) app.component.html 文件如下所示：

  

    
  

  

    Home
    About
    Experiments
  

  

  






  

到此為止，我們的網(wǎng)頁算是完成了，在你拿出去炫耀之前，讓我們回顧一下我們的制作過程：

1、我們配置了tsconfig.json文件來說明TypeScript該如何編譯。
2、我們學(xué)習(xí)了如何簡單的使用systemjs來處理模塊的載入并引導(dǎo)我們應(yīng)用程序的啟動。
3、我們了解了該如何創(chuàng)建 AppComponent 和 HomeComponent。
4、我們學(xué)習(xí)了如何使用 @Injectable() 創(chuàng)建一個(gè)可注入的服務(wù)。
5、我們稍微了解了一下Angular2中的綁定語法。
6、我們學(xué)習(xí)了如何用 router-outlet 在視圖中定義路由組件存放的位置，并使用 routerLink 進(jìn)行路由之間的跳轉(zhuǎn)。