Angular 1-routeProvider在html5Mode中不起作用 [英] Angular 1 - routeProvider not working in html5Mode
问题描述
启用 html5Mode 后，我的 $ routeProvider 不再起作用.我在此帖子中看到了相同的问题，但没有任何帮助.我什至不知道从哪里开始，因为它似乎可以在我遇到的所有其他示例中发挥作用.
After enabling html5Mode, my $routeProvider is not working anymore. I see the same issue in this post but nothing is working for me. I don't even know where to begin as it seems to work on all other examples I have come across.
我正在使用 Express 路由到/index，它可以正常运行，但只显示顶部的 navbar . ng-view 不会加载，没有任何错误.
I am using Express to route to /index which works just fine but only the top navbar is shown. The ng-view is not loading with no errors whatsoever.
我的网址结构:
- 之前:localhost:3000/index#///在启用html5Mode之前，此方法之前有效
- 之后:localhost:3000/index///启用html5Mode后，此方法将不起作用
我的index.html文件:
My index.html file:
<!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文件:
My angularApp.js file:
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应用:
My Express app:
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部分中没有其他内容.我想要从这里出发的一些指导.根据我的发现，这些建议都没有奏效. 我还没有添加
What I end up seeing is just the navbar on the site but nothing else in the ng-view section. I will like some guidance from where to go from here. None of the suggestion, from what I have found, are working. I haven't added
推荐答案
我通过在/index的路径下添加以下内容来解决此问题
I got it fixed by adding the below under the path for /index
router.get('/*', function(req, res, next) {
res.sendfile('./views/index.html')
});
这引起了另一个问题，我的所有其他路由(不在问题中)也都被该路径捕获，例如:/login ，但我将分别进行研究.这个问题解决了
This causes another issue where all my other routes (not in the question), are also caught by this path like: /login but I will look into that separately. This problem is solved
这篇关于Angular 1-routeProvider在html5Mode中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
