一、開(kāi)端

Angular JS 是一組用來(lái)開(kāi)發(fā)Web頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。它提供web應(yīng)用的架構(gòu)，無(wú)需進(jìn)行手工DOM操作。 AngularJS很小，只有60K，兼容主流瀏覽器，與jQuery 配合良好。

二、基礎(chǔ)原則了解

①angular的一些入門(mén)了解

一、基礎(chǔ)知識(shí)

1.angular放棄了IE8

2.四大核心分別是mvc、模塊化、指令系統(tǒng)、雙向數(shù)據(jù)綁定

二、一些原則

1.不要復(fù)用controller，一個(gè)控制器一般只負(fù)責(zé)一小塊視圖。

2.不要在controller里面操作dom。

3.不要在contorller里面做數(shù)據(jù)格式化，ng有很好的表單控件。

4.不要在controller里面做數(shù)據(jù)過(guò)濾操作，有$filter服務(wù)。

5.一般情況下，controller是不會(huì)互相調(diào)用的，控制器之間的交互會(huì)通過(guò)事件進(jìn)行。

6.angular利用指令來(lái)復(fù)用view。

7.$scope是一個(gè)樹(shù)型結(jié)構(gòu)，與DOM標(biāo)簽平行。

8.子$scope對(duì)象會(huì)繼承父$scope上的屬性和方法。

9.每一個(gè)angular應(yīng)用只有一個(gè)$rootScope對(duì)象。（一般位于ng-app上）。

10.可以用angular.element($0).scope()進(jìn)行調(diào)試。

11.使用ngRoute進(jìn)行視圖之間的路由。

三、HTML頁(yè)面最常用且實(shí)用的angular內(nèi)置指令

①.ng-class（適用于類(lèi)似點(diǎn)贊、關(guān)注等某個(gè)樣式會(huì)因?yàn)槟硞€(gè)操作改變的情況）

ng-class 指令用于給 HTML 元素動(dòng)態(tài)綁定一個(gè)或多個(gè) CSS 類(lèi)。ng-class 指令的值可以是字符串，對(duì)象，或一個(gè)數(shù)組。

如果是字符串，多個(gè)類(lèi)名使用空格分隔。

如果是對(duì)象，需要使用 key-value 對(duì)，key 是一個(gè)布爾值，value 為你想要添加的類(lèi)名。只有在 key 為 true 時(shí)類(lèi)才會(huì)被添加。

如果是數(shù)組，可以由字符串或?qū)ο蠼M合組成，數(shù)組的元素可以是字符串或?qū)ο蟆?/P>

建議的兩種使用方式：

一、字符串形式，代碼如下：

<i class="icon" ng-class="{true:'ion-ios-heart',false:'ion-ios-heart-outline'}[AccountInfo.isFocus]" ng-click='wetherFocus()'>

</i>

這樣的意思就是，i標(biāo)簽有一個(gè)基礎(chǔ)類(lèi)為icon,ng-class則綁定了一個(gè)動(dòng)態(tài)的類(lèi)，而這個(gè)類(lèi)要取哪一個(gè)值則由AccountInfo.isFocus的值是true或者false來(lái)決定，若其值為true則i標(biāo)簽會(huì)添加ion-ios-heart這個(gè)類(lèi)，若其值為false則i標(biāo)簽會(huì)添加ion-ios-heart-outline

這個(gè)類(lèi)。i標(biāo)簽還綁定了一個(gè)ng-click的事件，在這個(gè)事件里面除了處理相應(yīng)的邏輯之外，還決定AccountInfo.isFocus的值。這樣的話，當(dāng)發(fā)生點(diǎn)擊操作的時(shí)候，自然就改變i標(biāo)簽相應(yīng)的類(lèi)，繼而表現(xiàn)出不同的樣式了。

二、key-value的樣式，代碼如下：

<i class="icon" ng-class="{'ion-ios-heart':isIos,'ion-android-heart':isAndroid}"> </i>

顯然，由代碼則可以看出，這樣的含義就是當(dāng)isIos為true的時(shí)候就會(huì)取ion-ios-heart這個(gè)類(lèi)，當(dāng)isAndroid的值為true的時(shí)候，就會(huì)取ion-android-heart這個(gè)類(lèi)。

②.ng-show和ng-hide(適用于對(duì)于不同的情況顯示兩種不同的內(nèi)容時(shí))

ng-show 指令在表達(dá)式為 true 時(shí)顯示指定的 HTML 元素，否則隱藏指定的 HTML 元素。

ng-hide 指令在表達(dá)式為 true 時(shí)隱藏指定的 HTML 元素，否則顯示指定的 HTML 元素。

哈哈，看著就是水火不容的兄弟。。。。

