認識了AngularJS框架，我們開始創建第一個AngularJS應用。
AngularJS是以一個JavaScript文件形式發布的，可通過script標簽載入AngularJS腳本，如下所示：
<script src="angular.min.js"></script>
在編輯中，輸入如下代碼
<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-bind來實現，繼續加油吧！
指令：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就會調用相應的方法，是不是很簡單方便呢！
原文地址：匯智網