Как правильно обрабатывать угловые маршруты с использованием рамки Express?

Question

Я установил пакет express-generator с номером npm и использовал команду express myApp для создания моего приложения. У меня возникли проблемы с работой с маршрутами. Я понимаю, что есть экспресс-маршруты, которые используются для бэкэнда, и Угловые маршруты, которые предназначены для интерфейса. Проблема: ни один из моих маршрутов, кроме индекса, не является рендерингом. Так что моя структура файла:

/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; 

Из того, что я понимаю, выше обслуживает до индекса, а затем оттуда Угловая маршруты захватывают и загружают частичные шаблоны. Мои Угловые маршруты в 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 

И я загрузить мой сервер и нажмите на «о» link, я получаю ошибку 404. В моей консоли я вижу 404 для index.jade И для about.jade, но моя домашняя страница загружает содержимое 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 вы что-нибудь видите?