摘要：為了簡單起見，在本文中將會使用。已經實例化了并且將它的模板載入到了元素中。中的依賴注入發生在該類的構造函數中，因此我們將在構造函數中注入。

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

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

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

因為我們是用TypeScript編寫我們的程序，所以我們先得在我們的工程中配置TypeScript，告訴編譯器如何產生JavaScript文件。關于配置文件中的其他屬性在這里我就不贅述了，我只介紹兩個最重要的屬性，一個是"target":"ES5"和"module":"system"。target屬性將設置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"
  ]
}

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

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

Angular2中對于我來說最神秘的一點就是“我該如何運行我的應用？”，第二神秘的一點就是“好吧，我該如何啟動我的應用程序？”

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

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

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

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

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

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

    Loading...

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

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

創建組建的第一件事就是先寫一個類（class）,我們先做聲明，一會再來改進它。

export class AppComponent {}

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

import {Component} from "angular2/core";

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

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

在這個示例中，我們還想增加為我們的組件增加路由功能，因此我們將會使用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";

我們需要路由模塊來開啟路由功能以及其他的組件作為路由的目標。接下來就需要向@RouterConfig中傳入一組路由的定義，來告訴應用程序路由的路徑、路由的名字和每個路由所對應的組件。我們為home路由的屬性useAsDefault設置為true，將其作為默認路由。

@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屬性中。以下是整個 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 組件之后，我們繼續編寫我們的 Home 組件。首先還是先定義一個 HomeComponent 類，同時在類中為組件的標題和內容定義兩個屬性。

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

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

import {Component} from "angular2/core";

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

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

然后我們將為我們的組件引用 StateService 并使用它來存儲狀態兩個路由之間的狀態。Angular2中的依賴注入發生在該類的構造函數中，因此我們將在構造函數中注入 StateService。Angular的每個組件都有有生命周期的鉤子（lifecycle hooks），我們可以按順序使用它們。在本組件中，我們想在組件初始化的時候從 StateService 中獲取和設置我們的信息。這時候我們需要使用ngOnInit鉤子。（有關于組件的生命周期的詳細內容可以參考官網教程（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);
  }
}

許多組件可能會需要訪問相同的一組數據，而我們并不想像傻瓜一樣的一遍又一遍的復制粘貼同樣的代碼。這個時候，服務（Service）出現了。我們需要創建一個單一的且可以重復使用的數據服務，并學會將該服務注入到我們需要的組件中去。

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

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

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

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

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

該服務中定義了_message屬性以及它的屬性獲取器(getter)和設置器(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;
  };
}

好了，現在服務模塊也寫好了，感覺我們的應用終于快完成了，最后也是最重要的一步，就是要描述應用的樣子了。

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

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

{{title}}

{{body}}

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

Update Message

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

以下是整個 home.component.html 的內容。

{{title}}

{{body}}




    
Home: {{message}}
    

      
      Update Message
    

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

在定義了路由組件的擺放位置之后，那么我們如何從一個路由到另一個路由呢？RouterLink 就是完成了路由的指向問題。

  



  Home
  About
  Experiments

整個 app.component.html 文件如下所示：

  

    
  

  

    Home
    About
    Experiments
  

  

  






  

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

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