使用自定义AngularJS指令和ExpressJS路由

我创建了一个AngularJS应用程序，并使用本教程(https://thinkster.io/mean-stack-tutorial)，一直在尝试创建一个ExpressJS/Node后端来配合它。不幸的是，本教程是围绕一个带有单个控制器的单一视图编写的，而我的AngularJS应用程序有多个自定义指令。

所以，在上面教程的这一步(导入我们的Angular项目)，我的应用停止工作了。我不知道为什么，好几天的谷歌搜索和修补都没有解决这个问题。

我找到了其他的教程，但他们没有回答这种情况(再次，有单页没有任何复杂的类似指令的假设)，我还没有足够的经验来理解ExpressJS文档。

具体来说，我使用教程中的这些步骤创建了ExpressJS应用程序(在Ubuntu中):

npm install -g express-generator
1. express—ejs nameOfApp
cd nameOfApp
3. npm安装
4. npm install——save mongoose

然后我移动了我的HTML视图(转换为ejs文件)和Angular JS文件到它，但现在得到这个错误，当我运行npm start和输入"http://localhost: 3000"到我的浏览器。

索引。ejs文件需要两个额外的视图(以AngularJS模块的形式):nav-view . ejs和update-view . ejs。他们不会再被发现或被装载了。从我的node.js终端，它给我404错误的这两个。

我确信这是我忽略的简单的东西，可能涉及app.js或index.js文件，但我不知道那是什么。

下面是我的代码片段和错误;如果需要更多的信息，请告诉我。

1)我已经定义了自定义指令和视图，以便索引。Ejs文件包括当前状态的插入点，以及无所不在的导航栏:

...
<!-- Templates are inserted in below tag per state machine -->
<div ui-view></div>
<!--  navigation bar is always visible -->
<nav-view></nav-view>
</body>
…

我的AngularJS应用(main.js)使用了下面的控制器和指令。我已经修补了很多与templateUrl，但还没有得到一个解决方案的方式。

(function() {
    "use strict";
    var pageApp = angular.module('page', ['routes']);
     pageApp.controller('UpdateCtrl', ['$scope', '$http', 'updateFactory', function($scope, $http, updateFactory) {
        $scope.updates = updateFactory.updates;
        ... 
    }]); //end of the UpdateCtrl controller
    //below is the directive for the navigation bar
    pageApp.directive('navView', function() {
        return {
            restrict: 'E'
            , templateUrl: 'views/nav-view.ejs'
            , controllerAs: 'navCtrl'
        };
    });
    //below is the directive for a list of updates that are inserted into the index view upon loading
    pageApp.directive('updateView', function() {
        return {
            restrict: 'E'
            , templateUrl: 'views/update-view.ejs'
            , controllerAs: 'updateCtrl'
            , controller: 'UpdateCtrl'
            , bindToController: true
        };
    });
 .…

3)下面的代码片段来自我的_AngularJS_路由文件，我在其中设置了状态。注意"list of updates"视图应该在初始状态下加载:

(function() {
    "use strict";
    var pageApp = angular.module('routes', ['ui.router']);
    pageApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        $stateProvider.state('homeState', {
            url: '/home'
            , template: '<update-view>'
        })
        .state('blogState', {
        …

4)下面是Express自动生成的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 users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// 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);
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;

5)下面是index.js，也是ExpressJS自动生成的。我相信解决方案包括在这里添加一些东西，或者创建更多类似的文件。

var express = require('express');
var router = express.Router();
/* GET needed pages. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Index' });
});
module.exports = router;

谢谢你的帮助。我有相对复杂的AngularJS代码，但这些教程都使用了非常简单的示例，而且没有足够的资源来弥补这一差距。