簡介
AngularJS 是一個為動態WEB應用設計的結構框架，提供給大家一種新的開發應用方式，這種方式可以讓你擴展HTML的語法，以彌補在構建動態WEB應用時靜態文本的不足，從而在web應用程序中使用HTML聲明動態內容。
AngularJS有五個主要核心特性，如下介紹：
-
雙向數據綁定 —— 實現了把model與view完全綁定在一起，model變化，view也變化，反之亦然。
-
模板 —— 在AngularJS中，模板相當於HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AuguarJS把模板當做DOM來操作，去生成一些指令來完成對view的數據綁定。
-
MVVM —— 吸收了傳統的MVC設計模式針但又並不執行傳統意義上的MVC，更接近於MVVM(Moodel-View-ViewModel)。
-
依賴注入 —— AngularJS擁有內建的依賴注入子系統，可以幫助開發人員更容易的開發，理解和測試應用。
-
指令 —— 可以用來創建自定義的標簽，也可以用來裝飾元素或者操作DOM屬性。
創建應用
認識了AngularJS框架，我們開始創建第一個AngularJS應用。
AngularJS是以一個JavaScript文件形式發布的，可通過script標簽載入AngularJS腳本
復制以下代碼至右邊欄，做好准備工作。
<div ng-app="" ng-init="name='World'">
Hello {{ name }}！
</div>
點擊運行結果查看是否為“Hello World”，如正確則表示AngularJS腳本成功引入。
指令介紹
AngularJS有一套完整的、可擴展的、用來幫助web應用開發的指令集，它使得HTML可以轉變成“特定領域語言(DSL)”，是用來擴展瀏覽器能力的技術之一，在DOM編譯期間，和HTML關聯着的指令會被檢測到，並且被執行，這使得指令可以為DOM指定行為，或者改變它。
AngularJS通過稱為指令的新屬性來擴展的HTML，帶有前綴ng-，我們也可以稱之為“指令屬性”，它就是綁定在DOM元素上的函數，可以調用方法、定義行為、綁定controller及$scope對象、操作DOM，等等。
AngularJS指令指示的是“當關聯的HTML結構進入編譯階段時應該執行的操作”，它本質上只是一個當編譯器編譯到相關DOM時需要執行的函數，可以寫在元素的名稱里，屬性里，css類名里，注釋里。
當瀏覽器啟動、開始解析HTML時，DOM元素上的指令屬性就會跟其他屬性一樣被解析，也就是說當一個Angular.js應用啟動，Angular編譯器就會遍歷DOM樹來解析HTML，尋找這些指令屬性函數，在一個DOM元素上找到一個或多個這樣的指令屬性函數，它們就會被收集起來、排序，然后按照優先級順序被執行。
Angular.js應用的動態性和響應能力，都要歸功於指令屬性，常見的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。
關於“指令屬性”就先暫時介紹這些，相信你已經對它有初步的了解，接下來我們就開始逐一的深入的學習它們。
指令：ng-app
ng-app指令來標明一個AngularJS應用程序，並通過AngularJS完成自動初始化應用和標記應用根作用域，同時載入和指令內容相關的模塊，並通過擁有ng-app指令的標簽為根節點開始編譯其中的DOM。
引用方法很簡單，如下所示：
<div ng-app=""> </div>
如上引用，一個AngularJS應用程序初始化就完成了並標記了作用域，也就是div元素就是AngularJS應用程序的"所有者"，在它里面的指令也就會被Angular編譯器所編譯、解析了。
指令：ng-init
ng-init指令初始化應用程序數據，也就是為AngularJS應用程序定義初始值，通常情況下，我們會使用一個控制器或模塊來代替它，后面我們會介紹有關控制器和模塊的知識。
如下所示，我們為應用程序變量name賦定初始值。
<div ng-app="" ng-init="name='Hello World'"> </div>
我們不僅可以賦值字符串，也可以賦值為數字、數組、對象，而且可以為多個變量賦初始值，如下所示：
<div ng-app="" ng-init="quantity=1;price=5"> </div> //或者 <div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']"> </div>
AngularJS表達式
AngularJS框架的核心功能之一 —— 數據綁定，由兩個花括號{{}}組成，可以把數據綁定到HTML，類似Javascript代碼片段，可以包含文字、運算符和變量，通常在綁定數據中用到，表達式可以綁定數字、字符串、對象、數組，寫在雙大括號內：{{ expression }}。
- 如前面的示例，我們就可以使用表達式這樣調用初始化的變量值，如下。
<div ng-app="" ng-init="name='Hello World'">
{{ name }}
</div>
- 當然我們也可以使用表達式輸出數字、數組等等，如下所示：
2.1. 輸出數字，如下示例：
<div ng-app="" ng-init="quantity=12;price=5">
總價： {{ quantity * price }}
</div>
2.2. 輸出對象，如下示例：
<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
名字為： {{ names[0] }}
</div>
指令：ng-model
在AngularJS中，只需要使用ng-model指令就可以把應用程序數據綁定到HTML元素，實現model和view的雙向綁定。
如下示例，使用ng-model指令對數據進行綁定。
注：輸出什么顯示什么
<div ng-app="">
請輸入任意值：<input type="text" ng-model="name" />
你輸入的為： {{ name }}
</div>
ng-model把相關處理事件綁定到指定標簽上，這樣我們就可以不用在手工處理相關事件(比如change等)的條件下完成對數據的展現需求。
以上介紹了ng-model的單向綁定(view->model)后面控制器我們會用到它的雙向綁定功能，好，參照以上代碼，趕快試試數據綁定的效果吧！
指令：ng-bind
指令ng-bind和AngularJS表達式{{}}有異曲同工之妙，但不同之處就在於ng-bind是在angular解析渲染完畢后才將數據顯示出來的。
如下使用ng-bind指令綁定把應用程序數據。
<div ng-app="">
請輸入一個名字：<input type="text" ng-model="name" />
Hello <span ng-bind="name"></span>
</div>
PS：使用花括號語法時，因為瀏覽器需要首先加載頁面，渲染它，然后AngularJS才能把它解析成你期望看到的內容，所以對於首個頁面中的數據綁定操作，建議采用ng-bind，以避免其未被渲染的模板被用戶看到。
指令：ng-click
AngularJS也有自己的HTML事件指令,比如說通過ng-click定義一個AngularJS單擊事件。
對按鈕、鏈接等，我們都可以用ng-click指令屬性來實現綁定，如下簡單示例：
<div ng-app="" ng-init="click=false">
<button ng-click="click= !click">隱藏/顯示</button>
<div ng-hide="click">
請輸入一個名字：<input type="text" ng-model="name" />
Hello <span ng-bind="name"></span>
</div>
</div>
PS：ng-hide="true"，設置HTML元素不可見。
ng-click指令將DOM元素的鼠標點擊事件(即mousedown)綁定到一個方法上，當瀏覽器在該DOM元素上鼠標觸發點擊事件時，Angular就會調用相應的方法，是不是很簡單方便呢！