angularJS編碼實踐學習

AngularJS 是製做 SPA(單頁面應用程序)和其它動態Web應用最普遍使用的框架之一。我認爲程序員在使用AngularJS編碼時有一個大的列表點應該記住，它會以這樣或那樣的方式幫助到你。下面是一些我遵照的最佳實踐建議，同時也想推薦給大家。 我堅信有更多的功能也應該是這份列表的一部分，我邀請大家都來提建議或者在下面評論，從而使這個成爲完整的最佳實踐指南。

1、依賴注入

1. 依賴注入是AngularJS框架最好的特性之一，咱們應該常用它。當咱們須要對咱們的應用程序進行測試用例覆蓋時，它將真正的起到幫助。

2. 爲依賴提供別名，這樣他們不會在（JS代碼）壓縮過程當中重命名，由於在AngularJS依賴是經過命名來實現的(注：AngularJS經過控制器構造函數的參數名字來推斷依賴服務名稱的)。

angular.module(‘myApp’).controller("MyController", ["$scope&",  "MyService",function($scope, MyService) {

    // controller logic

    }

   ]);

2、做用域

1. 在templates（模板）中scope（做用域）按只讀對待。這就是說即便AngularJS容許咱們在templates中編寫代碼修改scope,咱們必須很是謹慎或者就不該該作。

2. 在controllers（控制器）中scope按只寫對待。這就是說一個controllers負責使用另外一個組件,就像一個服務,獲取template 將要顯示的數據和把數據寫到scope的一個對象中。

• 做爲一個經驗法則,咱們必須老是在綁定時使用」.「。這就是說咱們應該綁定到scope的對象,而不是直接的屬性,不然可能會在子$scope致使意外的行爲,由於$scope基於Java-script的原型繼承機制。
• 下面的代碼咱們能夠看到，superhero是scope上一個經過Superhero服務返回的對象，同時相同的對象被用來綁定在view（視圖）上。

XHTML

<div class="form-group">

    <label class="control-label" for="name">Super Power</label>

       <div class="controls">

      <input type="text" data-ng-model="superhero.superPower">

</div>

JavaScript

$scope. superhero = Superheros.get({

    superheroId: $stateParams.superheroId

)};

• 
  Scope 的目的是引用 model，而不是成爲 model。
• Model是咱們的JavaScript對象

3、驗證

1. 在form（表單）標籤中使用「novalidate」 屬性來使用 AngularJS驗證同時關閉HTML5驗證。

XHTML

<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate>

CSS2. 咱們可使用angular classes（css類）來改變可見性和驗證控件的狀態。

.ng-valid.ng-dirty{

    border-color: #FA787E;

}

.ng-invalid.ng-dirty{

    border-color: #FA787E;

}

4、內存 – 任務管理

• AngularJS在銷燬一個scope和把一個scope從它的父級移除以前會廣播一個$destroy事件。監聽這個事件對清理任務和資源是相當重要的,不然可能會繼續消耗內存或CPU。老是註冊‘destroy‘事件來刪除任何易於內存泄漏的代碼。

做爲一個例子,下面的控制器在1秒的間隔不斷更新一個mode（模型）l值,這些更新將永遠持續,即便在controller對應view消失了或者scope從父級上移除。若是用戶來回導航到一個view來加載這個controller,每次導航將添加另外一個永遠運行的計時器。

JavaScript

module.controller("MyController", function($scope, $timeout) {

    var onMyTimeout = function() {

        $scope.value += 1;

        $timeout(onMyTimeout, 100);

    };

    $timeout(onMyTimeout, 100);

    $scope.value = 0;

});

監聽$destroy事件是中止計時器的一個機會。一種方法是取消由$timeout返回的promise（承諾）。

JavaScript

module.controller("TestController", function($scope, $timeout) {var onTimeout = function() {

    $scope.value += 1;

    timer = $timeout(onTimeout, 100);

};

    var timer = $timeout(onTimeout, 100);

    $scope.value = 0;

    $scope.$on("$destroy", function() {

        if (timer) {

            $timeout.cancel(timer);

        }
    });

});

5、事件 頂級做用域

1. 咱們應該只在當前屏幕的單頁面應用程序的控制器中使用scope 事件進行通訊。若是咱們只須要共享數據,那麼咱們應該考慮使用Services(服務)。

2. 當觸發事件時,除非咱們須要把事件通知到咱們整個應用程序裏的全部單個scope，不然咱們不須要在$rootScope觸發事件。若是咱們只須要爲子scope觸發,則在當前的scope上$broadcast事件。父scope使用$emit獲取當前scope事件。這也將縮短事件傳播,而不是通過整個自上而下的流動。

3. Services 是在$rootScope監聽事件獲取通知的不二選擇。這是由於services在咱們的應用程序中只初始化一次,並無獲取它們本身的scope ,這將是很好。

4. 一般咱們不該該在$rootScope註冊事件監聽(除了service)。這是致使AngularJS應用程序產生bug的一個廣泛緣由。這是由於當咱們在一個controller 的$scope上添加一個事件監聽，而controller 被銷燬(咱們導航離開頁面,或關閉一個部分),監聽一樣被銷燬。當咱們將它添加到$rootScope，同時導航離開一個controller,監聽會保留並保持活動和觸發。因此咱們必須從$rootScope手動取消監聽,或者爲了安全乾脆就不在$rootScope上添加監聽。可是若是咱們必須爲$rootScope添加一個事件,不要忘記在controller的scope中將其清除。

var myEventHandler = $rootScope.$on("MyEvent", ‘My Data’);

      $scope.$on("$destroy", function() {

      myEventHandler();

});

5. 若是咱們知道只有一個監聽器，並且你已經遇到了。咱們能夠經過在傳遞給事件監聽函數的事件對象上調用event.stopPropagation()來中止進一步的事件傳播。

6、構建業務邏輯

1. Controllers 不該該引用DOM，而只是包含行爲，使用Directives （指令）作DOM操做。

2. Services應該對view邏輯獨立.

3. 不要與HTML打架，而是經過Directives擴展。

4. 最好是使用模塊化的文件夾結構,這樣咱們能夠建立可重用的/可分發的組件。

7、通用規則

1. 對images使用ng-src 替代src。

2. 使用promise 來處理回調。AngularJS已經爲它暴露了「$q」服務。許多AngularJS services返回promises:$http, $interval, $timeout。

3. 不要壓縮angular.min.js 由於AngularJS團隊已經經過預約義設置壓縮了angular文件,若是咱們再壓縮可能會產生破壞。因此直接使用。

4. 若是template (模板)緩存是必需的，使用$templateCache緩存html template。

5. 老是把第三方API的回調包裹到$apply，用來通知AngularJS關於環境的變化。

6. 若是咱們不想讓用戶在AngularJS加載以前顯示HTML ，使用ng-cloak directive。

XHTML

<div class="session ng-cloak">..............content............</div>

.ng-cloak {

/* this will change to block when scope and angular is ready */

display:none;

}

7. 爲了阻止任何衝突，不要在咱們本身的directives裏使用「ng」前綴。建立你的自定義的。最好使用<my–component> ,由於 <my:component>在IE有時出錯。

<my-component>

<my:component>

8. 在應用程序中爲全局相關的事件使用$broadcast() , $emit() 和 $on()(好比用戶身份驗證或應用程序關閉)。若是咱們須要特定於模塊,服務或小部件的事件，咱們應該選擇Services,Directive Controllers等。

9. 不要使用自動關閉標籤,由於有些瀏覽器不喜歡他們。使用「<product-title></product-title >」而不是「<product-title/>」。