jQueryMobile與AngularJS的區別

 

(1)jQuery是一個JS函數庫，簡化DOM操做。

(2)jQueryUI是一個HTML UI組件庫，適用於PC應用。

(3)TwitterBootstrap是一個CSS框架，提供了基礎樣式+HTMLUI組件庫，簡化響應式網頁的開發。

(4)GoogleAngularJS是一個JS框架，簡化了數據在頁面的操做。

(5)jQueryMobile是一個HTML UI組件庫，適用於移動應用。

 

jQuery+jQueryUI => 基於DOM操做的PC應用

jQuery+Bootstrap => 基於DOM操做的響應式應用

jQuery+Angular => X

jQuery+jQM => 基於DOM操做的移動應用

jQueryUI+Bootstrap => X

jQueryUI+Angular => 基於數據操做的PC應用

jQueryUI+jQM => X

Bootstrap+Angular => 基於數據操做的響應式應用

Bootstrap+jQM => X

Angular+jQM => 基於數據操做的移動應用

 

 

 

2.複習：AngularJS中的MVC模型

  (1)每一個Controller實例都須要使用ngController指令來建立，建立它的元素就是這個控制器對象的做用範圍——對應一個$scope

  (2)若想在全部的控制器中共享數據，能夠聲明爲$rootScope範圍內的Model數據

 

  (3)若只想在有限的幾個控制器中共享數據，能夠將這幾個控制器聲明在同一個父控制器內部

 

  「提取父控制器」的意義：在父控制器中聲明多個子控制器中共享的、重複的Model數據和Model函數。

 

 

3.補充：觸屏設備中的事件

  jQueryMobile擴展了標準的事件：

orientationchange: 瀏覽設備的方向改變

pagebeforeload: jQM使用AJAX異步加載一個Page以前

pageload: jQM使用AJAX異步加載一個Page

pagebeforecreate: jQM Page建立以前——掛到DOM樹以前

pagecreate：jQM Page被建立——掛到DOM樹

pageinit：jQM Page開始初始化——掛到DOM樹後開始初始化

pagechange: jQM 當前Page發生改變，且切換動畫完成以後

swipe：手指在屏幕上滑動

swipeleft：手指在屏幕向左滑動

swiperight: 手指在屏幕向右滑動

tap: 手指在屏幕上輕擊一下

taphold：手指在屏幕上敲擊並保持一小段時間

提示：上述事件監聽函數的綁定不能直接寫在HTML中，只能使用jQuery提供的事件綁定函數來實現：

$(...).on('swipeleft', fn);

面試題：jQM中提供的幾個page相關事件觸發順序：    pagebeforeload -> pageload -> pagebeforecreate -> pagecreate ->pageinit -> pagechange

 

 

  AngularJS基於jQM擴展了標準的事件：

注意：自定義的模塊要聲明依賴ngTouch模塊，就能夠使用觸屏相關指令：

(1)ngClick

(2)ngSwipeLeft

(3)ngSwipeRight

 

 

4.整合jQM和AngularJS

  整合目標：使用jQM簡化界面UI的編寫(處理界面) + AngularJS實現數據的雙向綁定(處理數據)。

  (1)選擇頁面切換方案：

若ngRoute作路由頁面切換，會產生不少問題；

$routeProvider.

when('/main' ,{

templateUrl: 'tpl/main.html',

controller: 'mainCtrl'

})

推薦使用jQM中的頁面切換及過場動畫:

<a href="x.html" data-transition="動畫">

$.mobile.changePage('x.html', {transition:'動畫'});

  (2)每一個Page都對應一個專有的Controller對象

<div data-role="page" ng-controller="xxCtrl">

  (3)使用jQM的頁面跳轉(超連接/JS)，加載指定的Page(聲明瞭ngController)，默認是不會被Angular實例化出Controller對象——由於Angular本身認爲以前已經檢索過整個DOM樹，已經處理完全部的ngController指令，後添加的Page所聲明的ngController不會爲Angular所理睬！——必須設法通知到Angular當前DOM樹了加載了新的聲明ngController指令的元素！—— 讓AngularJS從新編譯加載的DOM元素。

具體實現過程：

1)使用jQM提供的頁面事件監聽機制，監聽pageinit事件(說明新的Page已經掛載到DOM樹，開始初始化處理)

$('body').on('pageinit', function (event) {

    //console.log('新的Page被掛載到DOM樹啦...');

    //console.log(event);

    //event.target就是剛被掛載進來的DOM片斷

    //啓用Angular的編譯機制，編譯一遍這個DOM片斷

    var newPageScope = $(event.target).scope(); //獲取新的代碼片斷對應的做用域對象

    $(event.target).injector().   /*獲取Angular注入器*/

    invoke(function ($compile) {

      $compile($(event.target))(newPageScope); //從新編譯DOM片斷，並連接入其所須要的模型數據

      newPageScope.$digest();  //啓動$digest隊列的輪詢

    });

 

  })

 

AngularJS的啓動過程分析——瞭解 (1)啓動以前——頁面引入angular.js，此文件提供了一些angular.xx()函數 (2)啓動框架——尋找靜態DOM樹上的ngApp指令，開始引導Angular框架的啓動 (3)建立注入器($injector)——負責建立並注入全部組件所依賴的那些對象    $(document).data('$injector',   angular.injector([...])  ) (4)建立$rootScope對象 (5)編譯($compile)DOM子樹——根據指令轉換DOM節點、分配事件監聽函數、進行數據綁定的監聽