AngularJS Cordova 基本 href。

Question

尝试为AngularJS HTML5 Web应用程序设置正确的base href值以在Cordova中工作

最初使用$locationProvider.html5Mode(true)和<base href="/">：

• 应用程序在普通浏览器中完美运行
• Cordova会出现资源错误，如CSS / JS /模板等
  （我认为它在Cordova根目录而不是平台根目录中查找资源）

尝试了一些在SO和ui-router FAQs中传播的替代方案：

<base href=".">与this答案中的html5模式：

• 在cordova中找到了资源（没有资源错误）
• ui-router进入了无限循环并出现以下错误信息
  Error: Failed to execute 'pushState' on 'History': A history state object with URL 'https://page/' cannot be created in a document with origin https://example.com

<base href="./"> 与html5模式：

• 在cordova中找到了资源（没有资源错误）
• 给了我可怕的 Error: 10 $digest() iterations reached. Aborting! 消息 尝试使用frankwallis solution提到的 here，但没有帮助（同样的错误）

没有base href和$locationProvider.html5Mode({enabled: true, requireBase: false});

• 在cordova中找到的资源（没有资源错误）
• 页面开始在自身内部加载?? ...就像在某些状态下angular会启动两次一样？

我的应用程序配置定义如下：

myApp.config(['$locationProvider', '$urlRouterProvider', '$stateProvider', '$stickyStateProvider', function($locationProvider, $urlRouterProvider, $stateProvider, $stickyStateProvider) {

    $locationProvider.html5Mode(true);

    $stateProvider
    .state('root', {            // we define a 'root' state so that we can load some essential data prior to any template being loaded
        url: '',
        abstract: true,
        sticky: true,
        views: {
            'root': {
                template: '<ui-view/>',
            }
        }
    })
    .state('root.worldmap', {
        url : '/worldmap',
        templateUrl : 'templates/worldmap.tmpl.html'
    })
    .state('root.faq', {
        url : '/faq',
        templateUrl : 'templates/faq.tmpl.html'
    })
    .state("otherwise", {
        url: "*path",
        views: {
            'root': {
                template: "",
                controller: ['$injector', function($injector) {
                    var $state = $injector.get("$state");
                    $state.go('root.worldmap');
                }]
            }
        },
    });
    $stickyStateProvider.enableDebug(true);
}]);

提示：使用cordova的此方法代替angular.element在cordova和浏览器中分别进行引导

- goredwards

Answer 1

好的，让这个工作起来的方法是删除基本的 href 并且禁用 HTML5 模式:

• [optional] create & checkout a new branch called dev-cordova or similar
  • this allows you to switch quickly between browser and device code
• delete / comment the <base href="/"> in the main index.html

• ensure that html5 mode is disabled in app.js by either

  $locationProvider.html5Mode({
      enabled: false,
      requireBase: false
  });
  

  or

  $locationProvider.html5Mode(false);
  

不要忘记运行 cordova build ios（在使用 grunt / gulp 等编译 js 文件后）
...这将确保 cordova /platforms/ios/www 目录中的文件得到更新。

- goredwards

---

我的图片无法加载。 我正在使用路径./images/logo.png和images/logo.png。 有什么想法吗？ - Divyesh Savaliya