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