整合jQueryMobile+AngularJs经验谈

两者都是不错的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比如

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() {  
  
  

  
  
} 
 
 

文章名称：整合jQueryMobile+AngularJs经验谈
文章链接：http://www.shufengxianlan.com/qtweb/news16/312366.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联