abstract：前言     框架選擇。在上一篇文章評論中，有人說angular1.3是個過時的東西，建議使用angular2。其實這種說法很像拿jQuery1.x和jQuery2.x做比較，新的版本當然會有優(yōu)化優(yōu)勢的地方，但并不一定是最適合你項目的。當你項目必須支持IE6/7/8時，那又得使用jQuery1.x版本。所以不要以新不新去選擇一個框架或者某個版本，而是看是不是適合的。當

前言

     框架選擇。在上一篇文章評論中，有人說angular1.3是個過時的東西，建議使用angular2。其實這種說法很像拿jQuery1.x和jQuery2.x做比較，新的版本當然會有優(yōu)化優(yōu)勢的地方，但并不一定是最適合你項目的。當你項目必須支持IE6/7/8時，那又得使用jQuery1.x版本。所以不要以新不新去選擇一個框架或者某個版本，而是看是不是適合的。當初用angular1.3是他比較成熟有配套的文檔，而angular2的文檔是不健全的，另外有一點是1.x與2.x的區(qū)別太大了，兩者的用法沒有繼承性。更重要的是，目前的angular2只有Alpha版本（測試），并沒有一個正式版本。

     性能。有人說angular2的性能會比較好，我還沒有用過，不做什么評論。但對于angular1.x，我確實是不放心它的性能的，作為PC Web我敢用angular，但在移動終端我不敢用，在我看來無論從框架體積或框架運行效率，在脆弱的移動端都是致命的。有一些基于angular做的Hybrid框架（例Ionic）,希望使用過的人能告訴我它體驗怎么樣（性能上）。

一些技巧

     這篇文章記錄一些angular1.3的小技巧，angular2我會找個時間做個實踐。

1. ng-repeat多個字段排序的寫法

使用orderBy過濾器，第一個參數(shù)是一個數(shù)組，表示依次按數(shù)組中的屬性值進行排序（若按第一項比較的值相等，再按第二項比較），第二個參數(shù)是正序還是倒序（默認是正序）。

ng-repeat="groupUser in groupUsers | orderBy:['isOwner','isAdmin']:true"

2. ng-include引入HTML片段

使用ng-include，第一個參數(shù)是頁面的相對地址的字符串。應該注意，是一個字符串，不是ng-expression，所以不要忘了加單引號，否則會發(fā)現(xiàn)怎么都引不進這個HTML片段。

<div ng-include="'msgs.html'"></div>

3. ng-bind的$scope對象沒有隨著數(shù)據(jù)變化而變化

自己實現(xiàn)的ajax，獲取數(shù)據(jù)后，設(shè)置到$scope上，view卻沒有更新。這其實就是angular雙向數(shù)據(jù)的原因，angular不可預見的scope變化，是不會幫忙刷新view的（例$.ajax或setTimeout）。解決方法就是，數(shù)據(jù)設(shè)置到$scope上后，手動調(diào)$scope.$apply();。

PS：一些指令（例ng-click、ng-model）以及服務(wù)（例$timeout、$http）才會自動刷新view。

4. 移動觸摸（Touch）事件

angular-touch模塊提供了觸摸的事件和其他手勢ngSwipeLeft、ngSwipeRight。

5. ng-bind-html的內(nèi)容無法正常的顯示在頁面中

使用ng-bind-html屬性，該屬性依賴于$sanitize，也就是需要引入angular-sanitize.js文件。但會發(fā)現(xiàn)ng-bind-html的內(nèi)容無法正常的顯示在頁面中，這是因為某些標簽會被angularJS認為是不安全的自動過濾掉，而為了保留這些表情就需要開啟非安全模式。

<div ng-bind-html="article.content | trustHtml"></div>

myApp.filter('trustHtml', function ($sce) {    return function (input) { 
        return $sce.trustAsHtml(input);
    }
});

其中$sce是angular自帶的安全處理服務(wù)，$sce.trustAsHtml(input) 返回的是受信任的對象。

6.  如何劃分一個module

我的想法是在關(guān)系比較密切（業(yè)務(wù)邏輯）的頁面可以劃為一個module，因為頁面可能存在共用service或template或directive（controller不共用），而這些元件歸屬于同個module，我們就可以不同頁面調(diào)用了。而不想關(guān)的頁面可劃分為另一個module，增加代碼的清晰度。

7. 是否要把工具類弄成service

在弄工程之前，我會考慮到是否要將一些工具類封裝成一個service（為了看起來代碼統(tǒng)一），但我發(fā)覺是沒有必要的，因為service是歸屬于某個模塊的，而我們的工具類可能在不同模塊都有使用，不歸屬于某個模塊。把工具類當成一個jquery的庫引入即可。

8. 配合RequireJS使用

angular沒有異步加載模塊的功能，所以使用配合RequireJS使用的效果還是不錯的。在這里面有些異議的是對于模塊定義的地方，是該把一個模塊定義成RequireJS的模塊還是angular的服務(wù)（可以依賴注入），我覺得還是功能歸屬的問題，如果是全局使用的工具服務(wù)，就定義成RequireJS模塊，而如果是與模塊密切相關(guān)的業(yè)務(wù)邏輯就使用服務(wù)。

PS：可在RequireJS的config加上urlArgs，可以避免緩存問題。

urlArgs: "bust=" +  (new Date()).getTime()  //可用來清理緩存，在部署到生產(chǎn)環(huán)境去掉。

9. iframe打開跨域URL時報錯

<iframe width="100%" height="100%" ng-src="{{url}}"></iframe>

如果不做處理，上面的跨域URL是打不開的， 需要定義白名單。

myApp.config(function($sceDelegateProvider) {
        $sceDelegateProvider.resourceUrlWhitelist([            // Allow same origin resource loads.
            'self',            // Allow loading from our assets domain.  Notice the difference between * and **.
            "https://link.bingosoft.net/**"]);
 });

10. 使用其他Controller的scope的屬性方法

先聲明我并不清楚我的用法是否恰當。使用其他Controller的scope局限于其parent scope，而不是任何Controller的都可以訪問。scope有個屬性$parent， 通過這個屬性可以找到某一層Controller的scope。

var parentScope = $scope.$parent.$parent.$parent;

PS：多少層$parent是我打印scope對象出來找的。

11. form表單的自動提交功能

在輸入框點擊回車時候，AngularJS會默認觸發(fā)第一個button的click事件。

總結(jié)

這一篇是angular1.3的小技巧，希望有用。