1.ng-app 指令定義一個(gè) AngularJS 應(yīng)用程序。
2.ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序。
3.ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖。
4.AngularJS 表達(dá)式寫在雙大括號(hào)內(nèi)：{{ expression }}
<div ng-app="">
<input type="text" ng-model="name">
<p>hello {{name}}</p>
</div>
5.ng-init 指令初始化 AngularJS 應(yīng)用程序變量。
<div ng-app="" ng-init="name='world'">
<input type="text" ng-model="name">
<p>hello {{name}}</p>
</div>
6.AngularJS 模塊（Module） 定義了 AngularJS 應(yīng)用。
7.AngularJS 控制器（Controller） 用于控制 AngularJS 應(yīng)用。
<div ng-app="test" ng-controller="testCtl">
<input type="text">
<p>{{firstName + " " + lastName}}</p>
</div>
<script type="text/javascript">
//聲明模塊
var app=angular.module('test',[]);
//聲明控制器
app.controller('testCtl',function($scope){
$scope.firstName="hello";
$scope.lastName="world";
})
</script>
8.ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素
<div ng-app="test" ng-controller="testCtl">
<ul>
<li ng-repeat="x in arr">{{x}}</li>
</ul>
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope){
$scope.arr=[1,2,3,4,5,6];
})
</script>
9.使用 .directive 函數(shù)來(lái)添加自定義的指令，使用駝峰法來(lái)命名一個(gè)指令， testDirective, 但在使用它時(shí)需要以 - 分割, test-directive,你可以通過(guò)以下方式來(lái)調(diào)用指令：
a.元素名 b.屬性 c.類名 d.注釋
通過(guò)添加 restrict 屬性,可以限制自定義指令只能通過(guò)特定的方式來(lái)調(diào)用，可以通過(guò)以下方式來(lái)調(diào)用指令：
a.元素名("A") b.屬性("E") c.類名("C") d.注釋("M)
<div ng-app="test">
<test-directive></test-directive>
<div test-directive></div>
<div class="test-directive"></div>
<!-- 指令:test-directive -->
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.directive("testDirective",function(){
return {
restrict:"ACEM",
template:"<h1>自定義的指令</h1>"
};
})
</script>
10.在ng-show屬性返回 true的情況下顯示,返回false隱藏。
<div ng-app="">
<p ng-show="true">顯示信息</p>
</div>
11.$scope作用在當(dāng)前控制器作用域中，$rootScope作用在整個(gè)應(yīng)用程序作用域中，$rootScope常用作各個(gè)控制器的連接與通信
12.使用一個(gè)管道字符（|） 過(guò)濾數(shù)據(jù)，常用的過(guò)濾器有：
| 過(guò)濾器 | 描述 |
|---|---|
| currency | 格式化數(shù)字為貨幣格式 |
| filter | 從數(shù)組項(xiàng)中選擇一個(gè)子集 |
| lowercase | 格式化字符串為小寫 |
| orderBy | 根據(jù)某個(gè)表達(dá)式排列數(shù)組 |
| uppercase | 格式化字符串為大寫 |
<div ng-app="test" ng-controller="testCtl">
{{ firstName | uppercase}}
{{ lastName | lowercase}}
{{ price | currency}}
<ul>
<li ng-repeat="x in names | filter:'test2' | orderBy:'country'">{{x.name + " " + x.country}}</li>
</ul>
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope){
$scope.firstName="hello";
$scope.lastName="WORLD";
$scope.price="1234";
$scope.names=[{name:"test1",country:"wuhan"},{name:"test2",country:"shanghai"},{name:"test3",country:"shenzhen"}]
})
</script>
13.$location.absUrl()返回當(dāng)前頁(yè)面的地址
<div ng-app="test" ng-controller="testCtl">
{{url}}
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope,$location){
$scope.url=$location.absUrl();
})
</script>
14.$http服務(wù)發(fā)起服務(wù)器請(qǐng)求
<div ng-app="test" ng-controller="testCtl">
<h1>{{value}}</h1>
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope,$http){
$http.get("test.json").success(function(response){
$scope.value=response.key;
});
})
</script>
15.$timeout 對(duì)應(yīng)了 JS window.setTimeout 函數(shù)
<div ng-app="test" ng-controller="testCtl">
{{info}}
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope,$timeout){
$scope.info="hello world";
$timeout(function(){
$scope.info="how are you today";
},3000)
})
</script>
16.$interval 對(duì)應(yīng)了 JS window.setInterval 函數(shù)
<div ng-app="test" ng-controller="testCtl">
{{info}}
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope,$interval){
$scope.info=new Date().toLocaleString();
$interval(function(){
$scope.info=new Date().toLocaleString();
},1000)
})
</script>
17.使用.service創(chuàng)建自定義服務(wù)
<div ng-app="test" ng-controller="testCtl">
{{info}}
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope,test){
$scope.info=test.myFunc(1000);
})
app.service('test',function(){
this.myFunc=function(x){
return x.toString(16)
}
})
</script>
18.ng-options 指令創(chuàng)建下拉列表
<div ng-app="test" ng-controller="testCtl">
<select ng-options="x for x in names" ng-model="selectName"></select>
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope){
$scope.selectName="wuhan";
$scope.names=["wuhan","sandong","shanghai","shenzhen"]
})
</script>
19.$index表示循環(huán)中的序號(hào)
<div ng-app="test" ng-controller="testCtl">
<ul>
<li ng-repeat="x in names">{{ $index }}</li>
</ul>
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope){
$scope.names=["wuhan","sandong","shanghai","shenzhen"]
})
</script>
20.$odd 和 $even分別表示序號(hào)奇數(shù)和偶數(shù)位
21.ng-disabled 指令綁定數(shù)據(jù)到 HTML 的 disabled 屬性。
<div ng-app="test" ng-controller="testCtl">
<button ng-disabled="mySwitch">點(diǎn)擊</button>
<input type="checkbox" ng-model="mySwitch">按鈕
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope,$http){
$scope.mySwitch=true;
})
</script>
22.ng-hide 指令用于隱藏或顯示 HTML 元素。
23.ng-click 指令定義了點(diǎn)擊事件。
<div ng-app="test" ng-controller="testCtl">
<button ng-click="count=count+1">點(diǎn)擊</button>
<h1>{{count}}</h1>
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope,$http){
$scope.count=0;
})
</script>
24.ng-include在HTML頁(yè)面中包含HTML頁(yè)面
<div ng-app="test" ng-controller="testCtl">
<div ng-include="'module.html'"></div>
</div>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('testCtl',function($scope){
})
</script>
25.angular.bind(object,function(){},arguments)動(dòng)態(tài)綁定
26.angular.bootstrap(element,['module'])手動(dòng)加載模塊
27.angular.copy復(fù)制一個(gè)對(duì)象
28.angular.element()返回一個(gè)jQuery對(duì)象
29.angular.equals()比較兩個(gè)對(duì)象是否相等
30.angular.forEach(obj,function(value,key){})迭代
31.angular.fromJson(string)將json字符串轉(zhuǎn)換為json對(duì)象
