Angular Ui-Router在使用node.js时不是路由

我正在使用angular度ui路由器。 路由器似乎在主页index.html上完美工作。 但是任何其他导航不起作用。

这是我的stateproviderangular：

var app = angular.module('myApp', ['ui.router']); app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider .state("home", { url: "/", templateUrl: "../partials/home/index.html" }) .state("login", { url:"/login", templateUrl: "../partials/account/login.html" }) .state("register", { url: "/register", templateUrl: "../partials/account/register.html" }) .state("values", { url: "/values", templateUrl: "../partials/test/values.html" }) ; }); 

HTML在我的主index.html：

  <!--Content --> <div class="container"> <div ui-view></div> </div> <!-- END Content --> 

当我浏览页面本地主机：8080 /login时，我得到这个：

我想如果找不到，我甚至不应该看到这个页面。 不应该因为$ urlRouterProvider.otherwise（）将我redirect回“/”。 除了这一点，虽然模板url /partials/account/login.html存在。

我有点新node.js，我很好奇，如果笔记文件服务器正在尝试路线和胜利我的angular度？ 我正在使用可能是最常见的http服务器。

如果有帮助，我也使用Express节点。 这里是app.js的代码，我认为这个问题可能来自：

 var express = require('express'); var path = require('path'); var favicon = require('static-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(favicon()); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use('/users', users); /// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); /// error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; 

Answer 1

我想到了。 做下面的工作。

 app.use(function(req, res) { // Use res.sendfile, as it streams instead of reading the file into memory. res.sendfile(__dirname + '/public/index.html'); }); 

整个app.js incase任何人都好奇它在哪里去。

 var express = require('express'); var path = require('path'); var favicon = require('static-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(favicon()); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use(function(req, res) { // Use res.sendfile, as it streams instead of reading the file into memory. res.sendfile(__dirname + '/public/index.html'); }); app.use('/', routes); /// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); /// error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; 

当然，这将需要在你的angular码：

 app.config(["$locationProvider", function($locationProvider) { $locationProvider.html5Mode(true); }]); 

有一件事要注意，让我。 您必须重新启动服务器才能正常工作。 ctr + c然后粘贴此代码，然后重新启动服务器。 祝你好运

Answer 2

你有没有尝试使用你的partials相同的目录：
移动partials / account / login.html“到partials / home / login.html”
另外，你使用自己的server.jsexpression式configuration，还是一个老员满满的？
angular度显然是处理路由，但似乎nodejs没有find资产…

请确保在server.js中提供部分文件的特定任务

  function serve_partial(req,res){ var stripped = req.url.split('.')[0]; var requestedView = path.join('./', stripped); res.render(requestedView, function(err, html) { if(err) { res.render('404'); } else { res.send(html); } }); } function serve_index(req,res){ res.render('index'); } // Angular Routes app.get('/partials/*', serve_partial); app.get('/*', serve_index); 

对于你的情况，这可能是我的东西：

  var express = require('express'); var path = require('path'); var favicon = require('static-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(favicon()); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); function serve_partial(req,res){ var stripped = req.url.split('.')[0]; var requestedView = path.join('./', stripped); res.render(requestedView, function(err, html) { if(err) { res.render('404'); } else { res.send(html); } }); } app.use('/partials/*', serve_partial); app.use('/', routes); app.use('/users', users); /// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); /// error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; 

Answer 3

正如我看到你请求你的节点API没有任何路线像/login，你会得到404。

你应该试试localhost：8080 /＃/ login