例子如下：

<div class="keyboard">

<span class="keyboardIcon" ng-click="toggleMenu()"></span>

</div>

<div class="footer-menu">

<ul class="menu-list" ng-show="menuState">

...

</ul>

<div class="footer-send" ng-hide="menuState">

...

</div>

設(shè)置一個(gè)布爾變量menuState（實(shí)際開(kāi)發(fā)中你可以用表達(dá)式，三目運(yùn)算式等等），當(dāng)其為true的時(shí)候，ng-show的內(nèi)容會(huì)顯示，ng-hide的內(nèi)容會(huì)隱藏。反之則反之。。。

③.ng-switch(適用于在多種情況下顯示不同的內(nèi)容時(shí))

ng-switch 指令根據(jù)表達(dá)式顯示或隱藏對(duì)應(yīng)的部分。

對(duì)應(yīng)的子元素使用 ng-switch-when 指令，如果匹配選中選擇顯示，其他為匹配的則移除。

通過(guò)使用 ng-switch-default 指令設(shè)置默認(rèn)選項(xiàng)，如果都沒(méi)有匹配的情況，默認(rèn)選項(xiàng)會(huì)顯示。

例子：

<div ng-switch="essayType">

<div class="list-cart" ng-switch-when="4">

....

</div>

<div class="list-cart left-pic" ng-switch-when="3">

....

</div>

<div class="single-pic" ng-switch-when="1">

...

</div>

<div class="single-pic" ng-switch-when="2">

...

</div>

<div class="single-pic" ng-switch-default>

...

</div>

</div>

④.ng-model(這里主要說(shuō)一下ng-model神奇的小坑坑)

ng-model 指令綁定了 HTML 表單元素到 scope 變量中。

如果 scope 中不存在變量, 將會(huì)創(chuàng)建它。ng-model常用于<input>, <select>, <textarea>等元素。

如下代碼：

<div class="WhatISay">

<textarea name="my-massage-detail" ng-model="content" class="my-massage-detail" placeholder="請(qǐng)輸入留言">

</textarea>

<a class="button btn"ng-click="submitMes()">提交</a><br></div>

按照定義，理論上來(lái)說(shuō)我們提交的時(shí)候，直接在controller里面獲取在頁(yè)面定義了的ng-model的值，是可以的。但是實(shí)際上這樣是不可行的。親測(cè)發(fā)現(xiàn)輸出了一個(gè)undefined，而且，如果在controller里面定義ng-model的初始值的話，獲取到的就是初始值而不是改變后的最新值。

查找了一些資料，大概意思就是說(shuō)。angular限制了我們的一些定義。我們只能使用一個(gè)非原始的對(duì)象來(lái)傳遞參數(shù)。

什么意思呢。稍微改一下上面的例子，如下：

html代碼：

<div class="WhatISay">

<textarea name="my-massage-detail" ng-model="model.content" class="my-massage-detail" placeholder="請(qǐng)輸入留言">

</textarea>

<a class="button btn"ng-click="submitMes()">提交</a>

</div>

controller代碼：

$scope.model = {};

$scope.model.content = '';

$scope.submitMes=function(){

console.log($scope.model.content);

}

就是我們是定義了一個(gè)對(duì)象，然后把ng-model定義為這個(gè)對(duì)象里面的一個(gè)屬性這樣來(lái)處理的。這樣子，我們就得到了ng-model的最新值了。

還有一種比較簡(jiǎn)單的方式就是直接把ng-model作為參數(shù)傳進(jìn)去就好了。

例子如下：

//HTML代碼

<input type="text" ng-model="code">

<button ng-click="setCode(code)">Login</button><br>

//controller代碼

$scope.setCode = function(code){

alert(code);

}

四、數(shù)據(jù)交互實(shí)用技巧

①Promise的利用

ES6定義了Promise對(duì)象。這個(gè)對(duì)象挺好用的，特別是用在與后臺(tái)交互的時(shí)候。既預(yù)防回調(diào)過(guò)深，又可以針對(duì)一些情況做統(tǒng)一處理，還提高了代碼的可讀性。在angularJs里面也封裝了這樣一個(gè)服務(wù)，就是$q。

$q是做為angularjs的一個(gè)服務(wù)而存在的，只是對(duì)promise異步編程模式的一個(gè)簡(jiǎn)化實(shí)現(xiàn)版。defer對(duì)象(延遲對(duì)象)可以通$q.defer()獲取，該對(duì)象有三個(gè)方法:

resolve(value):向promise對(duì)象異步執(zhí)行體發(fā)送消息告訴他我已經(jīng)成功完成任務(wù)，value即為發(fā)送的消息。

