因為之前簡單學習過vue，它和angular2的概念很多都是一樣的，所以學angular2也覺得容易上手。
首先安裝angular-cli

cnpm install -g angular-cli

安裝完成後開始建立自己的專案

ng new todolist
cd todolist
cnpm install
ng serve

專案架構就搭建好了，可以到 http://localhost:4200/ 檢視。
接下來我們來修改todolist/src/app目錄下的AppComponent這個元件。
首先開啟app.component.html，頁面初步結構如下：

<h1
 
>
  {{title}}
</h1>
<input type="text" [(ngModel)]="newItem" (keyup.enter)="addNew()">
<ul>
    <li *ngFor="let item of items" [class.isFinished]="item.isFinished" (click)="toggleFinish(item)">{{item.label}}</li>
</ul>

h1標籤直接綁定了title；
input標籤雙向綁定了newItem，並在按下回車鍵後執行addNew()，將newItem新增到items中；
li標籤使用*ngFor 遍歷items，顯示出item.label屬性，並通過item.isFinished是否為true選擇性的新增樣式；

結構確定好之後，開始修改app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my todolist';
  items = [{label:'apple',isFinished:false},{label:'orange'
 
,isFinished:false}];
  newItem = '';
  addNew = function(){
    this.items.push({label:this.newItem, isFinished:false});
    this.newItem = '';
  };
  toggleFinish = function (item) {
    item.isFinished = ! item.isFinished;
  }
}

給items賦一個初始值，定義addNew和toggleFinish這兩個函式。
這樣就完成了簡單的一個todolist。

實際在使用上和vue沒有太大差別。
vue的一個元件的template script style全部都在一個檔案中，而angular2則細分為多個檔案放在一個資料夾中。