Angular JS簡介
Angular JS是一個基於JS的框架，通過
<script>標籤添加到HTML頁面。如：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
Angular JS通過指令擴展HTML，通過表達式綁定數據到HTML
Angular JS指令
AngularJS 通過 ng-directives 擴展了 HTML。
ng-app 指令定義一個 AngularJS 應用程序，聲明Angular的邊界。如果你正構建一款純Angular應用，就可以把ng-app指令寫在<html>標籤中，即：<html ng-app>，這樣就會告訴Angular去管理頁面上的所有DOM 元素。
如果你有一款現存的應用，該應用正在用其他一些技術（如Java 或Rails）來管理DOM，那麼你可以讓Angular 只管理頁面中的一部分，只要在頁面中放入一些<div> 之類的元素即可。即：<div ng-app>。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
ng-bind 指令把應用程序數據綁定到 HTML 視圖。
Angular JS實例
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>實例講解：
當網頁加載完畢，AngularJS 自動開啓。
ng-app 指令告訴 AngularJS，<div>元素是 AngularJS 應用程序 的”所有者”。
ng-model 指令把輸入域的值綁定到應用程序變量 name。
ng-bind 指令把應用程序變量 name 綁定到某個段落的**innerHTML**。
什麼是 AngularJS？
AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。
- AngularJS 把應用程序數據綁定到 HTML 元素。
- AngularJS 可以克隆和重複 HTML 元素。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素”背後”添加代碼。
- AngularJS 支持輸入驗證。
AngularJS 指令
AngularJS 指令是以 ng 作爲前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應用程序變量，可指定初始值，也可不填值
<div ng-app="" ng-init="firstName='John'">
<p>姓名爲 <span ng-bind="firstName"></span></p>
</div>HTML5 允許擴展的（自制的）屬性，以 data- 開頭。
AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
<div ng-app="" data-ng-init="firstName='John'">
<p>姓名爲 <span data-ng-bind="firstName"></span></p>
</div>AngularJS 表達式
AngularJS 表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 程序結果將在表達式書寫的位置”輸出”數據。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。實例 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}
<div ng-app="">
<p>我的第一個表達式： {{ 5 + 5 }}</p>
</div>
頁面將會輸出我的第一個表達式：10AngularJS 基本類型
AngularJS 數字、字符串、對象和數組都分別與JavaScript中的一樣，如下：
數字
<div ng-app="" ng-init="num1=5;num2=2">
<p>總價爲：{{num1 * num2}}</p>
</div>之前贅述過，{{}}表達式與ng-bind指令有等同效果，所以上述表達式可改爲：<p>總價爲：<span ng-bind="num1 * num2"></span></p>，最終都輸出：總價爲：10。
字符串
<div ng-app="" ng-init="firstName='John';secondName='Doe'">
<p>姓名：<span ng-bind="firstName+''+secondName"></span></p>
</div>這裏需注意，字符串在ng-init裏以單引號包含表示這是字符串。
對象
<div ng-app="" ng-init="person={firstName:'John',secondName:'Doe'}">
<p>姓爲：{{person.firstName}}</p>
<p>名爲：<span ng-bind="person.secondName"></span></p>
</div>在angular裏，同樣可使用.訪問對象屬性。
數組
<div ng-app="" ng-init="points=[1,4,655,33]">
<p>第三個值爲：<span ng-bind="points[2]"></span></p>
<p>第三個值爲：{{points[2]}}</p>
</div>AngularJS 表達式 與 JavaScript 表達式
類似於 JavaScript 表達式，AngularJS 表達式可以包含字母，操作符，變量。
與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。
與 JavaScript 表達式不同，AngularJS 表達式不支持條件判斷，循環及異常。
與 JavaScript 表達式不同，AngularJS 表達式支持過濾器。