Angular2入門教學(2) - 綁定與ngModel

雖然之前都省事錄影片，不過也來練習一下如何寫好一篇教學好了😃。
在進入Angular2之前，先來試試基本功能吧！

一、單向綁定

這個功能就是將.ts檔的變數內的資料呈現到.html頁面上
當.ts檔的變數改變時.html內容也會同步被改變
使用方法相當簡單，在.ts檔宣告變數並給值

name = "kai";
birthday = "11/21";  

之後我們再到html用{{}}包住.ts宣告的變數名稱

<div>
    姓名:{{name}}
</div>
<div>
    生日:{{birthday}}
</div>

存個檔，就可以看到.ts檔的變數的值呈現到網頁上了。

二、雙向綁定

當你想從html的<input>元件去改動.ts對應的變數，
反之更動.ts的變數html對應的值也會改變
這時候就要使用雙向綁定的功能
在<input>裡加入[(ngModel)]=".ts對應的變數名稱"

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

並且在根module.ts加入import { FormsModule } from '@angular/forms'
因為該功能在@angular/forms的FormsModule裡
另外還要在@NgModule裡的imports加入FormsModule才能正常運作

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms'

import { DemoComponent } from './index.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [DemoComponent],
  bootstrap: [DemoComponent]
})
export class AppModule { }

如此一來雙向綁定就完成了，是不是相當簡單呢？

初學時看教學文章，即使一個小步驟沒打，也容易會不知道怎麼往下做
故以下影片是一步一步做的，以補文章的不足