カスタムAngularJSディレクティブとExpressJSルーティングを使用したルーティング

Question

私はAngularJSアプリケーションを作成し、このチュートリアル（https://thinkster.io/mean-stack-tutorial）を使用して、ExpressJS/Nodeバックエンドを作成しようとしています。残念なことに、このチュートリアルは、単一のコントローラで1つのビューを中心に書かれていますが、私のAngularJSアプリケーションには複数のカスタムディレクティブがあります。

したがって、上のチュートリアル（角度プロジェクトをインポートするをインポートする）のこのステップでは、私のアプリは機能しなくなります。私は、なぜ、何日ものグーグルとチンカリングがこの問題を解決していないのかどうかはわかりません。

私は他のチュートリアルを見つけましたが、この状況に答えることはできません（また、単一ページの何もない複雑な指示の前提があります）。 ExpressJSのドキュメントを理解してください。

1. NPMは-gインストール
2. がnameOfApp
3. CD nameOfApp
を--ejs発現する発現ジェネレータ：

具体的に、私は（Ubuntuの中の）チュートリアルからの手順を使用してExpressJSアプリを作成しました

4. NPM --saveマングースインストール
5. NPMをインストール

その後、HTML形式のビュー（ejsファイルに変換）とAngular JSファイルを両方に移動しましたが、npm startを実行し、ブラウザに "http：// localhost：3000"と入力するとこのエラーが発生します。

index.ejsファイルには、AngularJSモジュールの形式で2つの追加のビュー（と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ミタルは正しい考えを持っていた：

テンプレートは、ビューのフォルダに配置する必要があり、インデックステンプレートを、パブリックフォルダに配置する必要があるが、はありません - あなたはすべて移動した場合テンプレートを使用すると、Expressには何もロードされません。

この特定の設定では、Expressによって索引がロードされ、索引では他のテンプレートが使用されます。