angularjs cordova base href

时间:2016-11-18 08:41:15

标签: angularjs html5 cordova angular-ui-router angular-ui-router-extras

尝试为angularjs html5网络应用设置正确的base href值,以便在cordova中使用

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

  • app在普通浏览器中完美运行
  • cordova为css / js / templates等提供资源错误 (我相信它在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中找到的资产(无资源错误)
  • 页面开始在自己内部加载? ...像某些状态中的两次角度引导?

我的应用配置定义如下:

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);
}]);

有关信息: 分别使用this method替代cordova deviceready vs angular.element bootstrap for cordova / browser

1 个答案:

答案 0 :(得分:5)

好的,这样做的方法是删除基本href AND 禁用html5模式:

  • [可选]创建&amp;签出一个名为knex('table').update({ x: 1, y: 2 }).update('modified_at', knex.fn.now()).where(...) // and so on. 或类似的新分支
    • 这允许您在浏览器和设备代码之间快速切换
  • 删除/评论主dev-cordova
  • 中的<base href="/">
  • 确保index.html中的html5模式已停用

    app.js

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

不要忘记运行$locationProvider.html5Mode(false); (在你grunt / gulp等编译js文件之后)
...这可以确保更新cordova cordova build ios目录中的文件。