Angular 1-routeProvider在html5Mode中不起作用

问题描述 投票:0回答:1

启用html5Mode后,我的$ routeProvider不再起作用。我在this帖子中看到了相同的问题,但没有任何帮助。我什至不知道从哪里开始,因为它似乎可以在我遇到的所有其他示例中使用。

我正在使用Express路由到/ index,它工作正常,但仅显示顶部的navbarng-view不会加载,没有任何错误。

我的网址结构:

  • 之前:localhost:3000 / index#/ //在启用html5Mode之前,此方法以前有效
  • 之后: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部分中没有其他内容。我想要从这里出发的一些指导。根据我的发现,这些建议都没有奏效。我还没有添加

angular route-provider html5mode
1个回答
0
投票

我通过在/ index的路径下添加以下内容来解决它>

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

这会引起另一个问题,我的所有其他路由(不在问题中)也都被该路径捕获,例如:/ login

© www.soinside.com 2019 - 2024. All rights reserved.