node.js/angular.js - 无法获取
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14700099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
node.js/angular.js - Cannot GET
提问by isea
I have the root route and it works fine. I also have a another route 127.0.0.1:3000/dashboard if I just type that url into the address bar I get this error:
我有根路由，它工作正常。我还有另一个路由 127.0.0.1:3000/dashboard 如果我只是在地址栏中输入该 url，我会收到此错误：
Cannot GET /dashboard
无法获取/仪表板
If I create a link to the same url it works fine.
如果我创建一个指向相同 url 的链接，它就可以正常工作。
If I then refresh that page I get the same error again.
如果我然后刷新该页面，我会再次收到相同的错误。
Below is my node.js route
下面是我的 node.js 路由
app.js
应用程序.js
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, stats = require('./routes/stats')
, tests = require('./routes/test')
, http = require('http')
, util = require('util')
, path = require('path');
var app = module.exports = express();
app.configure(function(){
/*
* Configuration
*
*/
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
/*
* Middleware definitions
*
*/
app.use(express.favicon());
app.use(express.logger('dev'));
/*
* Error handling middleware
*/
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('shhhhhhhh, super secret'));
app.use(app.router);
// serves up dynamic css files
app.use(require('stylus').middleware(__dirname + '/public'));
app.use(require('less-middleware')({ src: __dirname + '/public' }));
// serves a static path
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
/*
* Endpoints
*/
app.get('/', routes.index);
app.get('/test', tests.get);
app.post('/test', tests.post);
app.options('/test', tests.options);
app.get('/stats/sends', stats.sends.get);
app.get('/stats/events', stats.events.get);
app.get('/stats/attempts', stats.attempts.get);
app.get('/stats/errors', stats.errors.get);
app.get('/stats/mquad', stats.mquad.get);
app.get('/partials/:name', routes.partials);
app.get('/index/landing', routes.landing);
app.get('/index/dashboard', routes.dashboard);
console.log('Env: ' + app.settings.env);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
routes/index.js
路线/ index.js
exports.dashboard = function(req, res){
res.render('dashboard');
};
Angular route
角度路线
'use strict';
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/landing',
controller: LandingCtrl
}).
when('/dashboard', {
templateUrl: 'partials/dashboard',
controller: DashboardCtrl
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
回答by GordyD
The reason this does not work is that your server is not catching all other routesand routing them to your single page app which is served by routes.index.
这不起作用的原因是您的服务器没有捕获所有其他路由并将它们路由到由routes.index.
In order to catch all other routes and route them to the index page so that your angular app can see if it matches the supplied url all you need to do is add the following line after your last route is declared:
为了捕获所有其他路由并将它们路由到索引页面，以便您的 angular 应用程序可以查看它是否与提供的 url 匹配，您需要做的就是在声明最后一条路由后添加以下行：
app.get('*', routes.index);
Now you should be able to:
现在您应该能够：
- navigate directly to a url served by your Angular.js app
- refresh any page without error
- 直接导航到您的 Angular.js 应用程序提供的网址
- 刷新任何页面而不会出错
回答by Benjamin Crouzier
This article might help:
这篇文章可能会有所帮助：
http://jjt.io/2013/11/16/angular-html5mode-using-yeoman-generator-angular/
http://jjt.io/2013/11/16/angular-html5mode-using-yeoman-generator-angular/
In a nutshell:
简而言之：
npm install --save-dev connect-modrewrite
Gruntfile:
咕噜文件：
connect: {
options: {
// ...
// Modrewrite rule, connect.static(path) for each path in target's base
middleware: function (connect, options) {
var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
return [require('connect-modrewrite')(['!(\..+)$ / [L]'])].concat(
optBase.map(function(path){ return connect.static(path); }));
}
}
}
回答by Maxim Grach
Route app.get('/index/dashboard', routes.dashboard);refers to http://hostname/index/dashboardwhereas when('/dashboard', { ... })refers to http://hostname/dashboard.
路由app.get('/index/dashboard', routes.dashboard);是指，http://hostname/index/dashboard而when('/dashboard', { ... })指的是http://hostname/dashboard。
You should correct the route: app.get('/dashboard', routes.dashboard);
您应该更正路线： app.get('/dashboard', routes.dashboard);
回答by Despertaweb
I'd suggest a pretty fast javascript solution in front and back end.
我建议在前端和后端使用一个非常快速的 javascript 解决方案。
NodeJs
NodeJs
// set up our one route to the index.html file
app.get('*', function (req, res){
res.sendFile(path.join(__dirname+'/public/index.html'));
});
This code tells to de local/remote server where is the main html, so it could find the rest of templates.
此代码告诉本地/远程服务器主 html 在哪里，因此它可以找到其余的模板。
AngularJs
AngularJS
// If 404 Redirect to home
$routeProvider.otherwise( { redirectTo: '/'} );
This is also really helpful, so never goes to a missing page.
这也非常有帮助，因此永远不要跳到缺失的页面。
