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

Question

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

因此，在上述教程的这一步（导入我们的 Angular 项目），我的应用程序停止工作。我不确定为什么，几天的谷歌搜索和修补都没有解决这个问题。

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

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

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

然后我将我的 HTML 视图（转换为 ejs 文件）和 Angular JS 文件都移到其中，但现在当我运行 npm start 并在浏览器中键入“http://localhost:3000”时出现此错误。

index.ejs 文件需要两个额外的视图（以 AngularJS 模块的形式）：nav-view . ejs 和 update-view . ejs。他们不再被发现或加载。在我的 node.js 终端上，这两个都给我 404 错误。

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

以下是我的代码中的 sn-ps 和错误；如果需要更多信息，请告诉我。

1) 我已经定义了自定义指令和视图，以便 index.ejs 文件包含当前状态的插入点以及无所不在的导航栏：

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

2) 我的 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) 下面的 sn-p 来自我的 _AngularJS_ 路由文件，我在其中设置了状态。请注意，“更新列表”视图应在初始状态下加载：

(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 代码，但是教程都使用了非常简单的示例，并且没有足够的资源来弥补这个差距。

Answer 1

安莫尔·米塔尔的想法是对的：

模板必须位于 public 文件夹中，但 不是 index 模板，它需要位于 views 文件夹中 - 如果您移动所有模板，Express 将不会任何要加载的东西。

在这个特定的设置中，Express 加载索引，然后索引依次为其他模板提供服务。