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

最近在做一个项目，一个B2B的移动APP。

我是这样选择的

前端UI框架：jQueryMobile

前端MVC和页面导航：AngularJS

封包器：PhoneGap Build

AngularJS和jQueryMobile的桥接器：（以下简称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
   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的方案已经不太优秀了。

强力推荐更优的解决方案：

或者如评论所述的Appcan