前言
AngularJS是一款為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計的優(yōu)秀的前端JS框架役首。AngularJS有著諸多特性莱衩，最為核心的是：MVC、模塊化慢睡、自動化雙向數(shù)據(jù)綁定、語義化標簽铡溪、依賴注入等等漂辐。
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫棕硫。它可通過 <script> 標簽添加到 HTML 頁面髓涯。
AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數(shù)據(jù)到 HTML哈扮。
AngularJS 是以一個 JavaScript 文件形式發(fā)布的纬纪，可通過 script 標簽添加到網(wǎng)頁中蚓再。
AngularJS最初是由MISKO Hevery和Adam Abrons于2009年開發(fā)。現(xiàn)在是由谷歌維護包各。它的最新版本是1.3.14对途。
各個AngularJS版本下載：https://github.com/angular/angular.js/releases
1. 走進 AngularJS
AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計的。 AngularJS使得開發(fā)現(xiàn)代的單一頁面應(yīng)用程序（SPAs：Single Page Applications）變得更加容易髓棋。
AngularJS 把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素。
AngularJS 可以克隆和重復(fù) HTML 元素惶洲。
AngularJS 可以隱藏和顯示 HTML 元素按声。
AngularJS 可以在 HTML 元素"背后"添加代碼。
AngularJS 支持輸入驗證恬吕。
2. AngularJS 中的指令與表達式
AngularJS 通過 指令 擴展了 HTML签则，且通過 表達式 綁定數(shù)據(jù)到 HTML功蜓。
2.1常用指令
AngularJS 指令是擴展的 HTML屬性性置，帶有前綴 ng-。
1霉翔、ng-app=""聲明AngularJS所管轄的區(qū)域钠惩。一般寫在body或者html標簽上柒凉，原則上一個頁面只能有一個。
<body ng-app=""></body>
2篓跛、ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序的變量中膝捞。
<input type="text" ng-model="name"/>
3、 ng-bind把應(yīng)用程序變量中的值愧沟，輸出到頁面HTML視圖中蔬咬，可以與表達式{{}}互相替換。
<p ng-bind="5+5+'Angular'"></p>
4沐寺、ng-init：初始化AngularJS應(yīng)用程序中的變量值林艘；
<body ng-app="" ng-init="name='NAME'">
應(yīng)用程序初始化時，name變量就附有初值混坞。
2.2表達式
AngularJS使用{{}}綁定表達式狐援。用于將表達式的內(nèi)容輸出到頁面中。
表達式中可以是文字拔第、運算符咕村、變量等，也可以在表達式中進行運算輸出結(jié)果蚊俺。
<p>{{5+5+"Angular"}}</p> //結(jié)果為 10Angular
如果AngularJS文件放在頁面下方懈涛，在頁面刷新的瞬間會看到{{}}表達式的原樣，所以可以使用ng-bind指令代替表達式泳猬。
<p ng-bind="5+5+'Angular'"></p>
3. AngularJS中的MVC與作用域
3.1MVC三層架構(gòu)
1批钠、Model(模型層)：應(yīng)用程序中用于處理數(shù)據(jù)的部分宇植，(包括將數(shù)據(jù)保存或者修改到數(shù)據(jù)庫、變量埋心、文件中)指郁。在AngularJS中，Model特指的是：應(yīng)用程序中的各種數(shù)據(jù)拷呆。
2闲坎、View(視圖層)：用戶可以看到的用戶顯示數(shù)據(jù)的頁面。
3茬斧、Controller(控制器):控制器是連接View和Model的橋梁腰懂，負責(zé)從View讀取數(shù)據(jù)，接受用戶的操作輸入项秉；并將數(shù)據(jù)發(fā)送給Model層绣溜。
Model層對數(shù)據(jù)處理完畢后，將結(jié)果返回給Controller娄蔼，Controller再將結(jié)果返回給View層顯示怖喻。
3.2AngularJS中的模塊化開發(fā)和依賴注入
3.2.1模塊
創(chuàng)建一個angular的模塊。即ng-app=""所需要綁定的部分岁诉。需要接受兩個參數(shù)：
①模塊名稱锚沸。即ng-app雙引號中需要綁定的名字。
<body ng-app="myapp">
②數(shù)組涕癣。表示需要注入的模塊名稱咒吐，不需要注入其他模塊可用空數(shù)組代替。
var app=angular.module("myapp",[]);
Angular將常用的功能封裝到Angular.js属划，創(chuàng)建主模塊時直接可以使用恬叹，無需注入。
而一些應(yīng)用較少的功能同眯，需要導(dǎo)入對應(yīng)的JS文件绽昼，并且在[]中注入進這個模塊，才能夠使用须蜗。
這就是AngularJS中的模塊化開發(fā)與依賴注入硅确！
3.2.2控制器
在AngularJS的模塊上，創(chuàng)建一個控制器明肮，需要傳入兩個參數(shù)：
①控制器名稱:即ng-controller需要綁定的名稱菱农。
<div ng-controller="myCtrl">
②控制器的構(gòu)造函數(shù)，構(gòu)造函數(shù)可以傳入多個參數(shù)柿估。
如果要在函數(shù)中要使用系統(tǒng)的內(nèi)置對象循未，則必須通過函數(shù)的參數(shù)傳入，否則不能使用秫舌。
AngularJS中的內(nèi)置對象的妖，都用$ 開頭绣檬，例如$scope,$rootScope
angular.module('todoList',[])
.controller('TaskCtrl',function ($scope) {
$scope.task="";
$scope.tasks=[];
$scope.add=function () {
$scope.tasks.push($scope.task);
}
})
3.3AngularJS中的作用域
① $scope局部作用域，聲明在$scope上的屬性和方法嫂粟。只能在當前controller使用娇未；
② $rootScope 根作用域。聲明在$rootScope上的屬性和方法星虹，可以在整個ng-app所包含的范圍使用零抬。
如果沒有使用$scope聲明變量，而是直接使用ng-model在HTML標簽中綁定的數(shù)據(jù)的作用域為：
1宽涌、如果 ng-model寫在某個controller中媚值，則這個變量會默認綁定到當前的controller的$scope上。
2护糖、如果ng-model沒有寫在任何一個controller中，則這個變量會默認綁定到$rootScope 上嚼松。
AngularJS中的父子作用域
1嫡良、AngularJS中，子作用域只能訪問父作用域中的變量献酗，而不能修改父作用域的變量寝受。
2、為了解決上述問題罕偎，可以將父作用域中的變量聲明為引用數(shù)據(jù)類型很澄，例如對象等。這樣可以在子作用域中颜及，直接修改對象的屬性甩苛，而不需要修改對象本身保存的地址。
<body ng-app="myApp">
<input type="text" ng-model="age" placeholder="age" />
<div ng-controller="myCtrl">
<input type="text" ng-model="name" placeholder="name" />
<div ng-bind="name+'-----myCtrl的name'"></div>
<div ng-bind="age+'-----myCtrl的age'"></div>
</div>
<div ng-controller="myCtrl1">
<div ng-bind="name+ '----myCtrl1的name'"></div>
<div ng-bind="age+'-----myCtrl1的age'"></div>
<input type="text" ng-model="test" />
<input type="text" ng-model="obj.test" />
<mark ng-bind="test+'myCtrl1-test'"></mark>
<mark ng-bind="obj.test+'myCtrl1-obj.test'"></mark>
</div>
<mark ng-bind="test+'全局-test'"></mark>
<mark ng-bind="obj.test+'全局-obj.test'"></mark>
<div ng-bind="name + '----全局的name'"></div>
<div ng-bind="age+'-----全局的age'"></div>
</body>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$rootScope){
$scope.name = "zhangsan";
$rootScope.age = "14";
});
app.controller("myCtrl1",function($rootScope){
$rootScope.test = "aaa";
$rootScope.obj = {
test:'bbb'
}
});
</script>
上面的示例我自己也不是很能理解俏站，看下面的敘述:
- 對于$scope上的原生類型讯蒲，如$scope.name="";
- 子作用域獲取變量時，會查找作用域本身肄扎，找不到就會查找父作用域
- 修改時墨林，若本作用域不存在，就會在本作用域創(chuàng)建一個變量犯祠，而不會向上查找并修改父作用域的變量
- 對于$scope上的對象旭等，如$scope.name={};
- 子作用域獲取變量時，會查找作用域本身衡载，找不到就會查找父作用域
- 修改時搔耕，若本作用域不存在，會向上查找并修改父作用域的變量
4.AngularJS 中的過濾器
過濾器可以使用一個管道字符（|）添加到表達式和指令中痰娱。
系統(tǒng)內(nèi)置的過濾器
currency將數(shù)字格式化為貨幣格式filter從數(shù)組項中選擇一個子集lowercase格式化字符串為小寫orderBy根據(jù)某個表達式排列數(shù)組uppercase格式化字符串為大寫
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.classes=[
{name:"張三",age:12,score:78},
{name:"李四",age:12,score:66},
{name:"王二麻子",age:12,score:98},
{name:"趙六",age:12,score:54},
{name:"李二狗",age:12,score:75},
]
})
/*
* 自定義過濾器
*/
.filter("showHello",function(){
return function(text){
return "Hello AngularJS";
}
})
.filter("reverse",function(){
return function(text){
return text.split("").reverse().join("");
}
})
/*
* 自定義過濾器度迂，同時需要傳遞過濾參數(shù)
* 調(diào)用過濾器示例：<p>{{12345678901| hideTel:4}}</p>
* 傳入的參數(shù)4藤乙，將被過濾函數(shù)的num形參所接受
*/
.filter("hideTel",function(){
return function(text,num){
num=num>0&&num<11?num:3;
text=text+"";
var newText=text.substring(0,11-num)
+text.substring(11-num,11).replace(/\d/g,"*");
return newText;
}
})
/*
* 自定義過濾器，實現(xiàn)根據(jù)姓名篩選數(shù)據(jù)的功能惭墓。
* >>> 調(diào)用示例：
* 請輸入姓名：<input type="text" ng-model="name"/>
* <tr ng-repeat="item in classes | filterByName:name">
*/
.filter("filterByName",function(){
return function(items,search){
if(!search) return items;
var arr=[];
for (var i=0;i<items.length;i++) {
var index=items[i].name.indexOf(search);
if (index>-1) {
arr.push(items[i]);
}
}
return arr;
}
})
5.AngularJS中的服務(wù)
5.1服務(wù)Service
1坛梁、內(nèi)置服務(wù)：
要使用服務(wù)，必須要把服務(wù)名通過controller的構(gòu)造函數(shù)的參數(shù)注入進來＠靶住；馈！
系統(tǒng)內(nèi)置的服務(wù)钧萍，統(tǒng)一使用$開頭褐缠，服務(wù)中的屬性和方法統(tǒng)一使用$$開頭！７缡荨队魏！
自定義服務(wù)時，需注意與系統(tǒng)服務(wù)的寫法區(qū)分開万搔；
$location：返回當前頁面的URL地址信息胡桨，是一個對象；
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
$http：向服務(wù)器發(fā)送請求瞬雹，類似于JQuery中的Ajax;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
$timeout:相當于setTimeout()
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
$interval:相當于setInterval()
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
2昧谊、自定義服務(wù)
接收兩個參數(shù)：
第一個參數(shù)是服務(wù)名：
第二個參數(shù)是自定義服務(wù)的構(gòu)造函數(shù)。 我們自定義的服務(wù)酗捌，本質(zhì)是一個對象呢诬。
對象的屬性 ，可以在構(gòu)造函數(shù)中胖缤，使用this.屬性 表示尚镰；
對象的方法 ，可以在構(gòu)造函數(shù)中哪廓，使用this.方法 表示钓猬；
.service("hexafy",function () {
this.gongneng="將十進制數(shù)轉(zhuǎn)化為16進制";
this.func=function (num) {
return num.toString(16);
}
})
使用過濾器實現(xiàn)同樣功能：
.filter("filter1",function(){
return function (num) {
return num.toString(16);
}
})
在過濾器中調(diào)用服務(wù)！Ａ枚馈敞曹！
也必須在聲明過濾器的外層構(gòu)造函數(shù)中，注入服務(wù)名稱Ｗ郯颉０钠取！
.filter("filter2",function(hexafy,$location){
return function (num) {
return hexafy.func(num);
}
})
5.2服務(wù)Factory
factory服務(wù)在使用上與service服務(wù)沒有太大差距剧劝。
唯一的不同點橄登，是聲明服務(wù)時，factory服務(wù)是在函數(shù)中先聲明好一個對象，然后使用return將對象返回拢锹。
而service服務(wù)谣妻，則是直接在函數(shù)中使用this將屬性和方法添加到對象上面。
angular.module("app",[])
.controller("ctrl",function ($scope,hexafy) {
$scope.gongneng=hexafy.gongneng;
$scope.num1=hexafy.func(10);
})
.factory("hexafy",function () {
var obj={
gongneng:"將十進制數(shù)轉(zhuǎn)化為16進制",
func:function (num) {
return num.toString(16);
}
}
return obj;
})
5.3provider
1卒稳、在AngularJs中蹋半，service服務(wù)、 factory服務(wù)都是基于provider服務(wù)實現(xiàn)的
2充坑、在定義provider時减江，可以使用this.$get方法，接受一個函數(shù)捻爷，函數(shù)里面采用與factory完全相同的寫法
.provider("hexafy",function(){
this.$get=function(){
var obj={
gongneng:"將十進制數(shù)轉(zhuǎn)化為16進制",
func:function(num){
return num.toString(16);
}
}
return obj;
}
})
3辈灼、在三種服務(wù)中，provider服務(wù)是唯一可以寫進config配置階段的服務(wù)也榄。
所以說巡莹，如果服務(wù)需要在配置階段，也就是在聲明controller之前執(zhí)行的話甜紫，則可以使用provider降宅，否則一般使用service或者factory。
angular.module("app",[])
/*.config()表示配置階段棵介，在聲明controller之前執(zhí)行“墒罚可以用于聲明一些在controller中
* 需要使用的全局變量邮辽、方法、服務(wù)等
*/
.config(function($provide){
// 在配置階段聲明provider服務(wù)贸营，需要在config中注入系統(tǒng)對象$provide
$provide.provider("hexafy",function(){
this.$get=function(){
var obj={
gongneng:"444"
}
return obj;
}
});
})
.controller("ctrl",function($scope,hexafy){
$scope.gongneng=hexafy.gongneng;
})
6. AngularJS 中的select與表格
(一)使用數(shù)組作為數(shù)據(jù)源
1吨述、item表示數(shù)組中的每一項
2、循環(huán)出的option中钞脂，value的值揣云，默認為item
3、option顯示出的內(nèi)容（<option></option>標簽中的文字）是由item.site for決定的冰啃！
<select ng-model="site" ng-options="item.site for item in sites" >
這種寫法邓夕，默認生成的option效果如下：
<option value="{site : "Google", url : "http://www.google.com"}">Google</option>
<pre>{{site}}</pre>
(二)以對象作為數(shù)據(jù)源
1、(key,value)第一項表示對象的鍵阎毅，第二項表示對象的值焚刚；
2、option的value扇调，永遠都是對象的值矿咕！
3、option顯示出的內(nèi)容(<option></option>標簽中的文字)是由...for決定的！也就是說碳柱，for前面是什么捡絮，option標簽中就是什么。
<select ng-model="site3" ng-options="key for (key,value) in sitess">
<!--
<option value="value">key/value(取決for前面的內(nèi)容)</option>
-->
</select>
ng-options 和 ng-repeat
1莲镣、
- ng-options使用時福稳，是將指令添加在select上；
- ng-repeat使用時剥悟，是將指令添加在option上灵寺。
2、
- ng-options使用時区岗，必須同步給select標簽綁定ng-model略板；
- ng-repeat使用時，不一定需要綁定ng-model慈缔；
3叮称、
- ng-options使用時，我們只需要關(guān)心for前面的部分藐鹤，即option標簽中顯示的文字瓤檐；而option的value會自動分配，不由我們決定娱节。(使用數(shù)組作為數(shù)據(jù)源時挠蛉，value就是數(shù)組的每一項；使用對象作為數(shù)據(jù)源時肄满，value永遠都是對象的值)
- ng-repeat使用時谴古，除了要指定option標簽中顯示的文字，還需要手動指定value中的內(nèi)容稠歉，如果沒有指定掰担，則默認沒有value；
<tr ng-repeat="item in options">
<!--
ng-repeat遍歷是怒炸，$index 表示當前的行索引带饱！
-->
<td>{{$index + 1}}</td>
<td>{{item}}</td>
</tr>
7.AngularJS中的DOM與事件
1、ng-disabled="true/false";
傳入true表示禁用阅羹，傳入false表示可用
<button ng-disabled="!myCheck">按鈕</button>
<label>
<input type="checkbox" ng-model="myCheck" />是否同意勺疼！
</label>
<p>{{myCheck}}</p>
2、ng-show 是否顯示
傳入true表示顯示捏鱼，傳入false表示隱藏
<hr />
<label>
<input type="checkbox" ng-model="myShow" />是否顯示恢口！
</label>
<p ng-show="myShow">我顯示出來啦！Ｇ钤辍耕肩！</p>
3因妇、ng-hide 是否隱藏
<label>
<input type="checkbox" ng-model="myHide" />是否隱藏！
</label>
<p ng-hide="myHide">我顯示出來啦Ｔ持睢；楸弧！</p>
4梳虽、ng-if： 是否移除元素
當傳入true顯示址芯，傳入false時移除。
效果與ng-show相同窜觉，但是ng-show和ng-hide只是隱藏元素谷炸，而ng-if是將元素從DOM中直接移除！
<label>
<input type="checkbox" ng-model="myIf" />是否移除禀挫！
</label>
<p ng-if="!myIf">移除Ｑ浮！语婴！</p>
5描孟、ng-bind-html : 相當于 innerHTML
而ng-bind 相當于 innerText
注意：要使用ng-bind-html，必須導(dǎo)入angular-sanitize.js文件進行安全驗證砰左。
同時需要在聲明模塊的時候匿醒，在數(shù)組中注入安全驗證模塊'ngSantize'
<div ng-bind-html="html"></div>
6、ng-checked 設(shè)置復(fù)選框或單選框的選中狀態(tài)缠导。
傳入true設(shè)置當前復(fù)選框被選中廉羔。
<input type="checkbox" ng-model="all" /> Check all<br /><br />
<input type="checkbox" ng-checked="all" /> 123<br />
<input type="checkbox" ng-checked="all" /> 456<br />
<input type="checkbox" ng-checked="all" /> 789<br />
7、ng-class：用于設(shè)置給元素添加class類僻造。
可選值有以下幾種情況：
① 可以是字符串憋他。表示直接給元素添加對應(yīng)的class。多個class之間嫡意，用空格分隔举瑰。
② 可以是對象捣辆。對象的鍵表示class名字蔬螟，對象的值為true或false，當值為true時表示添加對應(yīng)的class汽畴。
③ 可以是數(shù)組旧巾，數(shù)組中的值可以是字符串或?qū)ο螅袛嘁?guī)則同上忍些。
<div ng-class="'div div2'">這是一個div</div>
<label>
<input type="checkbox" ng-model="myClass" />給div添加樣式鲁猩？
</label>
<div ng-class="{'div':myClass,'div1':!myClass}">這是一個div</div>
<div ng-class="[{'div':myClass,'div1':!myClass},'div3']">這是一個div</div>
8、ng-switch 根據(jù)變量的值
選擇不同的ng-switch-when來顯示罢坝，當沒有合適的選項時廓握，顯示ng-switch-default
8、AngularJS中的表單和輸入驗證
1、表單中隙券，常用的驗證操作：
$dirty 表單有填寫記錄
$valid 字段內(nèi)容合法的
$invalid 字段內(nèi)容是非法的
$pristine 表單沒有填寫記錄
$error 表單驗證不通過的錯誤信息
2男应、驗證時，必須給form和input娱仔，設(shè)置name屬性沐飘。
給form和input設(shè)置name后，會自動將表單信息綁定到$scope作用域中牲迫。
所以可以直接使用formName.inputName.$驗證操作 得到驗證結(jié)果耐朴。
例如：
formName.inputName.$dirty = "true"； 表示表單被填寫過盹憎！
formName.inputName.$invalid = "true"筛峭； 表示表單輸入內(nèi)容不合法！
formName.inputName.$error.required = "true"脚乡； 表示設(shè)置了必填蜒滩，但是沒有輸入！
注意：$error支持的驗證：required/minlength/maxlength/partten/eamil/num/date/rul等
3奶稠、為了避免AngularJS的驗證與HTML5的表單驗證沖突８┘琛！比如說 type="email" required等锌订，H5也會進行驗證竹握，那么可以給form添加"novalidate"屬性，禁用HTML5的驗證功能辆飘。
<div class="container" style="width: 500px;margin: 50px auto;padding: 0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title text-center">
用戶注冊
</div>
</div>
<div class="panel-body">
<form class="form-horizontal" name="form" novalidate>
<div class="row">
<div class="col-xs-3">用戶名</div>
<div class="col-xs-9">
<input type="text"class="form-control"name="name" ng-model="user.name"
ng-minlength="6" ng-maxlength="12"/>
<p style="margin: 0px; color: red;" ng-show="form.name.$invalid && form.name.$dirty">
<span ng-show="form.name.$error.required">用戶名必須填寫</span>
<span ng-show="form.name.$error.minlength">用戶名長度最小為6位</span>
<span ng-show="form.name.$error.maxlength">用戶名長度最大為16位</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3">郵箱：</div>
<div class="col-xs-9">
<input type="email" class="form-control" name="email" ng-model="user.email" required/>
<p style="margin: 0px;color: red;" ng-show="form.email.$invalid && form.email.$dirty">
<span ng-show="form.email.$error.required">郵箱必須填寫</span>
<span ng-show="form.email.$error.email">郵箱不合法</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3" >密碼：</div>
<div class="col-xs-9">
<input type="password"class="form-control"name="pwd" ng-model="user.pwd"
pattern="^\w{6,18}$" required/>
<p style="margin: 0px; color: red;" ng-show="form.pwd.$invalid && form.pwd.$dirty">
<span ng-show="form.pwd.$error.pattern">密碼只能由6-18位的字母啦辐、數(shù)字、下劃線</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3" >確認密碼：</div>
<div class="col-xs-9">
<input type="password"class="form-control" name="repwd" ng-model="user.repwd" required/>
<p style="margin: 0px; color: red;" ng-show="user.pwd!=user.repwd && form.repwd.$dirty">
兩次密碼輸入不一致
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<input type="submit" value="注冊" class="btn btn-success" ng-disabled="form.$invalid||user.pwd!=user.repwd"/>
</div>
<div class="col-xs-5">
<input type="reset" value="重置" class="btn btn-warning"/>
</div>
</div>
</form>
</div>
</div>
</div>
9.AngularJS中的動畫
在AngularJS中使用動畫：
1蜈项、導(dǎo)入angular-animate.js
2芹关、如果頁面中沒有自定義的app模塊，則可以直接綁定系統(tǒng)模塊ng-app="ngAnimate"
如果頁面中有自定義的app模塊紧卒，則可以在自定義模塊的數(shù)組中侥衬，注入ngAnimate。
angular.module
3跑芳、當使用ng-show轴总、ng-hide顯示或者隱藏元素的時候，系統(tǒng)會自動添加或者移除博个，ng-hide這個class類怀樟。
4、當使用ng-if/ng-switch/ng-repeat等其他指令盆佣，需要分別設(shè)置顯示后和隱藏后的兩種class樣式往堡；
顯示后的class： .ng-enter-active,.ng-leave{}
隱藏后的class： .ng-enter,.ng-leave-active{}
