1. 程式人生 > >Angular2初學筆記之 做一個todolist

Angular2初學筆記之 做一個todolist

因為之前簡單學習過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則細分為多個檔案放在一個資料夾中。