angularjs 1.3.16 使用 html5mode 路由，url 正在更新，但内容没有更新答案

【问题标题】：angularjs 1.3.16 routing with html5mode, url is updating but content not updatingangularjs 1.3.16 使用 html5mode 路由，url 正在更新，但内容没有更新
【发布时间】：2017-08-12 13:35:18
【问题描述】：

我们使用 AngularJS 版本 1.3.16 和 nodeJS 作为后端，ng-route 用于角度路由。工作代码由 #!作为节点和角度的 URL 分隔符。

示例网址： /store/1234/#!/部门/生产 /store/1234/#!/department/produce/category/fruits

NodeJS 路由代码：

    app.get('/store/:storeid', ctrl.storeView);

角度路由代码：

      $routeProvider.when('/department/:deptIndex', {
    controller: 'CartController',
    resolve: {
        // I will cause a 1 second delay
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 1000);
            return delay.promise;
        }
    }
}).when('/department/:deptIndex/category/:catIndex', {
    controller: 'CartController',
    resolve: {
        // I will cause a 1 second delay
        delay: function ($q, $timeout) {
            var delay = $q.defer();
            $timeout(delay.resolve, 1000);
            return delay.promise;
        }
    }
});
$locationProvider.html5Mode(false).hashPrefix('!');

为了使 URL 对 SEO 友好且可抓取，我们必须从 URL 中删除 hashbang。因此，当我们尝试启用 html5 模式时，就会出现问题。启用该模式后，角度路由不起作用。

【问题讨论】：

您能否详细说明“不工作”的含义？是否抛出错误？屏幕是空白的吗？有什么路线有效吗？
您的代码适用于 $locationProvider.html5Mode(false) ??
@BOSS 是的，我的代码禁用了 html5mode。
@AJFunk “不工作”在我的意义上意味着 url 得到更新但部分未显示。我可以看到我的角度路线没有得到匹配。它总是在 ng-route 中以其他方式进行
你用的是什么网址？？没有 html 5 和 html 5

标签： angularjs node.js routing ngroute html5mode

【解决方案1】：

每个路由都应该有一个模板或者一个模板 URL，并且你的 HTML 应该有 ng-view 来查看路由内容

【讨论】：

是否必须使用模板或模板 URL？我没有在我的代码中的任何地方使用它们。如果禁用 html5mode，我的路由绝对可以正常工作。
您的代码在没有模板或模板URL 的情况下仍然可以工作，但您将了解使用路由的全部意义。您的问题描述中的“内容未更新”是什么意思

【解决方案2】：

您是否在 index.html 中设置了基本 url？

<head>
  <base href="/">
</head>

您还需要将 html5mode 设置为 true 并删除 hashPrefix

$locationProvider.html5Mode(true);

【讨论】：

【解决方案3】：

一旦我将基本 href 更新为节点服务器 url，我的路由就开始工作了：

<head> <base href='/store/'+store.storeCode> </head>

我还更新了以 Store Code 为前缀的 Angular 路由 url，例如：

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/:storeid/department/:deptIndex', {
    //my routing code
});

【讨论】：

它对谷歌机器人有用吗？我有一个 html5mode 的网站，网址中没有散列，但 googlebot 仍然将它们视为重复项:(