Angular2初學筆記之 做一個todolist
阿新 • • 發佈:2018-11-04
因為之前簡單學習過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則細分為多個檔案放在一個資料夾中。