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