使用自定義AngularJS指令並通過ExpressJS路由進行路由

Question

我創建了一個AngularJS應用程序，並使用本教程（ https://thinkster.io/mean-stack-tutorial ），一直在嘗試創建ExpressJS / Node后端。 不幸的是，本教程是圍繞具有單個控制器的單個視圖編寫的，而我的AngularJS應用具有多個自定義指令。

因此，在以上教程（ 導入我們的Angular項目 ）的這一步，我的應用程序停止工作。 我不確定為什么和幾天的谷歌搜索和修補工作仍未解決此問題。

我找到了其他教程，但它們並不能解決這種情況（同樣，存在單頁不包含任何類似指令的復雜假設），而且我還沒有足夠的經驗來理解ExpressJS文檔。

具體來說，我使用教程中的以下步驟（在Ubuntu中）創建了ExpressJS應用程序：

1. npm install -g express-generator
2. 表達--ejs nameOfApp
3. cd nameOfApp
4. npm安裝
5. npm install-保存貓鼬

然后，我將HTML視圖（轉換為ejs文件）和Angular JS文件都移到了其中，但是現在當我運行npm start並在瀏覽器中鍵入“ http：// localhost：3000”時出現此錯誤。

index.ejs文件需要兩個附加視圖（以AngularJS模塊的形式）： nav-view . ejs nav-view . ejs和update-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_路由文件，在其中設置了狀態。 請注意，“更新列表”視圖應以初始狀態加載：

(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

Anmol Mittal有一個正確的主意：

模板確實必須位於公用文件夾中，而不是索引模板 （必須位於views文件夾中）-如果移動所有模板，Express將不會加載任何內容。

在此特定設置中，Express加載索引，而索引又為其他模板提供服務。