文档章节

整合jQuery Mobile+AngularJs 经验谈

工程师楚门
 工程师楚门
发布于 2014/03/12 10:58
字数 761
阅读 5048
收藏 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
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
春风得意的 jQuery

5年前,没有人听说过 jQuery,当时,它只是 JavaScript 大师 John Resig 的一个设想。今天,jQuery 已经是世界上最成功的 JavaScript 库,互联网上 28% 的网站使用 jQuery。最为开源工具,W...

红薯
2010/03/27
3.1K
7
jQuery(function(){})与(function(){})(jQuery)的区别

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

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

日期:2011/09/23 作者:Terry li - GBin1.com 1. John Resig - http://ejohn.org 毫无疑问,jQuery的缔造者的博客是你首先必须关注的。 2. Filmament Group Lab 这个也是必看之一,因为jQu...

gbin1
2011/09/23
3.9K
3
分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/19
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

一致性hash和虚拟节点

consistent hashing 算法的原理 consistent hashing 是一种 hash 算法,简单的说,在移除 / 添加一个 cache 时,它能够尽可能小的改变已存在key 映射关系,尽可能的满足单调性的要求。 下面就...

群星纪元
22分钟前
2
0
说一下Dubbo 的工作原理?注册中心挂了可以继续通信吗?

面试题 说一下的 dubbo 的工作原理?注册中心挂了可以继续通信吗?说说一次 rpc 请求的流程? 面试官心理分析 MQ、ES、Redis、Dubbo,上来先问你一些思考性的问题、原理,比如 kafka 高可用架...

李红欧巴
33分钟前
19
0
腾讯面试:一条SQL语句执行得很慢的原因有哪些?

说实话,这个问题可以涉及到 MySQL 的很多核心知识,可以扯出一大堆,就像要考你计算机网络的知识时,问你“输入URL回车之后,究竟发生了什么”一样,看看你能说出多少了。 之前腾讯面试的实...

java菜分享
51分钟前
11
0
Java 基本功 之 CAS

本文首发于个人公众号《andyqian》, 期待你的关注! 前言 在Java并发编程中,我们经常使用锁对竞争资源予以并发控制,以解决资源竞争的问题。但无论是使用 Lock 还是 Synchronized,随着锁机...

andyqian
55分钟前
4
0
信号量与条件变量的区别

注意信号量与条件变量的区别 信号量内容可见:http://www.cnblogs.com/charlesblc/p/6142868.html 信号量、共享内存,以及消息队列等System V IPC三剑客主要关注进程间通信; 而条件变量、互...

shzwork
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部