一、開端

真的是忙完這一陣子就可以忙下一陣子了啊。。。

最近在做一個(gè)angularJS+Ionic的移動(dòng)端項(xiàng)目。。。記錄一些技巧，方便自己以后查閱，也方便需要學(xué)習(xí)angularJS的人可以看一看...^_^

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

①angular的一些入門了解

一、基礎(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ù)過濾操作，有$filter服務(wù)。

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

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

7.$scope是一個(gè)樹型結(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頁面最常用且實(shí)用的angular內(nèi)置指令

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

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

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

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

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

建議的兩種使用方式：

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

1 2	<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ǔ)類為icon,ng-class則綁定了一個(gè)動(dòng)態(tài)的類，而這個(gè)類要取哪一個(gè)值則由AccountInfo.isFocus的值是true或者false來決定，若其值為true

則i標(biāo)簽會(huì)添加ion-ios-heart這個(gè)類，若其值為false則i標(biāo)簽會(huì)添加ion-ios-heart-outline

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

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

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

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

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

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

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

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

例子如下：

1 2 3 4 5 6 7 8 9 10

<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í)際開發(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 指令，如果匹配選中選擇顯示，其他為匹配的則移除。

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

例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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(這里主要說一下ng-model神奇的小坑坑)

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

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

如下代碼：

1 2 3 4

<div class="WhatISay">     <textarea name="my-massage-detail" ng-model="content" placeholder="請(qǐng)輸入留言">     </textarea>     <a class="button btn"ng-click="submitMes()">提交</a><br></div>

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

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

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

html代碼：

1 2 3 4 5

<div class="WhatISay">     <textarea name="my-massage-detail" ng-model="model.content" placeholder="請(qǐng)輸入留言">     </textarea>     <a class="button btn"ng-click="submitMes()">提交</a> </div>

controller代碼：

1 2 3 4 5 6

$scope.model = {}; $scope.model.content = '';   $scope.submitMes=function(){    console.log($scope.model.content); }

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

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

例子如下：

1 2 3 4 5 6 7

//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)過深，又可以針對(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ì)象可以通過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)的縮寫。

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

defer():用來生成一個(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      類型的參數(shù)的一個(gè)包裝而已，被傳入的這個(gè)promise對(duì)應(yīng)的defer發(fā)送的消息，會(huì)被我們when函數(shù)返回的promise對(duì)象所接收到。

具體用法如下：

在angular中，定義一個(gè)專門用來交互的服務(wù)。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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。

暫時(shí)就總結(jié)到這里吧。。。6_6

 

原文來自：博客園/小蚊