剛接觸AngularJS不久，總結(jié)了一些常用的內(nèi)容，內(nèi)容不是很多，也或許有一些錯誤，希望指正和海涵，內(nèi)容會根據(jù)我了解程度不斷更新完善.

一、指令

1、ng-app

 定義應(yīng)用程序的根元素

[html] view plain copy

1. <div ng-app="app"></div>  

[javascript] view plain copy

1. var app = angular.module('app', []);  

2、ng-controller

為應(yīng)用定義控制器對象

[html] view plain copy

1. <div ng-controller="appController"></div>  

[javascript] view plain copy

1. app.controller('appController', function($scope) {  
2.        //你的代碼  
3. })  

3、ng-repeat  

遍歷集合中（數(shù)組中）的每個項，給每個元素生成模板實例

普通：

[javascript] view plain copy

1. ng-repeat="key in keys"  

自定義遍歷后的內(nèi)容：

[javascript] view plain copy

1. ng-repeat="(key, value) in cache.info()"  

過濾：

[javascript] view plain copy

1. ng-repeat="friend in friends | filter:searchText"  

排序：

[javascript] view plain copy

1. ng-repeat="friend in friends | orderBy:'-age'"  

4、ng-options

遍歷集合或數(shù)組，為HTML的<select>標(biāo)簽生成<option>元素

普通：

[javascript] view plain copy

1. ng-options="color.name for color in colors"  

顯示的是name，選中值是id

[javascript] view plain copy

1. ng-options="option.id as option.name for option in Options"  

分組：

[javascript] view plain copy

1. ng-options="option.id group by option.name for option in Options"  

5、ng-class

用于動態(tài)設(shè)置dom元素的樣式

[javascript] view plain copy

1. ng-class="{'true':'badge bg-green', 'false':'badge bg-red'}[isActive]"  

6、ng-style

用于動態(tài)自定義dom元素的css

[javascript] view plain copy

1. ng-style="{ color: i.color=='' || i.color=='Default' ? 'default' : 'red' }"  

7、ng-model

把HTML元素值（比如輸入域的值）綁定到應(yīng)用程序

[html] view plain copy

1. <input type="text" ng-model="userName">  

8、ng-if

可以完全根據(jù)表達式的值在DOM中生成或移除一個元素

[html] view plain copy

1. <div ng-if="isChecked == true">為true則可顯示</div>  

9、ng-hide / ng-show

隱藏或顯示 HTML 元素

直接使用布爾值

[html] view plain copy

1. <p ng-hide="true">我是不可見的</p>  
2. <p ng-hide="false">我是可見的</p>  

[html] view plain copy

1. <p ng-show="true">我是可見的</p>  
2. <p ng-show="false">我是不可見的</p>  

[html] view plain copy

1. <p ng-hide="1+1 == 2">我是不可見的</div>  

[html] view plain copy

1. <p ng-show="2+2 == 4">我是可見的</div>  

10、ng-init

初始化應(yīng)用程序數(shù)據(jù)

[html] view plain copy

1. <div ng-init="name='張三'">  
2.       My name is {{ name }}  
3. </div>  

11、ng-bind

綁定程序數(shù)據(jù)到HTML元素，也可用"{{}}"代替

[html] view plain copy

1. <div>  
2.   <h1>Hello <span ng-bind="name"></span></h1>  
3. </div>  

12、ng-disabled

綁定應(yīng)用程序數(shù)據(jù)到 HTML 元素的 disabled 屬性

[html] view plain copy

1. <button ng-disabled="1+1==2">不可點擊</button>  

13、ng-include

在應(yīng)用中包含 HTML內(nèi)容

[html] view plain copy

1. <div ng-include="'userList.htm'"></div>  

14、ng-form

和HTML的<form>標(biāo)簽一樣，但可以被<form>標(biāo)簽嵌套

15、ng-readonly

綁定應(yīng)用程序數(shù)據(jù)到 HTML 元素的 readonly 屬性

[html] view plain copy

1. <input type="text" ng-readonly="isReadOnly"/>  

16、ng-checked

為HTML的勾選框動態(tài)設(shè)置勾選狀態(tài)

[html] view plain copy

1. <input type="checkbox" ng-checked="true" />  

17、ng-selected

為HTML的下拉框<select>設(shè)置默認選擇

[html] view plain copy

1. <select>  
2.     <option>First</option>  
3.     <option>Second</option>  
4.     <option ng-selected="true">Third</option>  
5. </select><span>  
6.   
7. <select>  
8.     <option ng-repeat="person in persons" ng-select="person.sex == 'boy'">{{ person.sex }}</option>  
9. </select>  

18、ng-cloak

隱藏所有被它包含的元素，在瀏覽器加載和編譯渲染完成之后，angular會自動刪除ngCloak元素屬性，這樣這個元素就會變成可見的

[html] view plain copy

1. <div ng-cloak>  
2.   <h1>Hello World!</h1>  
3. </div>  

19、ng-switch

分支語句

[html] view plain copy

1. <span ng-switch="person.sex">  
2. <span ng-switch-when="boy">boy</span>  
3. <span ng-switch-when="girl">girl</span>  
4. <span ng-switch-default></span>  

20、ng-href

和HTML的href屬性相通

[html] view plain copy

1. <a ng-href="/user/1">Link</a>  

21、ng-src

和HTML的src屬性相通

[html] view plain copy

1. <img ng-src="{{imageUrl}}">  

二、事件

1、ng-click

定義了AngularJS的點擊事件

[html] view plain copy

