整合jQuery Mobile+AngularJs 经验谈

开发 前端
两者都是不错的JS编程框架,但是各自用途不同,像jQuery Mobile提供了不错的图形空间,以及依赖于jQuery本身,提供了不少空间操作的API,Angular没有啥控件,但是是一个很好的JS的MVC框架,以及提供了空间的数据绑定功能。

两者都是不错的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的数据结构

  1. $scope.shop&nbsp;=&nbsp;{};  
  2. $scope.shop.catelogs&nbsp;=&nbsp;null;  
  3. $scope.shop.advices&nbsp;=&nbsp;[];  
  4. $scope.shop.child&nbsp;=&nbsp;[];  
  5. $scope.shop.products&nbsp;=&nbsp;[]; 

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

  1. angular  
  2. .module(  
  3. 'ngPageNav',  
  4. [],  
  5. [  
  6. '$provide',  
  7. function($provide)&nbsp;{  
  8. $provide  
  9. .factory(  
  10. 'ngPageNavigator',  
  11. [  
  12. '$http',  
  13. function($http)&nbsp;{  
  14. function&nbsp;nav($scope,  
  15. $http,&nbsp;action,  
  16. data,  
  17. ignoreStack)&nbsp;{  
  18. .....  
  19. }  
  20. return&nbsp;{  
  21. nav&nbsp;:&nbsp;nav,  
  22. back&nbsp;:&nbsp;back  
  23. };  
  24. &nbsp;  
  25. }  
  26. }&nbsp;]); 

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

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

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

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

原文链接:http://my.oschina.net/trumanspace/blog/207449

责任编辑:林师授 来源: oschina
相关推荐

2009-09-14 15:04:44

2009-06-29 15:39:53

Servlet和JSPServlet引擎

2017-01-20 09:43:12

日志告警挖掘

2010-08-17 13:23:49

2015-09-16 10:13:16

游戏性能

2012-07-13 14:25:59

2011-09-09 09:50:40

Oracle

2010-12-09 13:15:31

数据中心虚拟化整合

2009-10-28 13:35:25

VB.NET共享成员

2009-02-12 10:14:00

2012-03-12 10:51:41

数据中心灾难备份

2013-04-25 09:41:33

网管高级网管网络管理

2009-07-02 11:49:44

JSP学习步骤

2009-02-19 10:50:15

DBA性格

2011-06-29 18:21:18

关键词

2013-09-04 10:08:12

移动团队经验谈

2009-10-30 11:07:04

VB.NET Syst

2016-01-11 11:20:43

2010-05-12 16:19:32

程序员面试经验

2010-01-14 20:05:43

虚拟化数据中心
点赞
收藏

51CTO技术栈公众号