转载必须附带本文地址http://blog.regou.me/?p=790，谢谢

最近在做一个项目，一个B2B的移动APP。
我是这样选择的
前端UI框架：jQueryMobile
前端MVC和页面导航：AngularJS
封包器：PhoneGap Build
AngularJS和jQueryMobile的桥接器：jQueryMobile-Angular-Adapter（以下简称Adapter）

两个著名框架融合在一起，还要让他们被封包了后还要运行OK可不容易，期间遇到了各种各样的问题，国内文档较少，于是Github、GoogleGroup、StakOverflow这些网站四处奔波提问+查资料
下面说下我遇到的问题和解决方法

1. 跨域

   要知道，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="*" />

2. 解决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';
   });

3. 解决jQueryMobile form表单的data-ajax=”false”的BUG

   如果在模版页面里，form表单使用了data-ajax=”false”那么会导致此页面Ajax完全无法GET到
   解决方法是直接添加个空src

   <form ng-submit="submit()" data-ajax="false" src="">
   </form>

4. 不要在a标签上又加href又加ngm-vclick

   ngm-vclick是Adapter的补充事件，它比ng-click或onclick在触摸屏上相应速度更快
   但是a标签里有href则不要再写ngm-vclick了，ngm-vclick=“”里面为空也不行！

5. 解决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的说明文档里写的很清楚

6. index.html不要加载过多的JS

   PhoneGap打包后，如果你首页有海量的JS，实际安装在手机里一般会直接为响应。
   所以index.html改成简单的介绍页吧。真正的应用首页从main.html开始

7. Cordova Ready Service

   Lastly, try this Cordova Ready Service,may help solve some problems
   Thanks to Briant Ford and his article

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