1. <button ng-click="click()">click me</button>  

2、ng-dbl-click

定義了AngularJS的雙擊事件

[html] view plain copy

1. <button ng-dblclick="dblclick()">click me</button>  

3、ng-mousedown

當(dāng)元素上按下鼠標(biāo)按鈕時觸發(fā)

[html] view plain copy

1. <button ng-mousedown="mousedown($event)">button</button>  

4、ng-mouseenter

當(dāng)鼠標(biāo)進入元素時觸發(fā)

[html] view plain copy

1. <button ng-mouseenter="mouseenter()">button</button>  

5、ng-mouseleave

當(dāng)鼠標(biāo)離開元素時觸發(fā)

[html] view plain copy

1. <button ng-mouseleave="mouseleave()">button</button>  

6、ng-mousemove

當(dāng)鼠標(biāo)指針移動到元素上時觸發(fā)

[html] view plain copy

1. <button ng-mousemove="mousemove()">button</button>  

7、ng-keydown

在用戶按下鍵盤按鍵時觸發(fā)，要把$event傳過去，一般都是要判斷按了哪個按鍵

[html] view plain copy

1. <input type="text" ng-keydown="keydown($event)"/>  

8、ng-keyup

在用戶按下鍵盤按鍵并松開時觸發(fā)

[html] view plain copy

1. <input type="text" ng-keyup="keyup($event)"/>  

9、ng-keypress

在用戶敲擊鍵盤按鍵時觸發(fā)

[html] view plain copy

1. <input type="text" ng-keypress="keypress($event)"/>  

   引發(fā)事件的按鍵

       非字符鍵不會引發(fā) KeyPress 事件，但非字符鍵卻可以引發(fā) KeyDown 和 KeyUp 事件。

   事件引發(fā)的時間

       KeyDown 和 KeyPress 事件在按下鍵時發(fā)生，KeyUp 事件在釋放鍵時發(fā)生。

   事件發(fā)生的順序

10、ng-change

當(dāng)元素的model值改變時觸發(fā)

[html] view plain copy

1. <input type="text" ng-model="text" ng-change="change()" ng-minlength="5"/>  

11、ng-blur

當(dāng)元素失去焦點時觸發(fā)

[html] view plain copy

1. <a href="" ng-blur="blur()">link</a>  

12、ng-focus

當(dāng)元素獲取焦點時觸發(fā)

[html] view plain copy

1. <a href="" ng-focus="focus()">link</a>  

三、服務(wù)

1、$scope

$scope 對象在 AngularJS 中充當(dāng)數(shù)據(jù)模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全與通常意義上的數(shù)據(jù)模型一樣,因為 $scope 并不處理和操作數(shù)據(jù),它只是建立了視圖和 HTML 之間的橋梁,讓視圖和 Controller 之間可以友好的通訊。

2、$rootScope

$rootScope 是所有 $scope 的最上層對象,可以理解為一個 AngularJS 應(yīng)用中得全局作用域?qū)ο蟆?br>

3、$watch

當(dāng)你的數(shù)據(jù)模型中某一部分發(fā)生變化時，$watch函數(shù)可以向你發(fā)出通知。你可以監(jiān)控單個對象的屬性，也可以監(jiān)控需要經(jīng)過計算的結(jié)果（函數(shù)）。它的函數(shù)簽名為$watch(watchFn, watchAction, deepWatch)。

watchFn：該參數(shù)是一個帶有Angular表達式或者函數(shù)的字符串，它會返回被監(jiān)控的數(shù)據(jù)模型的當(dāng)前值。

watchAction：這是一個函數(shù)或者表達式，當(dāng)watchFn 發(fā)生變化時會被調(diào)用。

deepWatch：如果設(shè)置為true，這個可選的布爾型參數(shù)將會命令A(yù)ngular去檢查被監(jiān)控對象的每個屬性是否發(fā)生了變化。

4、$http

$http是 AngularJS 中的一個核心服務(wù)，用于讀取遠程服務(wù)器的數(shù)據(jù)。可以使用get、post、patch、delete等請求。

[javascript] view plain copy

1. $http.get(url).success(function(data) {  
2. 　// success　  
3. }).error(function (data) {  
4.     // fail  
5. });  

5、$location

• 暴露當(dāng)前地址欄的URL，這樣你就能
  • 獲取并監(jiān)聽URL。
  • 改變URL。
• 當(dāng)出現(xiàn)以下情況時同步URL
  • 改變地址欄
  • 點擊了后退按鈕（或者點擊了歷史鏈接）
  • 點擊了一個鏈接
• 一系列方法來獲取URL對象的具體內(nèi)容用（protocol, host, port, path, search, hash）.formatDate

6、$window

7、$interval

[javascript] view plain copy

1. $interval(function() {  
2.     // 每秒執(zhí)行一次  
3.  }, 1000);  

8、$timeout

[javascript] view plain copy

1. $timeout(function(){  
2.     // 延遲1秒執(zhí)行  
3. }, 1000);  

9、$routeParams

通過route傳遞參數(shù)

[javascript] view plain copy

1. .when('/platform/user/deatil/:params', {  
2.     templateUrl: 'V/user/user.detail.tpl.html',  
3.     controller: 'PlatformUserDetailController'  
4. })  

獲取route的參數(shù)

[javascript] view plain copy

1. var params = $routeParams.params  

10、$compile

由$compile方法來執(zhí)行DOM的編譯

四、全局API

1、轉(zhuǎn)換

2、比較

3、JSON

4、基礎(chǔ)