AngularJS1.3一些技巧

前言

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

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

 

一些技巧

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

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

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

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

 

2. ng-include引入HTML片段

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

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

 

3. ng-bind的$scope對象沒有隨着數據變化而變化

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

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

 

4. 移動觸摸（Touch）事件

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

 

5. ng-bind-html的內容無法正常的顯示在頁面中

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

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

 

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

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

 

6.  如何划分一個module

我的想法是在關系比較密切（業務邏輯）的頁面可以划為一個module，因為頁面可能存在共用service或template或directive（controller不共用），而這些元件歸屬於同個module，我們就可以不同頁面調用了。而不想關的頁面可划分為另一個module，增加代碼的清晰度。

 

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

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

 

8. 配合RequireJS使用

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

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

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

 

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會默認觸發第一個button的click事件。

 

總結

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

 

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址 ： http://www.cnblogs.com/lovesong/p/4889931.html