html5mode中的AngularJS路由错误
[英]AngularJS routing in html5mode error
问题描述
Here is my front-end AngularJS routing: 
这是我的前端AngularJS路由：
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true).hashPrefix('!');
$stateProvider
.state('main', {
url: '/',
templateUrl: '/views/main.html',
controller: 'MainCtrl'
})
.state('review', {
url: '/review',
templateUrl: '/views/review.html',
controller: 'NewReviewCtrl'
})
.state('model', {
url: '/:make/:model',
templateUrl: '/views/model.html',
controller: 'ModelPageCtrl'
});
And here is my server-side routing (node.js): 这是我的服务器端路由（node.js）：
//...some routes
app.use('/*', function(req, res){
res.sendFile(config.rootPath + '/public/index.html');
});
With /review route, everything works fine, but not with /:make/:model : 使用/review route，一切正常，但不能使用/:make/:model ：
HTML: HTML：
<a href="" ui-sref="model({make: 'lenovo', model: 'thinkpad-t430'})">See more details...</a>
If I go to this page through that link, everything works fine, but if I refresh or go directly to localhost:3030/lenovo/thinkpad-t430 I get this error: 如果通过该链接转到此页面，则一切正常，但是如果刷新或直接转到localhost:3030/lenovo/thinkpad-t430此错误：
Uncaught Error: [$injector:modulerr] Failed to instantiate module app to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
It is probably because of the html5mode . 这可能是因为html5mode 。 And I suggest it not working with this URL because, it is a 2 level URL. 而且我建议它不适用于此URL，因为它是2级URL。
How can I fix this? 我怎样才能解决这个问题？
Edit: Express.js config: 编辑：Express.js配置：
app.set('view engine', 'ejs');
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
app.use(bodyParser());
app.use(session({secret:"some_secret"}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(config.rootPath+"/public"));
1 个解决方案
解决方案1
1 已采纳 2014-12-29 17:31:45
I created working plunker , which does use the same UI-Router setting as mentioned above. 我创建了工作的plunker ，它确实使用了与上述相同的UI-Router设置。 Everything is working. 一切正常。 So, we should know now, that the Client side should be set properly. 因此，我们现在应该知道，应该正确设置客户端。
The main and only difference is, more explicit setting, which allows us to omit <base href="/" /> in the head 主要且唯一的区别是更明确的设置，该设置使我们可以省略头部的<base href="/" />
$locationProvider
.html5Mode(
{
enabled: true,
requireBase: false,
})
Or we can use the <base> element (check the index.html <head> ) int that plunker 或者我们可以使用<base>元素（检查index.html <head> ）将其插入
Seems like the issue is on the server side, please check twice: 似乎问题出在服务器端，请检查两次：
How to: Configure your server to work with html5Mode 如何：配置服务器以使用html5Mode
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.