整合jQuery Mobile+AngularJs 经验谈

时间 2019-11-06

标签整合 jquery mobile+angularjs mobile angularjs 经验栏目 JQuery 繁體版

原文原文链接

二者都是不错的JS编程框架，可是各自用途不一样jquery

1. jQuery Mobile提供了不错的图形空间，以及依赖于jQuery自己，提供了很多空间操做的APIgit

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

因而，开始有些开源的项目把二者整合在一块儿，好比编程

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">app

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，好比ide

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集成在微信下面，有兴趣的同时能够扫描，因为测试微信号关注有限，我会按期删除关注

1. jQuery事件整合
2. 混合开发经验之谈-3TH
3. Nodejs经验谈
4. jquery插件整合
5. JQuery UI datepicker 经验
6. jquery mobile小经验
7. RSA 经验之谈
8. php 经验之谈
9. Xamarin.Android经验之谈
10. seajs如何整合jquery
更多相关文章...
• Spring整合Redis详细步骤 - Redis教程
• Hibernate整合EHCache实现二级缓存 - Hibernate教程
• 漫谈MySQL的锁机制
• Docker容器实战(八) - 漫谈 Kubernetes 的本质