Angular 1 - routeProvider 在 html5Mode 下不工作答案

【问题标题】：Angular 1 - routeProvider not working in html5ModeAngular 1 - routeProvider 在 html5Mode 下不工作
【发布时间】：2020-04-25 09:32:50
【问题描述】：

启用 html5Mode 后，我的 $routeProvider 不再工作了。我在this 帖子中看到了同样的问题，但没有什么对我有用。我什至不知道从哪里开始，因为它似乎适用于我遇到的所有其他示例。

我正在使用 Express 路由到 /index，它工作得很好，但只显示顶部 navbar。 ng-view 没有加载，没有任何错误。

我的网址结构：

之前：localhost:3000/index#/ //这在我启用 html5Mode 之前有效
After: localhost:3000/index/ //一旦开启html5Mode就不行了

我的 index.html 文件：

<!DOCTYPE html>
  <html lang="en" ng-app="mainApp">
  <head>
    <base href="/index">
  </head>

  <body class="bg-light">
    <div navbar></div>

    <div ng-view></div>

    <script src="/jsLib/angular.min.js"></script>
    <script src="/jsLib/angular-route.min.js"></script>
    <script src="/angular/angularApp.js"></script>
    <script src="/jsLib/angular-sanitize.min.js"></script>
    <script src="/jsLib/angular-animate.min.js"></script>
  </body>

  </html>

我的 angularApp.js 文件：

var mainApp = angular.module('mainApp', ['ngRoute', 'ngAnimate']);

mainApp.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true).hashPrefix('');

    $routeProvider
    .when('/', {templateUrl : '/partial/wall/feed.html', controller  : 'wallMainController'})

  });

mainApp.directive('navbar', function(){
    return{
        templateUrl: 'partial/template/navbar.html'
    };
});

mainApp.controller('wallMainController', ['$scope', function($scope){

  consolel.log('wallMainController loaded');

}]);

我的快递应用：

var express = require('express');
var app = express();
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var fs = require('fs');
var router = express.Router();

app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('hogan-express'));
app.set('view engine', 'html');
app.locals.delimiters = '<% %>';
app.use(express.static(path.join(__dirname, 'public')));
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

router.get('/', function(req, res){
    res.redirect('/index');
});

router.get('/index', function(req, res, next){
    res.render('index');
});

app.listen(3000, function(){
    console.log('App is working on Port 3000');
});

我最终看到的只是网站上的导航栏，而 ng-view 部分中没有其他内容。我想从这里得到一些指导。根据我的发现，这些建议都没有奏效。我没有添加

【问题讨论】：

标签： angular route-provider html5mode

【解决方案1】：

我通过在 /index 的路径下添加以下内容来修复它

router.get('/*', function(req, res, next) {
  res.sendfile('./views/index.html')
});

这会导致另一个问题，即我的所有其他路线（不在问题中）也被这条路径捕获，例如：/login，但我会单独研究。这个问题解决了

【讨论】：