簡話Angular 01 初識Angular 數據綁定

１.　Angular有哪些突出優勢

　　1) MVC 基於Html-Javascript

　　2) 依賴注入

　　3) 數據雙向綁定，響應式頁面設計

　　4) 模塊化，自定義指令

 

2. 簡話數據綁定

　　1) 代碼：

1 <input type="text" ng-model="hello1">
2 <input type="text" ng-model="hello2">
3 <textarea ng-bind="hello1" name="" id="" cols="30" rows="10"></textarea>
4 <span class="bg-danger">{{hello1}} {{hello2}}</span>

 　　2)解釋

　　　1 定義一個文本框，並用ng-model綁定到變量hello1

　　　2 定義一個文本框，並用ng-model綁定到變量hello2

        3 定義一個輸入文本，並用ng-bind綁定到變量hello1, 就是說hello1是什麼值,這裏就是什麼值

　　  4 定義區域,顯示hello1 和hello2的值,其實就是文本框1,2的值相加

　　3) 查看效果: http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/1-intro.html

　　4) 源代碼: https://github.com/jimuyouyou/angular-bootstrap-rest-seed

 

3. 小結

　　1) Angular的數據綁定ng-model,其實就是定義一個變量,將其綁定到原生html元素

　　　　注意: 這是雙向綁定,就是說變量值變了,html顯示自動更新; html值變了,變量值自動更新

　　2) ng-bind也可綁定變量,是單向綁定,只用於綁定已有變量,至關於引用,不能更新他的值

　　3) 變量綁定不須要寫一行javascript代碼,只是加了ng標籤而已

　　4) 頁面會響應式更新,不須要手動javascript操做dom元素

 

嗯: 很強大,必須用好!