当通过AngularJS启用html5Mode时$locationProvider.html5Mode(true),当您登陆网站更深的页面时,导航似乎会出现偏差.
例如:
http://www.site.com
当我导航到根目录时,我可以点击网站中的所有链接,Angular $routeProvider将接管浏览网站并加载正确的视图.
http://www.site.com/news/archive
但是当我导航到这个网址时(或者当我在像上面那样的深层链接时点击刷新...)这个导航无法正常工作.首先,我们作为$ locationProvider.html5Mode的文档指定,我们捕获服务器上的所有URL,类似于otherwiseangular中的路由,并返回与根域相同的html.但是,如果我$location从run角度函数中检查对象,它告诉我那http://www.site.com是我的host,那/archive就是我的path.在$routeProvider到达的.otherwise()条款,因为我只有/news/archive一个有效的途径.而应用程序做了奇怪的事情.
也许在服务器上的重写需要以不同的方式完成,或者我需要以角度指定东西,但是目前我还不知道为什么角度看到没有/news包含段的路径.
示例main.js:
// Create an application module
var App = angular.module('App', []);
App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/home'
})
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/login', {
templateUrl: 'templates/login.html'
})
.when('/news', {
templateUrl: 'templates/news.html'
})
.when('/news/archive', {
templateUrl: …Run Code Online (Sandbox Code Playgroud) 我使用Express 4在我的后端托管我的AngularJS应用程序,Nginx作为我的前端服务器.但是html5模式似乎不起作用,因为当我尝试http://localhost/login通过浏览器输入页面链接(例如)时,我将收到Can not/GET错误.我需要为Express/Nginx做任何路由配置吗?这是我的配置代码:
快递4:
var express = require('express'),
app = express(),
server = require('http').Server(app),
bodyParser = require('body-parser'),
db = require('./db'),
io = require('./sockets').listen(server),
apiRoutes = require('./routes/api'),
webRoutes = require('./routes/web');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use('/api', apiRoutes);
app.use(express.static(__dirname + '/public'));
server.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});
Run Code Online (Sandbox Code Playgroud)
AngularJS:
'use strict';
var nodeApp = angular.module('nodeApp',['ngRoute']);
nodeApp.config(function($routeProvider, $locationProvider, $controllerProvider) {
$routeProvider.when('/', {
templateUrl: 'partials/home.html'
}).when('/login', {
templateUrl: 'partials/login.html'
});
$locationProvider.html5Mode(true);
nodeApp.controllerProvider = $controllerProvider;
});
Run Code Online (Sandbox Code Playgroud)
Nginx的:
# the IP(s) on …Run Code Online (Sandbox Code Playgroud)