AngularJS學習總結

時間 2019-11-20

原文原文鏈接

在8月份一個項目機會下，決定真正完整地學習使用AngularJS 1.3，下面是我一些總結。html

PS：有些人很抵觸AngularJS這種框架，認爲它是在辦壞事，裝高調，我是認爲任何能普遍傳播的框架存在不是沒有緣由，總會有它適用的場景，真正使用了才能發覺東西好壞。前端

什麼是AngularJSjquery

首先AngularJS是一個框架，框架與函數庫的區別就在於，框架決定整個項目的開發套路，以框架爲主導，函數庫倒是以項目自己爲主導，例如jquery。它就是個雙向數據綁定的前端JS框架，雙向數據綁定是相比較於其餘框架最特別的地方，其餘特性都是圍繞它工做的。它適用於CRUD應用（增長(Create)、讀取(Retrieve)、更新(Update)和刪除(Delete)）。app

PS：截圖取自大漠窮秋，圖例意思是當模板編譯成視圖，視圖發生變化觸發數據模型變化，數據模型又會做用於視圖。框架

我時常想着一句話「當你知道一個工具的30%，你就能用它作70%的事」，因此學習一個框架的時候，不須要完完整整從頭看到尾，當了解差很少了就能夠開始幹活。開始學習AngularJS，只需知道什麼是雙向數據綁定就好了，這是最關鍵、最需明白的。異步

寫一個簡單的示例以下。函數

HTML:工具

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <script src="angular.js"></script>
    <script src="HelloAngular_bind.js"></script>
</head>
<body>
    <div ng-controller="HelloAngular">
          <p>x ：<input type="text" ng-model="x" /></p>
          <p>y ：<input type="text" ng-model="y" /></p>
          <p>x  +  y ：<span ng-bind="x*1+y*1"></span></p>
    </div>
</body>
</html>

JS:性能

function HelloAngular($scope) {
    $scope.x = 1;
    $scope.y = 2;
}

PS：例子感覺一下就行，沒有必要深究，但應該對data與view的互相影響有些感受。學習

AngularJS有什麼

除了最重要的雙向數據綁定，AngularJS有如下元件，其中Controller、Directive是最爲重要的。

PS：截圖取自大漠窮秋

在個人項目裏，使用最可能是Directive、Controller，瞭解這兩個元件我以爲就差很少了，其餘用到時再查就行。

1. Module

做爲模塊組織者，包含其餘AngularJS元件。

2. Controller

負責跟View溝通，不處理任何跟DOM有關的工做

PS：當你的Controller裏面寫了DOM操做時，就應該檢討代碼是否寫得有問題了。

3. Directive

相似於HTML標籤，能夠定義標籤的行爲，全部與DOM相關的操做都應該寫在這裏。

PS：儘可能不用DOM操做，但可能仍是會須要用到，用到時就要在Directive裏用。

4. Service

寫能夠獨立運做的代碼（與View無關），共用於元件（例如控制器）之間，不該該處理任何跟DOM有關的工做。

5. Filter

對數據作一些修理，不該該處理任何跟DOM有關的工做。

6. Config

用來定義路由規則，不該該處理任何跟DOM有關的工做。

上面是一些教程結合我本身的總結，最常強調注意一點是對DOM操做的地方。對於這些元件我沒有舉例子，貼代碼沒什麼意思，若是想學習的，仍是要本身去實踐。

雙向數據綁定

雙向數據綁定是個重要的特性，值得咱們搞明白他的原理。當View中有數據發生了變化，這個變化會反饋到Model的scope的數據上，而當scope數據發生變化時，View中的數據也會更新到最新的值。

三個方法

在說明原理前，有三個scope重要的方法須要解釋，分別是$apply、$digest、$watch。

1. $watch

註冊一個watcher，監聽scope的數據，當數據變化時候調用回調函數。第一個參數是被監聽的數據，第二個參數是回調函數。

$scope.$watch('xxx', function(newValue, oldValue) {
     //update the DOM with newValue
});

2. $digest

檢查scope中的數據是否發生了變化，若是變化則關聯到該watcher的回調函數就會被執行。

3. $apply

這方法是調用$rootScope.$digest()，在$rootScope開始$digest，隨後會訪問到全部的children scope中的watchers。$apply()方法有兩種形式。第一種會接受一個function做爲參數，執行該function而且觸發一輪$digest循環。第二種會不接受任何參數，只是觸發一輪$digest循環。

PS：AngularJS並不直接調用$digest()，而是調用$scope.$apply()

原理

當在HTML寫下表達式如{{name}}或ng-model="name"時，AngularJS在幕後會爲你在scope模型上設置一個watcher，以下：

$scope.$watch('name', function(newValue, oldValue) {
     //update the DOM with newValue
});

當頁面JS事件觸發時，AngularJS會監視到並更改scope數據，並自動觸發一輪$digest循環，每一個關聯的watcher的回調函數被執行，最後View被更新。

注意地方

1. 有的時候你發現明明scope的數據已經改了，但你發現View並無更新。

這是由於你可能在setTimeout、異步請求等裏去修改數據，但此時AngularJS並不知道數據已經變了，不會幫你調用digest循環，因此你須要手動調用$apply。目前一些指令（例ng-click、ng-model）以及服務（例$timeout、$http）被調用時會自動觸發一次$digest循環，這些就不用手動調$apply。

setTimeout(function() {
  $scope.$apply(function() {
     //wrapped this within $apply
     $scope.name= 'lu';
  });
}, 2000);

或

setTimeout(function() {
  $scope.name= 'lu';
  $scope.$apply();
}, 2000);

2. 髒檢查(Dirty Checking)

當一個$digest循環運行時，watchers會被執行來檢查scope中的models是否發生了變化。若是發生了變化，那麼相應的listener函數就會被執行。在當前的一次循環結束後，它會再執行一次循環用來檢查是否有models發生了變化。這就是髒檢查(Dirty Checking)，它用來處理在listener函數被執行時可能引發的model變化。所以，$digest循環會持續運行直到model再也不發生變化，或者$digest循環的次數達到了10次。（這段解析來自其餘文章）

PS：$digest循環最少也會運行兩次，即便在listener函數中並無改變任何model

3. 監控的表達式不要過於複雜，表達式數量不要太多

4. 監聽函數內不要有DOM操做，那樣會顯著下降性能

5. 不能互相監聽對方會修改的屬性，以避免造成交叉引用

一些好的視頻教程

1. AngularJS初級入門教程（外國人的，講得簡單易懂）

2. AngularJS重要的開發觀念與經驗分享

3. 用AngularJS開發下一代WEB應用（大漠窮秋）

PS: helloworld代碼 (點擊下載)

總結

這篇文章我一直在說雙向數據綁定的東西，而那些依賴注入、路由、Service等我並沒涉及，是由於我以爲前者是最重要的，能講明白這一點已經夠了。

本文爲原創文章，轉載請保留原出處，方便溯源，若有錯誤地方，謝謝指正。
本文地址：http://www.cnblogs.com/lovesong/p/4870006.html