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节点、分配事件监听函数、进行数据绑定的监听