Verwenden von benutzerdefinierten AngularJS-Direktiven und Routing mit ExpressJS-Routing

Question

Ich habe eine AngularJS-App erstellt und mit diesem Lernprogramm (https://thinkster.io/mean-stack-tutorial) versucht, ein ExpressJS/Node-Backend zu erstellen. Leider ist dieses Tutorial um eine einzelne Ansicht mit einem einzigen Controller herum geschrieben, während meine AngularJS-App mehrere benutzerdefinierte Anweisungen enthält.

Also, in diesem Schritt in der oben genannten Anleitung (Importieren unserer Angular Project), meine App funktioniert nicht mehr. Ich bin nicht sicher, warum und mehrere Tage des Googelns und Bastelns haben dieses Problem nicht gelöst.

Ich habe andere Tutorials gefunden, aber sie beantworten diese Situation nicht (wieder, es gibt diese Single-Seite-ohne-irgendetwas-komplizierte-Like-Direktiven Annahme), und ich habe noch nicht genug Erfahrung zu Verstehen Sie die ExpressJS Docs.

Insbesondere Ich habe die Express.js app diese Schritte aus dem Tutorial (in Ubuntu) unter Verwendung von:

1. NPM installieren -G Express-Generator
2. exprimieren --ejs nameOfApp
3. cd nameOfApp
4. installieren npm
5. npm installieren --save Mungo

Ich habe dann sowohl meine HTML-Ansichten (konvertiert in EJS-Dateien) als auch Angular JS-Dateien dorthin verschoben, aber jetzt bekomme ich diesen Fehler, wenn ich npm start starte und "http: // localhost: 3000" in meinen Browser eintippe. Die Datei index.ejs benötigt zwei zusätzliche Ansichten (in Form von AngularJS-Modulen): nav-view . ejs und update-view . ejs. Sie werden nicht mehr gefunden oder geladen. Von meinem node.js-Terminal gibt es mir 404 Fehler für beide.

Ich bin sicher, es ist etwas einfaches, das ich übersehe, wahrscheinlich mit den app.js oder index.js Dateien, aber ich habe keine Ahnung, was das ist.

Im Folgenden sind Auszüge aus meinem Code und der Fehler; Bitte lassen Sie mich wissen, wenn mehr Informationen benötigt werden.

1) Ich habe benutzerdefinierte Richtlinien definiert und Ansichten, so dass die Datei index.ejs sowohl einen Einfügepunkt für den aktuellen Zustand beinhaltet, sowie eine allgegenwärtige Navigationsleiste:

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

2) My AngularJS app (main.js) verwendet die folgenden Controller und Direktiven. Ich habe viel mit dem TemplateUrl gebastelt, aber ich habe keine Lösung dafür gefunden.

(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) Die unten Snippet ist von meiner _AngularJS_ Routing-Datei, wo ich die Zustände einzurichten. Beachten Sie, dass die „Liste der Updates“ Ansicht sollte im Anfangszustand geladen werden:

(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) Im Folgenden als Referenz, ist die app.js Datei automatisch generiert durch Eil. Ich habe es nicht berührt, außer um den Favicon-Code zu entfernen, nachdem das Icon an den richtigen Ort verschoben wurde.

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) Unten ist index.js, das ebenfalls automatisch von ExpressJS generiert wird. Ich glaube, die Lösung besteht darin, etwas hinzuzufügen oder mehr Dateien zu erstellen.

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; 

Danke für jede Hilfe. Ich habe relativ komplexen AngularJS-Code, aber die Tutorials alle verwenden wirklich einfache Beispiele und unzureichende Ressourcen zum Schließen dieser Lücke.

Answer 1

Anmol Mittal hatte die richtige Idee:

Die Vorlagen im öffentlichen Ordner befinden müssen, aber nicht den Index Vorlage, die im Blick auf Ordner werden muss - wenn Sie alle bewegen Vorlagen, Express wird nichts zu laden haben.

In diesem speziellen Setup lädt Express den Index, und der Index wiederum dient den anderen Vorlagen.