一穿香、AngularJs提供的常用的高級功能
(1)解耦應用邏輯煮嫌、數(shù)據(jù)模型和視圖
(2)Ajax服務
(3)依賴注入
(4)瀏覽歷史（使書簽和前進器净、后退按鈕能夠像在普通Web應用中一樣工作）
(5)測試
二尖淘、AngularJs中的數(shù)據(jù)綁定
1. AS創(chuàng)建實時模板來代替視圖，而不是將數(shù)據(jù)合并進模板之后更新DOM倡勇。任何一個獨立視圖組件中的值都是動態(tài)替換的
1.1 相關(guān)屬性解釋：
(1)ng-app：聲明所有被其包含的內(nèi)容都屬于這個AS應用（只有被具有ng-app屬性的DOM元素包含的元素才會受AS影響）
2.數(shù)據(jù)模型不需要同視圖進行交互逞刷，只需要包含數(shù)據(jù)和操作視圖的方法，控制器用來存放將二者綁在一起的業(yè)務邏輯
3.AS可以跟蹤和響應應用變化的方式：
當AS認為某個值可能發(fā)生變化時译隘，它會運行自己的事件循環(huán)來檢查這個值是否變“臟”。如果該值從上次事件循環(huán)運行之后發(fā)生了變化洛心，則該值被認為是“臟”值固耘。-------這個過程被稱為“臟檢查”（是檢查數(shù)據(jù)模型變化的有效手段）
這個事件循環(huán)會調(diào)用$digest()循環(huán)
4.AS使用$預定義對象-----為了表示內(nèi)部和內(nèi)置的庫函數(shù)（在AS中只要遇到$符號，都可以只把它看做一個AS對象）
5.簡單的數(shù)據(jù)綁定
5.1 相關(guān)名詞的解釋：
(1) $scope：數(shù)據(jù)模型對象词身，是一個簡單的JS對象厅目，其中的屬性可以被視圖訪問，也可以同控制器進行交互
(2)雙向數(shù)據(jù)綁定：如果視圖改變了某個值法严，數(shù)據(jù)模型會通過臟檢查觀察到這個變化损敷，而如果數(shù)據(jù)模型改變了某個值，視圖也會依據(jù)變化重新渲染
(3)ng-controller：聲明所有被它包含的元素都屬于某個控制器深啤，為當前DOM元素創(chuàng)建了一個新的$scope對象拗馒，并將它嵌套在$rootScope上
6.AS推薦在視圖中通過對象的屬性而非對象本身來進行引用綁定
三、AngularJs中的模塊
1.在AS中溯街，模塊是定義應用最主要的方式诱桂。模塊中包含了主要的應用代碼。一個應用可以包含多個模塊呈昔。每一個模塊都包含了定義具體功能的代碼
1.1 相關(guān)術(shù)語解釋：
angular.module( 'myApp',[] ); //接收兩個參數(shù)挥等，第一個是模塊的名稱，第二個是依賴列表（可以被注入到模塊中的對象列表）《======》相當于AS模塊中的setter方法堤尾，用來定義模塊的｀
注：上述方法若只傳遞一個參數(shù)肝劲，就可以用它來引用模塊，如下：
angular.module('myApp'); //這個方法用于獲取應用 《======》相當于AS模塊中的getter方法郭宝，用來獲取對模塊的引用
注：承上就可以在
angular.module('myApp');返回的對象上創(chuàng)建我們所需要的應用了
溫馨提示：開發(fā)大型應用時辞槐，我們會創(chuàng)建多個模塊來承載業(yè)務邏輯。將復雜的功能分割成不同的模塊粘室，有助于單獨為他們編寫測試
四催蝗、作用域
1.作用域是應用狀態(tài)的基礎∮兀基于動態(tài)綁定丙号，我們可以依賴視圖在修改數(shù)據(jù)時立刻更新$scope,也可以依賴$scope在其發(fā)生變化時立刻重新渲染視圖
注：AS將$scope設計成和DOM類似的結(jié)構(gòu)先朦，因此$scope可以進行嵌套（我們可以引用父級$scope中的屬性）
溫馨提示：
(1)作用域提供了監(jiān)視數(shù)據(jù)模型變化的能力。它允許開發(fā)者使用其中的apply機制犬缨，將數(shù)據(jù)模型的變化
在整個應用范圍內(nèi)進行通知喳魏。我們在作用域的上下文中定義和執(zhí)行表達式，同時它也是將事件通知給另一個控制器和應用其他部分的中介
(2)將應用的業(yè)務邏輯都放在控制器中怀薛，而將相關(guān)的數(shù)據(jù)都放在控制器的作用域中
2.AS啟動并生成視圖時刺彩，會將根ng-app元素同$rootScope進行綁定，$rootScope是所有$scope對象的最上層
注：(1) $rootScope是AS中最接近全局作用域的對象枝恋，應避免在$rootScope上附加太多的業(yè)務邏輯(這與污染JS的全局作用域是一樣的)
(2)$scope對象就像一個普通的JS對象创倔，我們可以在其上隨意修改或添加屬性
(3)$scope對象在AS中充當數(shù)據(jù)模型，但與傳統(tǒng)的數(shù)據(jù)模型不一樣焚碌，$scope并不負責處理和操作數(shù)據(jù)畦攘，它只是視圖和HTML之間的橋梁，是視圖和控制器之間的膠水
(4)$scope的所有屬性十电，都可以自動被視圖訪問到
3.在AS應用模板中常用的標記解釋：
(1)指令：將DOM元素增強為可復用的DOM組件的屬性和元素
(2)值綁定：模板語法 {{ }} 可將表達式綁定到視圖上
(3)過濾器：可以在視圖中使用的函數(shù)知押，用來進行格式化
(4)表單控件：用來檢驗用戶輸入的控件
注：AS中的指令通常不會創(chuàng)建自己的$scope，但也有例外鹃骂，比如：ng-controller和ng-repeat台盯，這兩個指令會創(chuàng)建自己的子作用域并將他們附加到DOM元素上
五、控制器
∥废摺１.控制器的作用：AS中的控制器是一個函數(shù)静盅，用來向視圖的作用域中添加額外的功能，可用它來給作用域?qū)ο笤O置初始狀態(tài)并添加自定義行為寝殴。
注：AS同其他JS框架的區(qū)別：控制器并不適合用來執(zhí)行DOM操作温亲、格式化或數(shù)據(jù)操作，以及除存儲數(shù)據(jù)模型之外的狀態(tài)維護操作杯矩。它只是視圖和$scope之間的橋梁
2.控制器的嵌套（作用域包含作用域）
2.1 名詞解釋：
(1)孤立作用域：在指令內(nèi)部創(chuàng)建的作用域
注：（1）除了孤立作用域外栈虚，所有的作用域都是通過原型繼承而來的 （他們都可以訪問父級作用域）
（2）避免在控制器中進行DOM操作和數(shù)據(jù)操作史隆，如下就是反例（不推薦）：
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.shouldShowLogin = true;
$scope.showLogin = function () {
$scope.shouldShowLogin = !$scope.shouldShowLogin;
};
$scope.clickButton = function() {
$('#btn span').html('Clicked');
}; //這是 反例 不推薦
$scope.onLogin = function(user) {
$http({
method: 'POST',
url: '/login',
data: {user: user}}
).success(function(data) {
// user});};
});
推薦：將復雜的邏輯放到指令和服務中魂务。通過使用指令和服務，我們可以將控制器構(gòu)成一個輕量且更易維護的形式泌射，如下是推薦示例：
angular.module('myApp', [])
.controller('MyController', function($scope,UserSrv) {
// 內(nèi)容可以被指令控制
$scope.onLogin = function(user) {
UserSrv.runLogin(user);
};
});
六粘姜、表達式
1.表達式和eval(javascript)非常相似，但由于表達式是由AS來處理熔酷，他們有以下顯著不同的特性：
」陆簟（1）所有表達式都在其所屬的作用域的內(nèi)部執(zhí)行，并有訪問本地$scope的權(quán)限
【苊亍（2）如果表達式發(fā)生了typeError和referenceError并不會拋出異常
『畔浴（3）不允許使用任何流程控制功能（條件控制臭猜，if/else）
（4）可以接受過濾器和過濾器鏈
2術(shù)語解釋：
⊙涸椤（1）$parse：這是一個內(nèi)部服務蔑歌，可以對表達式進行運算，這個服務能夠訪問當前所處的作用域-----表示未看懂
七揽碘、過濾器
1.過濾器的使用方式：
〈瓮馈（1）直接寫在HTML中，通過|分割
■ù獭（2）在JS代碼中通過$filter來調(diào)用過濾器劫灶，示例代碼如下：
app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);
（3）使用filter過濾器
注：使用filter過濾器時可根據(jù)第一個參數(shù)可以分三種情況：
（1）字符串
∫磋搿（2）對象
”净琛（3）函數(shù)
2.表單驗證
注：AS中的表達式驗證，比如：模式匹配滞详，只有在用戶輸入的符合正則表達式時才能獲得其值凛俱，若輸入的不正確則一直獲取不到輸入的值
如下是HTML代碼：
<input type="type" placeholder="請輸入手機號" ng-model="myTel" ng-pattern="/^1[3|4|5|7|8][0-9]{9}$/"/>
<span>我輸入的是：{{ myTel }}</span>
如下是JS代碼：
angular.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.myTel='';
$scope.$watch('myTel',function(newVal,oldVal){
console.log('新值：'+newVal);
console.log('舊值：'+oldVal);
});
});
如下是運行截圖：
相關(guān)文章的鏈接：http://www.cnblogs.com/rohelm/p/4033513.html
3.有關(guān)表達驗證的綜合案例（注：下述兩個例子不是特別好紊馏，因為不簡潔料饥，AS1.3之后推薦ngMessages）
根據(jù)用戶的輸入進行實時驗證（參考AngularJS權(quán)威教程.pdf 7.2節(jié)表單驗證）
如下是HTML代碼：
<!-- novalidate屬性規(guī)定當提交表單時不對表單數(shù)據(jù)（輸入）進行驗證。 -->
<!-- ng-submit當提交表單時會調(diào)用signupForm函數(shù) -->
<form name="signup_form" novalidate ng-submit="signupForm()">
<!-- fieldset標簽會在相關(guān)表單元素周圍繪制邊框 -->
<fieldset>
<legend>Signup Form</legend>
<button type="submit" class="button radius">Submit</button>
<div class="row">
<div class="large-12 columns">
<label>Your Name</label>
<input type="text" placeholder="name" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required />
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
<small class="error" ng-show="signup_form.name.$error.required">
你的名字是必填的
</small>
<small class="error" ng-show="signup_form.name.$error.minlength">
你的名字至少為3個字符
</small>
<small class="error" ng-show="signup_form.name.$error.maxlength">
你的名字不能超過20個字符
</small>
</div>
</div>
</div>
</fieldset>
</form>
運行結(jié)果截圖：
根據(jù)用戶的輸入進行失去焦點時的驗證
對應的HTML代碼：
<!-- novalidate屬性規(guī)定當提交表單時不對表單數(shù)據(jù)（輸入）進行驗證朱监。 -->
<!-- ng-submit當提交表單時會調(diào)用signupForm函數(shù) -->
<form name="signup_form" novalidate ng-submit="signupForm()">
<!-- fieldset標簽會在相關(guān)表單元素周圍繪制邊框 -->
<fieldset>
<legend>Signup Form</legend>
<button type="submit" class="button radius">Submit</button>
<div class="row">
<div class="large-12 columns">
<label>Your Name</label>
<!-- ng-class:用于給 HTML 元素動態(tài)綁定一個或多個 CSS 類,其值可以是對象岸啡，需要使用 key-value 對，key 為你想要添加的類名赫编，value 是一個布爾值巡蘸。只有在 value 為 true 時類才會被添加。 -->
<input type="text" ng-class="{error : signup_form.name.$dirty && signup_form.name.$invalid}" placeholder="name" name="name" ng-model="signup.name" ng-focus ng-minlength="3" ng-maxlength="20" required />
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid && !signup_form.name.$focused">
<small class="error" ng-show="signup_form.name.$error.required">
你的名字是必填的
</small>
<small class="error" ng-show="signup_form.name.$error.minlength">
你的名字至少為3個字符
</small>
<small class="error" ng-show="signup_form.name.$error.maxlength">
你的名字不能超過20個字符
</small>
</div>
</div>
</div>
</fieldset>
</form>
對應的JS代碼：
angular.module('myApp',[])
/*ngFocus指令給表單輸入字段的blur和focus添加了對應的行為擂送，添加了一個名為ng-focus
ed的類悦荒，并將$focused的值設置為true。接下來嘹吨，可以根據(jù)表單是否具有焦點來展示獨立的錯
誤信息*/
.directive('ngFocus',[function(){
var FOCUS_CLASS='ng-focused';
return {
restrict:'A',
require:'ngModel',
link:function(scope,element,attrs,ctrl){
ctrl.$focused=false;
element.bind('focus',function(evt){
element.addClass(FOCUS_CLASS);
scope.$apply(function(){
ctrl.$focused=true;
});
}).bind('blur',function(evt){
element.removeClass(FOCUS_CLASS);
scope.$apply(function(){
ctrl.$focused=false;
});
});
}
}
}]);
