AngularJS Binding

今天開始學習AngularJS
筆記一下所學的內容

AngularJS 官網的 Getting Started 寫得實在有些讓人不知所措
所以最後直接開始看 egghead.io 這個網站裡的教學影片

今天的筆記就是第一個影片的筆記

AngularJS Binding



首先，要使用 AngularJS 的話必須加上第六行的那個 script
接者在你要使用 AngularJS 的區塊裡加入 ng-app 這個屬性(如第九行 <div ng-app> 這樣)

AngularJS的變數要用兩個中括號夾住
像是第十行的 {{data.message + " world"}} 這樣
其中直接打的名稱就是變數的部分
而雙引號內的文字會直接當成字串顯示出來

同時這個雙括號內也可以打運算符號
比方說 {{3*3}}
在網頁上會直接顯示出 9

然後重點來了
要如何讓變數與我們所輸入的值 binding 在一起呢？
重點就在第11行的 ng-model="data.message"
在 input type="text" 這個 tag 裡面加入 ng-model 這個屬性
並給 ng-model 一個變數名稱就可以把使用者輸入的 text 與 AngularJS 的變數 binding 在一起了

這麼一來只要在輸入框裡面打字
第十行的 <h1> 裡面的文字都會隨之變換

另外這個範例也同時示範 AngularJS 可以透過使用者輸入的內容
來即時修改 tag 裡所套用的 class

第十二行 <div class="{{data.message}}">
就是想要用 AngularJS 的變數來修改 class
因此假使我們在輸入框裡面輸入 label
他就會即時的套用第五行指定的 stylesheet 裡的 label 這個 class 所設定的樣式

AngularJS 很有趣吧！
歡迎大家把程式碼複製下來玩一玩
一定會覺得很有趣的

其實今天看了兩個影片，而且看了很多次
不過現在要去誠品翻翻縫紉的書了
明天再把第二個影片的重點整理下來

不知道會不會寫得太冗長啊啊啊啊啊~
畢竟我本來好像就是一個囉嗦的婆婆媽媽
不過寫得詳細一點將來回來複習應該也比較快想起來
所以今天就寫到這囉~