angular學習筆記

shjavadown發表於2016-04-10
Angular筆記

今天開始正式學習angularJS了  跟著大神的步伐一步步的，不過呢筆記還是要記的，加深印象，還可以回看

AngularJS有五個主要核心特性，如下介紹：

  • 雙向資料繫結 —— 實現了把model與view完全繫結在一起，model變化，view也變化，反之亦然。
  • 模板 —— 在AngularJS中，模板相當於HTML檔案被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AuguarJS把模板當做DOM來操作，去生成一些指令來完成對view的資料繫結。
  • MVVM —— 吸收了傳統的MVC設計模式但又不是傳統意義上的MVC，更接近於MVVM(Moodel-View-ViewModel)。
  • 依賴注入 —— AngularJS擁有內建的依賴注入子系統，可以幫助開發人員更容易的開發，理解和測試應用。
  • 指令 —— 可以用來建立自定義的標籤，也可以用來裝飾元素或者操作DOM屬性。

為什麼要用angular

  • 前後端分離，後端只提供資料介面，路由，模板渲染等都在前端完成
  • html和js分離,展示和邏輯分離
  • 減少JS程式碼,減少DOM元素查詢，事件繫結等程式碼
  • 適合API開發

AngularJS應用引導過程有3個重要點：

  1. 注入器(injector)將用於建立此應用程式的依賴注入(dependency injection)；
  2. 注入器將會建立根作用域作為我們應用模型的範圍；
  3. AngularJS將會連結根作用域中的DOM，從用ngApp標記的HTML標籤開始，逐步處理DOM中指令和繫結。
    一旦AngularJS應用引導完畢，它將繼續偵聽瀏覽器的HTML觸發事件，如滑鼠點選事件、按鍵事件、HTTP傳入響應等改變DOM模型的事件。這類事件一旦發生，AngularJS將會自動檢測變化，並作出相應的處理及更新。
Angular.js應用的動態性和響應能力，都要歸功於指令屬性，常見的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

ng-model原理

  1. angular載入完成之後會啟動，首先找 ng-app指令
  2. 找到後認為ng-app裡面的所有的內容都歸angular來管
  3. 找子層標籤裡所有的指令，然後就可以找到ng-model
  4. 找到後會生成資料模型，然後掛在根作用域上面。
  5. 然後下面所有的標籤都可以讀取ng-model的值。

使用MVVM模式有幾大好處：

  1. 低耦合：View可以獨立於Model變化和修改，一個ViewModel可以繫結到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。

  2. 可重用性：可以把一些檢視的邏輯放在ViewModel裡面，讓很多View重用這段檢視邏輯。

  3. 獨立開發：開發人員可以專注與業務邏輯和資料的開發(ViewModel)。設計人員可以專注於介面(View)的設計。

  4. 可測試性：可以針對ViewModel來對介面(View)進行測試。

angular.module()建立、獲取、註冊angular中的模組

// 傳遞引數不止一個,代表新建模組;空陣列代表該模組不依賴其他模組
var createModule = angular.module("myModule", []);

// 只有一個引數(模組名),代表獲取模組
// 如果模組不存在,angular框架會拋異常
var getModule = angular.module("myModule");

該函式既可以建立新的模組，也可以獲取已有模組，是建立還是獲取，通過引數的個數來區分。

angular.module(name, [requires], [configFn]);

- name：字串型別，代表模組的名稱；
- requires：字串的陣列，代表該模組依賴的其他模組列表，如果不依賴其他模組，用空陣列即可；
- configFn：用來對該模組進行一些配置。

現在我們知道如何建立、獲取模組了，那麼模組究竟是什麼呢？
官方的Developer Guide上只有一句話：You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
模組是一些功能的集合，如控制器、服務、過濾器、指令等子元素組成的整體。

控制器
  • 不要試圖去複用controller,一個控制器一般只負責一小塊檢視
  • 不要在controller中操作DOM，這不是控制器的職責，是指令的職責。
  • 不要在controller裡做資料格式化，ng有很好用的過濾器實現此功能。
  • 不要在controller裡面做資料過濾操作，ng有$filter服務
  • 一般來說，controller是不會互相呼叫的，控制器這間的互動是通過事件進行的。

scope特點

  • $scope 是一個 POJO （Plain Ordinary Java Object）簡單的Java物件
  • $scope 提供了一些工具方法$watch/$apply()
  • $scope 是表示式的執行環境，或者說叫作用域
  • $scope 是一個樹型結構，與DOM標籤平行
  • 每一個angular應用都有一個根作用域 $rootScope, 位於ng-app上
  • $scope可以傳播事件，類似DOM事件，可以向上下可以向下
  • $scope不僅是MVC的基礎，也是後面實現雙向資料繫結的基礎,應用開始先找rootScope,然後把下級scope附加到rootScope上從而形成樹型結構。

scope生命週期

建立(Creationd)

在建立控制器或指令時，angularjs會用$injector建立一個新的作用域，並在這個新建的控制器或指令時把作用域傳進去

連結

scope物件會附加或連結到檢視。這些作用域將會註冊當 angular上下文中發生變化時需要執行的函式
$watch->註冊監控(Watcher registration)變化時執行的回撥函式

更新

事件迴圈執行時，頂級的$rootScope和每個子作用域都執行自己的髒值檢查。每個監控函式監控變化，檢測到變化後，$scope會觸發指定的回撥函式。

銷燬

當scope在檢視中不在需要時，會清理和銷燬自己。
$scope.$destroy();


相關文章