Question

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

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

我已经找到了其他教程，但他们没有回答这种情况（再次，那就是单页 - 没有任何复杂的指令假设），我不知道＃39; t有足够的经验来理解ExpressJS文档。

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

npm install -g express-generator
express --ejs nameOfApp
cd nameOfApp
npm install
npm install --save mongoose

然后我将我的HTML视图（转换为ejs文件）和Angular JS文件移入其中，但现在运行npm start并输入＆＃34; http：// localhost：3000＆＃时出现此错误34;进入我的浏览器。

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

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

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

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）以下代码段来自我的_AngularJS_路由文件，我在其中设置状态。请注意＆＃34;更新列表＆＃34; view应该以初始状态加载：

(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文件。我没有碰过它，除非通过将图标移动到适当的位置来取消注释favicon代码。

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

Anmol Mittal有正确的想法：

模板必须位于公共文件夹中，但不是索引模板，需要位于views文件夹中 - 如果移动所有模板，则表示已赢得＆＃39;有任何东西要加载。

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

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

1 个答案: