Angular 1 - routeProvider 在 html5Mode 下不工作

Question

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

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

我的URL结构：

之前：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');

}]);

我的 Express 应用程序：

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 部分没有其他内容。我想从这里得到一些指导。根据我的发现，None 的建议正在发挥作用。我还没有添加

Answer 1

我通过在 /index

的路径下添加以下内容来修复它

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

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

Angular 1 - routeProvider 在 html5Mode 下不工作

Angular 1 - routeProvider not working in html5Mode

angular

route-provider

html5mode