AngularJS+ JqueryMobile+ PhoneGap 打造APP
转载必须附带本文地址http://blog.regou.me/?p=790，谢谢
最近在做一个项目，一个B2B的移动APP。
我是这样选择的
前端UI框架：jQueryMobile
前端MVC和页面导航：AngularJS
封包器：PhoneGap Build
AngularJS和jQueryMobile的桥接器：jQueryMobile-Angular-Adapter（以下简称Adapter）
两个著名框架融合在一起，还要让他们被封包了后还要运行OK可不容易，期间遇到了各种各样的问题，国内文档较少，于是Github、GoogleGroup、StakOverflow这些网站四处奔波提问+查资料
下面说下我遇到的问题和解决方法
-
跨域
要知道，jQueryMobile里的多页面切换是依赖Ajax的，但是打包之后是运行的地址是file:///这样的，所以 jQueryMobile的页面跳转会失效（not allowed by Access-Control-Allow-Origin），即使在Adapter的帮助下也不行。那么我们需要强制让JQM允许跨域，并且 PhoneGap里的配置要允许跨域：
/*JQM的配置，放在引用JQM的script标签之前*/
$(document).bind("mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
//关闭DOM Cache降低内存消耗
$.mobile.page.prototype.options.domCache = false;
});然后在PhoneGap的config.xml文件里：
/*widget标签的最后添加*/
<access origin="*" /> -
解决AngularJS的$http.post的XHR2 header BUG
这真的很蛋疼，谷歌你要给力点啊！
/*"app"为我们的应用的module*/
app.config(function($locationProvider,$httpProvider) {
$locationProvider.html5Mode(false);
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
}); -
解决jQueryMobile form表单的data-ajax=”false”的BUG
如果在模版页面里，form表单使用了data-ajax=”false”那么会导致此页面Ajax完全无法GET到
解决方法是直接添加个空src<form ng-submit="submit()" data-ajax="false" src="">
</form> -
不要在a标签上又加href又加ngm-vclick
ngm-vclick是Adapter的补充事件，它比ng-click或onclick在触摸屏上相应速度更快
但是a标签里有href则不要再写ngm-vclick了，ngm-vclick=“”里面为空也不行！ -
解决Adapter的Panel BUG
如果使用的是jquery2.0以上的版本，使用JQM的Panel会出现下面这个错误
Cannot read property 'options' of undefined解决方法(二选一)：
一：把jQuery降级到jQuery 1.10.1
二：直接在jqueryMobile-1.3.1.min.js里将 “mobilePage” 替换为 “mobile-page” (只有一处)
另外jQueryMobile+Angular后，是完全用不到ng-view的，$routeProvider.when里也不可以指定controller的
这两点在Adapter的说明文档里写的很清楚 -
index.html不要加载过多的JS
PhoneGap打包后，如果你首页有海量的JS，实际安装在手机里一般会直接为响应。
所以index.html改成简单的介绍页吧。真正的应用首页从main.html开始 -
Cordova Ready Service
Lastly, try this Cordova Ready Service,may help solve some problems
Thanks to Briant Ford and his articleapp.factory('cordovaReady', function() {
return function (fn) {
var queue = [];
var impl = function () {
queue.push(Array.prototype.slice.call(arguments));
};
document.addEventListener('deviceready', function () {
queue.forEach(function (args) {
fn.apply(this, args);
});
impl = fn;
}, false);
return function () {
return impl.apply(this, arguments);
};
};
});
目前大概就这么多，每天还得为3个框架和一个repository找bug，挺坑爹的不是么？
所以目前我不建议将这3个组合（严格的说是4个）用于正式的生产环境中。
此贴我会长期更新
—————————————-
2014.6.11更新
此文章所述的jQueryMobile+AngularJS的方案已经不太优秀了。
强力推荐更优的解决方案：
Ionic
或者如评论所述的Appcan
