文档章节

整合jQuery Mobile+AngularJs 经验谈

工程师楚门
 工程师楚门
发布于 2014/03/12 10:58
字数 761
阅读 5040
收藏 119

两者都是不错的JS编程框架,但是各自用途不同

1. jQuery Mobile提供了不错的图形空间,以及依赖于jQuery本身,提供了不少空间操作的API

2. Angular没有啥控件,但是是一个很好的JS的MVC框架,以及提供了空间的数据绑定功能。


于是,开始有些开源的项目把两者整合在一起,比如

https://github.com/opitzconsulting/jquery-mobile-angular-adapter

但是有了这个adapter,两者就可以很好的工作了么,NO。有些问题,比如 两者page加载方式是不一样的,对于每个page, Angular是导航的使用route在需要的时候把page片段加载到浏览器的,URL类似于http://angular.github.io/angular-phonecat/step-7/app/#/phones/motorola-xoom-with-wi-fi,注意在#后面才是真正的资源地址,然后初始化资源对应的controller,,这样你可以初始化显示数据。然后jQuery Mobile是需要一次性把所有page都加载到客户端。这样子的话,如果如果在jQuery Mobile中你为每个page定义一个angular的controller,那么初始化你的angular controller的时候页面还未显示

我们需要一个设计实现,为每个jQuery Mobile Page定义一个Angular的controller,每个controller完成对应的page的数据绑定,如何实现

1. 页面开发使用jQuery Mobile, 我们为root body定义一个root的angular controller比如<body ng-controller="AppCtrl">

2. 导航问题:导航使用jQuery Mobile的$.mobile.changePage而不使用angular的route,因为页面使用的jQuery Mobile写的。页面导航除了切换page,最重要的一点是初始化页面数据,而因为在jQuery mobile下面,在页面加载阶段所有的controller都初始化了,你只能导航时在root controller里再去重新刷新显示页面的绑定数据,这样要求所有页面的绑定数据需要在root controller里面定义,按照angular的规则,所有的子controller都会继承这些数据定义。定义的时候最好使用结构而不是用primary type,这样子controller可以直接饮用,比如定义一个shop的数据结构

$scope.shop = {};
$scope.shop.catelogs = null;
$scope.shop.advices = [];
$scope.shop.child = [];
$scope.shop.products = [];

3. 我往往会个导航定义一个单独的控制器,使用它初始化page controller,比如

angular
.module(
'ngPageNav',
[],
[
'$provide',
function($provide) {
$provide
.factory(
'ngPageNavigator',
[
'$http',
function($http) {
function nav($scope,
$http, action,
data,
ignoreStack) {
.....
}
return {
nav : nav,
back : back
};
 
}
} ]);

} ]).value('name', 'ngPageNav');

3. 你调用$.mobile.changePage往往页面绑定数据变了,但是页面不会刷新page页面,最简单的处理方式是往后台send 一个dummy的请求。

4. 如果你在打开你的jQuery Mobile的时候需要直接切换到某个page,请在你的root controller里面监听jqmInit

$scope.$on("jqmInit",function() {
}

上文提到一个jQuery Mobile+Angular的一个框架应用,我做了一个demo集成在微信下面,有兴趣的同时可以扫描,由于测试微信号关注有限,我会定期删除关注

© 著作权归作者所有

共有 人打赏支持
工程师楚门
粉丝 6
博文 2
码字总数 2949
作品 0
浦东
程序员
私信 提问
加载中

评论(19)

随风osc
随风osc
Jqm的性能很烂。你再加一个AngularJS
尘封烟雨

引用来自“尘封烟雨”的评论

您好,最近刚好在尝试angular和jqm,碰到了一个问题:
a页面向b页面跳转,b页面无法识别angular。我试图在页面b加载的时候去强制初始化angular,但也失败了。请问,这种情况该如何解决?
ps:方便的话,希望您能把文中demo发给我,315764765@qq.com,谢谢

引用来自“工程师楚门”的评论

jQuery Mobile使用的是Single Page Application模式,所以整合时我把所有view都包含在一个jQuery Mobile Page里面,不使用angular的router
一个页面angular加载是没有问题的。那多个页面,有啥办法么?
工程师楚门
工程师楚门

引用来自“尘封烟雨”的评论

您好,最近刚好在尝试angular和jqm,碰到了一个问题:
a页面向b页面跳转,b页面无法识别angular。我试图在页面b加载的时候去强制初始化angular,但也失败了。请问,这种情况该如何解决?
ps:方便的话,希望您能把文中demo发给我,315764765@qq.com,谢谢
jQuery Mobile使用的是Single Page Application模式,所以整合时我把所有view都包含在一个jQuery Mobile Page里面,不使用angular的router
尘封烟雨
您好,最近刚好在尝试angular和jqm,碰到了一个问题:
a页面向b页面跳转,b页面无法识别angular。我试图在页面b加载的时候去强制初始化angular,但也失败了。请问,这种情况该如何解决?
ps:方便的话,希望您能把文中demo发给我,315764765@qq.com,谢谢
Andx
Andx
工程师楚门
工程师楚门

引用来自“翔纳尔多”的评论

用ng就好了,为什么还用jqm,理由何在,不明白,用他的控件吗?

angular没有mobile控件
蜡人
蜡人
ionicframework是王道
翔纳尔多
翔纳尔多
用ng就好了,为什么还用jqm,理由何在,不明白,用他的控件吗?
黑传说
黑传说
感觉用了angular,就不要啥jquery了,最好由angular自己发展出一个类似jquery的补充,主要是杂交感觉乱!
杨松坤
杨松坤
加油呀qq2338789729
jQuery(function(){})与(function(){})(jQuery)的区别

开发jQuery插件时总结的一些经验分享一下。 一、先看 jQuery(function(){ }); 全写为 jQuery(document).ready(function(){ }); 意义为在DOM加载完毕后执行了ready()方法。 二、再看 (functio...

xiahuawuyu
2012/07/16
0
0
20个值得开发人员关注的jQuery技术博客

John Resig - http://ejohn.org 毫无疑问,jQuery的缔造者的博客是你首先必须关注的。 2. Filmament Group Lab 这个也是必看之一,因为jQuery UI类库就出自这个网站。 3. Learning jQuery 老...

李长春
2011/11/14
0
0
[备忘]Web应用UI框架收集~

->DWZ 基于jQuery的RIA组件,一直在更新,而且它将一些优秀的组件(如jQuery.validation、xhEditor)整合进来了,并没有一味地造轮子,推荐! http://code.google.com/p/dwz ->jQuery UI 优点...

leeoo
2011/12/24
0
1
基于jQuery很牛X的批量上传插件

上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件...

voole
2013/11/16
0
0
jQuery 再探 event , jQuery 对于 DOM 的跨浏览器封装。

Javascript再探 event 事件。 我们知道浏览器中有很多的差异性,比如对于 浏览器中的 event 事件进行处理的方式, IE 明显的就和别的浏览器不一样。所以后来诞生了风靡前端的 jQuery 库。我原...

香吉士
2012/06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
3
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
8
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
3
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
5
0
RxJava threading

因为Rx针对异步系统设计,并且Rx也自然支持多线程,所以新的Rx开发人员有时会假设Rx默认是多线程的。在其他任何事情之前,重要的是澄清Rx默认是单线程的。 除非另有说明,否则每次调用onNex...

woshixin
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部