angularjs科尔多瓦基地href

Posted

技术标签:

【中文标题】angularjs科尔多瓦基地href【英文标题】:angularjs cordova base href 【发布时间】:2017-04-02 01:01:32 【问题描述】:

尝试设置正确的 base href 值以使 angularjs html5 网络应用程序在科尔多瓦中工作

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

应用在普通浏览器中完美运行 cordova 给出 css / js / 模板等资源错误 (我相信它会在 cordova 根目录而不是平台根目录中寻找资源?)

在 SO 和 ui-router FAQs 上尝试了一些替代方案:

<base href="."> 使用 html5 模式,根据this 答案:

在 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 中找到资产(无资源错误) 页面开始在自己内部加载?? ...像 some 状态中的两次角引导?

我的应用配置定义如下:

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

有关信息: 分别使用替代科尔多瓦deviceready的this method vs angular.element引导用于科尔多瓦/浏览器

【问题讨论】:

【参考方案1】:

好的,所以让这个工作的方法是删除基本 href AND 禁用 html5 模式:

[可选] 创建并签出一个名为 dev-cordova 或类似名称的新分支 这使您可以在浏览器和设备代码之间快速切换 删除/评论主&lt;base href="/"&gt;中的index.html

确保 html5 模式在app.js 中被禁用

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

$locationProvider.html5Mode(false);

别忘了运行 cordova build ios(在你 grunt / gulp 等编译 js 文件之后) ...这可确保更新 cordova /platforms/ios/www 目录中的文件。

【讨论】:

图片没有为我加载。我正在使用路径 ./images/logo.png 和 images/logo.png。有什么想法吗?

以上是关于angularjs科尔多瓦基地href的主要内容,如果未能解决你的问题,请参考以下文章

$http.get() 方法在 windows 8.1 科尔多瓦上不起作用

Cordova + Angular 应用程序的屏幕覆盖问题

如何使用 angularjs 操作导航栏引导程序 4 崩溃?

IOS : Cordova App Crash on Google Map api zoom in ios 11.3 iphone x

构建android应用程序时的cordova FCMplugin问题

在 gmap 上绘制和编辑多边形节点,并将检索点作为 Angularjs 上的数组