2015-10-05 10 views
5

Node.js、Express、およびangularを使用してPOST要求をリダイレクトしようとしています。私は次のようにフォームを使用しての標準的な方法があります認識しています:Node.jsと角でリダイレクト

index.ejs

<!DOCTYPE html> 
<html> 
<head> 
    <title>Redirect Example</title> 
</head> 
<body> 
    <p>INDEX PAGE</p> 
    <form action="/redirect" method="post"> 
    <button type="submit">CLICK</button> 
    </form> 
</body> 
</html> 

test.ejs

<!DOCTYPE html> 
<html> 
<head> 
    <title>Redirect Example</title> 
</head> 
<body> 
    <p>YAY REDIRECTED</p> 
</body> 
</html> 

app.js

var fs = require('fs'); 
var https = require('https'); 

var express = require('express'); 
var bodyParser = require('body-parser'); 
var cookieParser = require('cookie-parser'); 

var app = express(); 
app.set('view engine', 'ejs'); 

app.get('/', function(req, res) { 
    res.render('index'); 
}); 

app.post('/redirect', function(req, res){ 
    res.redirect('/test'); 
}); 

app.get('/test', function(req, res) { 
    res.render('test'); 
}); 

var port = process.env.PORT || 1337; 
app.listen(port, function(){ 
    console.log('http://localhost:' + port + '/'); 
}); 

このメソッドは、POST要求を処理するフォームを使用するため、ページを自動的に「テスト」ルートにリダイレクトします。

ただし、角度のアプローチを使用すると、ページが自動的にリダイレクトされません。どうすればいい?

index.ejs

<!DOCTYPE html> 
<html ng-app="project"> 
<head> 
    <title>Redirect Example</title> 
    <script src="/javascripts/jquery/jquery.js"></script> 
    <script src="/javascripts/angular/angular.js"></script> 
    <script src="/javascripts/angular/angular-route.js"></script> 
    <script src="/javascripts/main.js"></script> 
</head> 
<body ng-controller="MainController"> 
    <button type="submit" ng-click="submit()">CLICK</button> 
</body> 
</html> 

main.js

var app = angular.module('project', []); 
app.controller('MainController', ['$scope', '$http', function ($scope, $http) { 

    $scope.submit = function() { 
    $http.post('/redirect'); 
    } 
}]); 
AngularJSルーティングがハッシュに基づいている間のNode.jsサーバによって作成

答えて

2

ルートが実際の経路である(#)タグ等 -

node.js -

app.get( '/ myroute')のようになります - AngularJShttp://localhost:8000/myroute

ルート - だから、戻ってあなたに来てhttp://localhost:8000/#/myangroute

- 'myangroute /'

は次のようになります質問$http.post('/redirect');はあなたをリダイレクトせず、データを'/redirect'ルート(サーバー側で定義)に送信しています。リダイレクトの場合は、$locationサービスを使用してください。

+0

ありがとうございました。上記のコードにどのように使用するのか、簡単な例を挙げてください。 – slim1801

+1

'res.redirect( '/ test')の実際のリダイレクトの代わりに、私は通常ステータスコードを送信してからAngularJSでアクションを実行する方が好きです。 – Nesh

+0

私はNeshに同意します。 Angularはクライアントとして独自のモジュールで単独で動作するため、内部からのリダイレクトを処理します。エクスプレスエンドポイントを変更して代わりにステータスコードを返すようにして、$ http.post関数**の成功コールバックの内部から**リダイレクトするために '$ window.location.href = value'のようなものを使用してください。 – SamuelN

5

Angularは独自のモジュールでクライアント側を維持するため、リダイレクションをAngularから維持してください。私がコメントで述べたように、サーバーからリダイレクトを行うようにクライアントに指示するステータスコードを送ることができます。

例えば、

app.post('/redirect', function(req, res){ 
    res.status(300).send({ redirect:"/test"}); 
}); 

のようなものにあなたのExpressエンドポイントを変更し、

var app = angular.module('project', []); 
app.controller('MainController', ['$scope', '$http', '$window', function ($scope, $http, $window) { 

    $scope.submit = function() { 
    $http.post('/redirect').then(function(data, status){ 
     $window.location.href = data.redirect; 
    }); 
    } 
}]); 

ような何かにあなたの角度コントローラーは、サーバー側のコード内からリダイレクトアドレスを指定することができますこの方法。

編集:さらに、HTML5モードを有効にしていない限り、あなたのリダイレクトをハングルタグにする必要があると思います。

+0

私は個人的なプロジェクトでres.redirectを一貫して使用しています。私のブラウザがちょうどコンソールでHTMLを聞いていたので、不満を抱いていました - これは非常に有用であり、完全な意味を持ちます - あなたの明確で素晴らしい例のおかげで - 私はifチェックを追加しました。リダイレクト){/ *ウィンドウ位置href変更* /} 'と完璧に動作します!ありがとうございました! – natureminded