javascript - Angularjs ルートを html5mode の expressJs ルートで動作させる方法

Question

昨日、stackoverflow に質問を投稿しました ( css と javascript が更新時に含まれていませんでした)。昨日、Web ページを更新した後に css と javascript が含まれなかった理由について質問し、html5mode が原因であることがわかりました。昨日からこの問題の解決策を探していますが、実際には答えが得られません。

私のフォルダ構造

ここに画像の説明を入力

app.js

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , mongoose = require('mongoose');

var app = module.exports=express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/public/views');
app.set('view engine', 'ejs');
app.use(express.cookieParser());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
app.use(function(request, response)
{
    console.log("catch all");
    writeFile("/public/views/master.ejs", request, response);
});
// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}
app.use(function (req,res) {
 res.status(404).render('error', {
                url: req.originalUrl
            });
});

app.get('/', routes.index);
app.get('/:name', routes.view);
app.get('*', routes.risk);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

index.js

exports.index = function(req, res){
  res.render('master', { title: 'Hello World' });
};
exports.view = function (req, res) {
  var name = req.params.name;
  res.render(name);
};
exports.risk = function(req, res){
  res.sendfile(__dirname + "/public/views/master.ejs");
};

exports.risk の場合、expressJs が他のページをレンダリングする前に最初にマスターページをレンダリングするようにしようとしていましたが、機能しません。

angularJs

var SymSal = angular.module('SymSal',[]).
 config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'main.ejs',
        controller: 'IndexCtrl'
      }).
      when('/login',{
        templateUrl: 'login.ejs',
        controller: 'IndexCtrl'
      }).
      when('/register',{
        templateUrl: 'register.ejs',
        controller: 'IndexCtrl'
      }).
      when('/about',{
        templateUrl: 'about.ejs',
        controller: 'IndexCtrl'
      }).
      otherwise({
        templateUrl: 'error.ejs'

      });
    $locationProvider.html5Mode(true);
  }]);

 SymSal.controller('IndexCtrl',function(){

 })

あなたの助けに感謝します、ありがとう!!

score 5 · Accepted Answer

exports.risk の場合、expressJs が他のページをレンダリングする前に最初にマスターページをレンダリングするようにしようとしていましたが、機能しません。

ルートは順番に照合されます。

app.get('/', routes.index);
app.get('/:name', routes.view);
app.get('*', routes.risk);

ルートが「/」に一致する場合、routes.index をレンダリングします。ルートが「/」と一致しない場合は、「/:name」(/login、/register など) と一致するかどうかを確認し、routes.view をレンダリングします。ルートが「/」および「/:name」と一致しない場合 (たとえば、ルートが /user/1 のようなものである場合)、routes.risk がレンダリングされます。

高速レンダリングをマスターページにするには、最初に「/」と「/:name」のルートマッチャーを削除し、すべてのルートに一致するユニバーサルマッチャー (「*」) を保持する必要があります。

これで、指定した URL に関係なく、サーバーはマスターページを送り返します。localhost:3000/login を呼び出すと、サーバーはマスターページを返します (localhost:3000 を呼び出した場合と同じページ)。Angular は、パス (/login) が指定されていることを認識し、適切な $routeProvider.when() 関数を呼び出します。

API 呼び出し (db からのデータの取得、db へのデータの保存など) を処理するには、ルートマッチャーを指定し、ユニバーサルマッチャー ('*') の上に配置する必要があります。

app.get('/api', routes.api);

$routeProvider.when() で「/api」を使用しないことに注意してください。

残っているのは、静的ファイルの正しい処理です。すべての URL がユニバーサルマッチャー ('*') によって処理されることを思い出してください。そのため、静的ファイルは間違った MIME タイプでレンダリングされます。これを修正するには、「/static」などの特定のパスですべての静的ファイルにアクセスできるようにする必要があります。アップデートするだけ

app.use(express.static(path.join(__dirname, 'public')));

に

app.use('/static', express.static(path.join(__dirname, 'public')));

新しいパターンに一致するようにマスターページのすべてのパスを更新する必要があります: '/js/angular.js' は '/static/js/angular.js' になりました。

score 2 · Accepted Answer

もっともらしい解決策の基礎について@bekiteに感謝します。彼の最初の解決策に基づいて、私は次のことを自分自身で少しきれいにしました。これにより、すべてのパスを/staticプレフィックスで更新および維持する必要がなくなります。私にとってはうまくいかなかったことに注意してapp.get('*', routes.risk)ください（Express v3.4.4）が、正規表現を使用するとうまくいきました：

...
app.use(app.router);
app.use(express.static(path.join(__dirname, 'app')));

// Express routes - ensure these are not defined in Angular's app.js $routeProvider:
app.get('/api', routes.api);

/**
 * ANGULAR APP ROUTING
 * --------------------
 * These routes will fallback to Angular for resolution of any uri:
 * Note that the * wildcard will not work, hence the alternate regex
 * It is crucial that 'static' assets never be referenced with a leading
 * forward slash '/', else they'll match this rule and 404's will occur
 */
//app.get('*', routes.risk);
app.get('/[a-z]{0,100}', routes.risk);

////
// alternatively:
//
// app.get('/[a-z]{0,100}', function(req, res) {
//     res.sendfile('app/index.html', {title: 'Default Title', stuff: 'More stuff to send to angular'}
// });
...

@bekite に従って、Angular パスは汎用ルート (必要に応じてさらに分岐を提供する可能性があります) に渡され、Angular $routeProvider によってキャプチャされます。Express パスは/apiプレフィックスでキャッチされ、必要に応じてサーバー側で処理されます。

javascript - Angularjs ルートを html5mode の expressJs ルートで動作させる方法

2 に答える 2

Related

Reference