標籤：自己的 plain bar 技術分享 html head 技術 例子 char
最近在學習angularJS，就買了一本《AngularJS即學即用》作為自己的入門書籍，到目前為止看了兩章的內容，感覺這本書還是不錯的，東西講的淺顯易懂。之所以寫這篇文章，一是督促自己能夠堅持學習，二是能夠給自己一個回頭複習的機會，同時也希望能夠幫到想學習Angular的同學一二。
這個系列的文章都是採用“筆記+個人理解”的方式來寫。會把比較重要的內容摘抄出來，同時有的地方也會談談個人理解。作為第一篇，主要做一個angular入門，結合一個入門樣本，瞭解一下如何構建AngularJS應用： 1 <!DOCTYPE html> 2 <html ng-app=""> <!-- 通過ng-app指令來啟動AngularJS,它的作用是指定HTML中哪一部分歸AugularJS控制 --> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <h1>Hello {{1 + 2}}</h1> 9 </body>10 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>11 </html>
要構建一個AngularJS應用：
（1）第一步引入AngularJS庫，可以是CDN，也可以是本地，我這裡是本地
| 1 | <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> |
（2）告訴頁面中的哪一部分受AngularJS控制，啟動AngularJS
在AngularJS中，我們可以手動指定AngularJS的控制範圍，通過“ng-app”指令在之前的樣本中，我們在<html>的開始標籤中添加了“ ng-app=‘‘ ”，通過這個指令達到兩個目的： - 指定AngularJS的控制範圍 - 啟動AngularJS這個指令是可以傳入一個參數的，這個參數就是angularJS的模組的名稱，這個到了模組再說。 當我們指定<html>標籤為AngularJS的控制範圍時，<html>標籤中的所有子節點都處於AngularJS的控制下。 除了以上兩點之外，我們還注意到了一個特殊的地方—— {{ 1+2 }}花括弧在AngularJS中表示資料繫結。這種資料繫結可以是單向的資料繫結，也可以是某個運算式。 - 如果是一個變數（單向的資料繫結），那麼當這個變數的值改變時，UI會隨之變化。 - 如果是一個運算式，則AngularJS會將計算後的值呈現在UI上。看懂了入門樣本，再看一個樣本： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body ng-app=""> 8 <!-- 9 ng-model指令：用於擷取使用者輸入的值並儲存在name變數中10 -->11 <input type="text" placeholder="請輸入你的姓名" ng-model="name" />12 <!--13 ng-bind指令：與{{}}是等價的14 -->15 <h1>Hello，<span ng-bind="name"></span></h1>16 <h1>Hello，{{name}}</h1>17 </body>18 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>19 </html>除了之前說到過的“ng-app”指令，這個例子中新出現了“
ng-model”和“
ng-bind”指令。 （1）ng-model指令：這個指令可以用於輸入控制項中，當使用者想要輸入資料或者從JavaScript變數中擷取值時都可以使用它。 ng-model="name"在此例中表示將擷取到的值（input）傳遞給name變數。 （2）ng-bind指令：和“{{}}”的作用是一樣的，綁定資料。但是ng-bind和{{}}在效率上會有一些差異，我們需要瞭解以下兩點： ① “{{}}”在AngularJS執行時，會先轉換成ng-bind再執行，所以效率會低，但是寫法簡單。 ② 使用“{{}}”來綁定資料時，在UI上“{{}}”會一閃而過。雖然比較短，還是可以發現的。解決辦法是在使用了“{{}}”的元素上添加一個樣式“ng-cloak”，這是一段樣式，作用就是先把這段元素隱藏起來，等轉換結束後再顯示，樣式代碼核心就是“display:none !important;”最好是自己寫，也可以用AngularJS定義好的，但是這樣需要在開頭先引入AngularJS檔案 [轉寄自http://www.cnblogs.com/enjoymylift/p/6051455.html]
《AngularJS即學即用》讀書筆記（一）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
