如何使用 Express 框架正确呈现 Angular 路由？

Question

我已经使用 npm 安装了 express-generator 包并使用 express myApp 命令生成我的应用程序。我在处理路线时遇到问题。我知道有用于后端的 Express 路由和用于前端的 Angular 路由。 问题：除了索引之外，我的所有路线都没有呈现。所以我的文件结构是：

/myApp
  /bin
  /node_modules
  /public
    /images
    /js
      /controllers
      app.js
    /stylesheets
  /routes
    index.js
  /views
    error.jade
    index.jade
    layout.jade
    about.jade
  app.js
  package.json

我的app.js：

var express = require('express');
var path = require('path');
var favicon = require('serve-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');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

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;

我的routes/index.js：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'myApp' });
});

module.exports = router;

据我了解，上面提供了索引，然后 Angular 路由从那里接管并加载部分模板。我的 Angular 路线在 public/js/app.js:

angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
    $routeProvider
        .when('/', {
            templateUrl: '/views/index.jade',
            controller: 'IndexCtrl'
        })
        .when('/about', {
            templateUrl: '/views/about.jade',
            controller: 'AboutCtrl'
        })
        .otherwise({ redirectTo: '/index' });
    }]);

所以当我在layout.jade 模板中有一个指向我的关于页面的锚标记链接时：

doctype html
html(lang='en', ng-app='myApp')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    base(href='/')
  body
      header.header
      h1.title MY TITLE
      ul.navbar
        li
          a.about(href='/about') About

  block content

然后我加载我的服务器并单击“关于”链接，我收到 404 错误。在我的控制台中，我看到 index.jade 和 about.jade 的 404，但我的主页无论如何都会加载 index.jade 的内容。

我尝试将我的锚标记中的href 从/about 更改为#/about，然后当我单击链接时没有给我一个404，而是URL 更改为localhost:3000/#/about，但是页面根本没有变化。它仍然显示index.jade的内容。

也不确定是否相关，当我在浏览器中点击 localhost:3000 时，它会自动添加 /#/，因此完整的 url 显示http://localhost:3000/#/。

任何帮助将不胜感激！另外，如果我应该提供更多信息/代码，请告诉我。谢谢！

Answer 1

看起来视图的路由（error.jade 和 about.jade）没有在您的 routes.js 文件中设置。如果你去链接http://localhost:3000/views/about.jade你看到什么了吗？