reject(value): 向promise對(duì)象異步執(zhí)行體發(fā)送消息告訴他我已經(jīng)不可能完成這個(gè)任務(wù)了，value即為發(fā)送的消息。

notify(value): 向promise對(duì)象異步執(zhí)行體發(fā)送消息告訴他我現(xiàn)在任務(wù)完成的情況，value即為發(fā)送的消息。

這些消息發(fā)送完promise會(huì)調(diào)用現(xiàn)有的回調(diào)函數(shù)。

promise即與這個(gè)defer對(duì)象的承諾對(duì)象。promise對(duì)象可以通過(guò)defer.promise獲取,promise對(duì)象的一些方法：

then(successCallback,errorCallback,notifyCallback):參數(shù)為不同消息下的不同回調(diào)函數(shù)，defer發(fā)送不同的消息執(zhí)行不同的回調(diào)函數(shù)，消息作為這些回調(diào)函數(shù)的參數(shù)傳遞。返回值為回一個(gè)promise對(duì)象為支持鏈?zhǔn)秸{(diào)用而存在。當(dāng)?shù)谝粋€(gè)defer對(duì)象發(fā)送消 息后，后面的promise對(duì)應(yīng)的defer對(duì)象也會(huì)發(fā)送消息，但是發(fā)送的消息不一樣，不管第一個(gè)defer對(duì)象發(fā)送的是reject還是resolve，第二個(gè)及其以后的都是發(fā)送的resolve，消息是可傳遞的。

catch(errorCallback):then(null,errorCallback)的縮寫(xiě)。

finally(callback):相當(dāng)于then(callback,callback)的縮寫(xiě)，這個(gè)finally中的方法不接受參數(shù)，卻可以將defer發(fā)送的消息和消息類(lèi)型成功傳遞到下一個(gè)then中。

defer():用來(lái)生成一個(gè)延遲對(duì)象 var defer =$q.defer();

reject():參數(shù)接收錯(cuò)誤消息，相當(dāng)于在回調(diào)函數(shù)中拋出一個(gè)異常，然后在下一個(gè)then中調(diào)用錯(cuò)誤的回調(diào)函數(shù)。

all()：參數(shù)接收為一個(gè)promise數(shù)組，返回一個(gè)新的單一promise對(duì)象，當(dāng)這些promise對(duì)象對(duì)應(yīng)defer對(duì)象全部解決這個(gè)單一promise對(duì)象才會(huì)解決，當(dāng)這些promise對(duì)象中有一個(gè)被reject了，這個(gè)單一promise同樣的被reject了。

when():接收第一個(gè)參數(shù)為一個(gè)任意值或者是一個(gè)promise對(duì)象，其他3個(gè)同promise的then方法,返回值為一個(gè)promise對(duì)象。第一個(gè)參數(shù)若不是promise對(duì)象則直接運(yùn)行success回調(diào)且消息為這個(gè)對(duì)象，若為promise那么返回的promise其實(shí)就是對(duì)這個(gè)promise 類(lèi)型的參數(shù)的一個(gè)包裝而已，被傳入的這個(gè)promise對(duì)應(yīng)的defer發(fā)送的消息，會(huì)被我們when函數(shù)返回的promise對(duì)象所接收到。

具體用法如下：

在angular中，定義一個(gè)專(zhuān)門(mén)用來(lái)交互的服務(wù)。

get: function (url, options) { <br> var deferred = $q.defer(); <br> showTip();

$http.get(url, options).success(function (data) {

hideTip();

if (data.Success) {

deferred.resolve(data);

} else {

deferred.reject(data.Message);

}

}).error(function (data) {

hideTip();

deferred.reject(data);

});

return deferred.promise;

}

//controller里面的調(diào)用

get('url',params)

.then(function (data) {

//這里是successCallback

},function (data) {

//這里是errorCallback

});

這樣，我們就可以在每個(gè)請(qǐng)求發(fā)出時(shí)統(tǒng)一定義一些提示，然后請(qǐng)求結(jié)束之后隱藏這些提示。這段代碼中，大概意思就是，當(dāng)請(qǐng)求成功的時(shí)候，就會(huì)調(diào)用deferred.resolve(data)，把狀態(tài)設(shè)置為成功，這樣就會(huì)自動(dòng)執(zhí)行then里面的第一個(gè)函數(shù)即successCallback，并把請(qǐng)求到的數(shù)據(jù)data傳遞進(jìn)去。而當(dāng)請(qǐng)求失敗的時(shí)候，則會(huì)調(diào)用第二個(gè)函數(shù)，即errorCallback。

以上所述是小編給大家介紹的AngularJS實(shí)用的開(kāi)發(fā)技巧