IT工程師數位筆記本

前言

上一節我們已經把環境給搭建起來了，現在我們通過一個快速案例把angular 2.0 初步了解一下，后續我們會深入每一個細節，這個案例主要是一個【英雄（Hero）】列表的展示，創建，編輯。這個案例我打算分五個章節來做,第一個章節我們可以學習到angular2.0一下內容：

• 單項數據綁定
• 雙向數據綁定

組織代碼

1.在app.component.ts 文件添加 如下內容

在 AppComponent下添加兩個屬性

export class AppComponent{
    public title: string = '英雄展示';
    public hero: string = '英雄';
}

在@component 下 template 屬性下更改我們的模板,我們用了typescript 的多行字符串

template: `<h1>{{title}}</h1><h2>{{hero}} 詳情</h2>`  //用了typescrip 多行字符串 ，要注意

這時候我們瀏覽會看到已經綁定上我們的數據。

2.創建單獨的類實現綁定（單項數據綁定）

目前我們的 英雄 只有一個屬性，我們直接在 類 AppComponent 無妨，但當我們屬性慢慢增多的時候，我們可以從一個字面字符串轉換成一個類。
在app.component.ts 文件添加如下內容

export class Hero{
    id:number;
    name:string;
}

這時候我們的hero 屬性就可以修改成

 hero:Hero = {
        id:1,
        name:'成龍'
}

模板文件修改成

template: `<h1>{{title}}</h1><h2>{{hero.name}} 詳情</h2>`

為了顯是更多的屬性，我們來修改下模板，添加幾個標簽

<h2>{{hero.name}}詳情!</h2>
<div><label>id:</label>{{hero.id}}</div>
<div>
    <label>name:</label>
    <input type="text"  value="{{hero.name}}" placeholder="name" />
</div>

hero 的名字我們用了一個文本框，但是我們修改文本的時候沒有看到 h2 標簽的修改，難道我們寫錯了，不是，原來跟angular1.0 不一樣，這不是雙向數據綁定，而是單項數據綁定

3. 雙向數據綁定

angular 的雙向數據綁定是什么樣子的呢，接下來我們會用到 angular 的內置指令 ngModel
我們只需修改我們的模板文件

<input type="text" [(ngModel)]="hero.name" placeholder="name" />

用上angular的內置指令，就實現了我們雙向數據綁定。

結束語

到這里我們已經實現了簡單的數據綁定，下一章節我么會做列表，先上一張效果圖。

源碼最后我會上傳github，如有需要請私聊我。