Question

我试图使AngularJS html5模式（true）与Phonegap一起使用。我做了很多搜索才发布这个，我尝试了不同的组合配置，添加＆lt; base /＆gt; meta中的标记（也尝试使用＆lt; base href =＆＃34;＆＃34; /＆gt;，＆lt; base href =＆＃34; /＆＃34; /＆gt;和＆lt; base href =＆＃34 ; /＆＃34; target =＆＃34; _self＆＃34; /＆gt;），添加.html后缀来路由端点，在.config块中添加$ delegate.history = false（如下）

$provide.decorator('$sniffer', function($delegate) {
    $delegate.history = false;
    return $delegate;
});

显然

$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);

但没有办法让它工作，添加标签和设置html5Mode为true将导致应用程序启动时出现空白屏幕。同时添加其中一个将带来相同的结果，空白屏幕。

使用＆＃34; android_asset＆＃34;添加基本标记喜欢关注

将正确加载主控制器，但然后中断路由....

使用目标属性＆＃34; _blank＆＃34;进行测试和＆＃34; _self＆＃34;值...

所以我的问题是，可以使用Phonegap和AngularJS启用html5模式吗？

我使用的是带有AngularJS 1.2.16的cordova版本3.4.1-0.1.0，在Android 4.0.4真实设备和Android AVD 4.4.2上测试

任何建议都将非常感谢！感谢

Answer 1

根据我的经验以及Raymond Camden的this comment（使用PhoneGap工作），不可能将html5mode与PhoneGap + Angular一起使用。

Answer 2

为了解决现有网站的这个问题，我在构建时添加一个angularjs常量，指示构建是否适用于phonegap。在配置时，您可以访问常量并选择应用html5mode。

//Add this portion via your build scripts e.g. grunt or gulp
//make the constant change depending on if this is a Phonegap build or not
angular.module('myAppConstants', []).constant('PhonegapConstant', true);

//How to use
angular.module('myApp', ['myAppConstants']).config(function(
    $locationProvider,
    PhonegapConstant
) {
    if(!PhonegapConstant) {
        $locationProvider.html5mode(true);
        $locationProvider.hashPrefix('!');
    }
});

Answer 3

我刚刚使用angularjs 1.5，新组件路由器和cordova（phonegap）6.0。

它有点hacky，但这就是我必须做的事情：

从html文件中删除<base href="/">标记。
设置html5模式，同时将requireBase设置为false

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

抓住cordova（phonegap）路线

// iOS Cordova catcher
//
{
    path: '/var/**',
    component: 'cordova'
},
// Android Cordova catcher
//
{
    path: '/android_asset/www/index.html',
    component: 'cordova'
}

制作一个cordova组件，然后重新路由到您喜欢的任何地方。

    if(cookieService.loggedIn()) {
        $rootRouter.navigate(['Newsfeed']);
    }
    else {
        $rootRouter.navigate(['Title']);
    }

现在您可以正常使用其余路线了。我确实遇到过这个方法的一个问题，我的所有本地图像和svgs都需要从完整路径开始，/ android_asset / www / images for android，所以我做了一个小过滤器，吐出适当的资产路径web，android和ios。

带有Phonegap和AngularJS的HTML5模式

3 个答案: