Angular2使用體驗

作者：AlloyTeam

網址：http://www.alloyteam.com/2015/07/angular2-shi-yong-ti-yan/

Angular2開發者預覽版出來已有一段時間，這個以速度與移動效能為目的的框架到底如何，今天我們來嘗試一下。

在官網有一段號稱5分鐘入門的教程：

quick start： https://angular.io/docs/js/latest/quickstart.html

Angular團隊在這個版本上所做的改變可以用激進來形容，我們可以看得到無論是在程式碼書寫亦或是結構組織上都有了非常大的差異，那麼，既然Angular1.x已經如此成熟了，那為何我們還需要Angular2這樣大的改變呢？

其實無論是Angular2還是ReactNative，他們都肩負了前端許多的願景，既然目前的前端環境調優已經基本達到巔峰，那麼從原生、另一門語言的角度去審視改良只是我們突破與超越的小小嘗試而已。

那麼Angular2與1.x對比在寫法與上手難度上到底有什麼區別呢？

下麵我將用Angular2來製作一個Todo示例應用：

在完成了初始化任務後，首先，確保我們的TypeScript編譯監控處於啟用狀態，以下陳述句是作為ts檔案修改編譯監控：

$ tsc –watch -m commonjs -t es5 –emitDecoratorMetadata app.ts

整理一下我們的思路，檔案結構應該是這樣的：

我們看到了熟悉的app.js檔案,這是以app.ts編譯過後的產物，app.ts:

///

import {Component, View, bootstrap, For, If} from “angular2/angular2”;

import {TodoStore} from ‘services/todo/TodoStore’;

@Component({

selector: ‘app’,

injectables: [TodoStore]//註入TodoStore

})

@View({

template: `

Todo

placeholder=”輸入TodoItem” autofocus #newtodo

(keyup)=”add($event,newtodo)”>

• (click)=”toggleTodoState(todo)”/>

  {{todo.text}}

  `,

  directives: [For, If]

  })

  class AppComponent {

  todoStore : TodoStore;

  constructor(todoStore: TodoStore) {

  this.todoStore = todoStore;

  }

  add($event,newtodo){

  if($event.which === 13){//判斷是否回車鍵

  this.todoStore.add(newtodo.value);

  newtodo.value = ”;

  }

  }

  toggleTodoState(todo){

  todo.done = !todo.done;//反轉done值

  }

  }

  bootstrap(AppComponent);

在當前版本中，Template關鍵字已經被替換為View關鍵字，檔案傳送門：https://angular.io/docs/js/latest/api/annotations/ViewAnnotation-class.html

inde.html（牆內使用者推薦將traceur-runtime.js/system.src.js/angular2.dev.js這幾個檔案儲存在本地，這樣可以不必忍受各種404，超時載入）: