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，网址更改为{{ 1}}但页面的内容根本不会改变。它仍然显示localhost:3000/#/about。

的内容

也不确定是否相关，当我在浏览器中点击localhost：3000时会自动添加/＃/，因此完整的网址会显示index.jade。

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

Answer 1

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

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

1 个答案: