2015-10-05 29 views
5

ile yeniden yönlendirme Node.js, Express ve açısal kullanarak POST isteklerini yeniden yönlendirmeye çalışırken sorun yaşıyorum.Node.js ve açısal

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: Ben şöyle formları kullanarak standart bir yolu yoktur farkındayım
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 + '/'); 
}); 

Bu yöntem, posta isteğini işlemek için bir form kullandığından, sayfayı otomatik olarak "test" rotasına yönlendirir.

Ancak açısal bir yaklaşım kullandığımda, sayfa otomatik olarak yönlendirme yapmıyor. Bunu nasıl yapardım?

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 yönlendirme karma dayalı iken node.js sunucu tarafından oluşturulan

cevap

2

Rotalar gerçek yolları vardır (#) etiketleri gibi -

node.js rotaları -

('/ MyRoute') gibi olacak

app.get - angularjs yılında http://localhost:8000/myroute

Rotaları -

gibi olacak '/ myangroute' - http://localhost:8000/#/myangroute

Yani geri gelmesini senin soru, $http.post('/redirect'); sizi yönlendirmiyor, ancak verileri '/redirect' rotasına gönderiyor (sunucu ucunda tanımlı). Yönlendirme için angularjs $location hizmetini kullanın.

+0

Teşekkürler Nesh, yukarıdaki kod için nasıl kullanacağım konusunda hızlı bir örnek verebilir misiniz? – slim1801

+1

'res.redirect ('/ test')' içinde gerçek yönlendirme yerine genellikle durum kodu göndermeyi tercih ederim ve ardından AngularJS – Nesh

+0

'da bir işlem gerçekleştirmeyi tercih ediyorum Nesh'e katılıyorum. Açısal, kendi modülünde bir istemci olarak tek başına çalışmak anlamına gelir, bu yüzden yönlendirmeyi içten açılı olarak ele alın. Bunun yerine bir durum kodu döndürmek için ekspres uç noktasını değiştirin ve $ http.post işlevinin ** geri çağırma başarısının içinden ** $ window.location.href = value 'gibi bir şey kullanın. – SamuelN

5

Yönlendirmeyi, istemci tarafında kendi modülünde kalması amaçlandığından, Yönlendirmeyi Angular içinden tutmayı deneyin. Bir yorumda söylediğim gibi, istemciden bir yönlendirme yapmasını belirten sunucudan bir durum kodu gönderebilirsiniz.

Örneğin,

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

böyle bir şey için ekspres uç noktasını değiştirmek Ve

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; 
    }); 
    } 
}]); 

böyle bir şey için Açısal Kontrolör sunucu tarafı kodu içinde yönlendirme adresi belirtmek Bu şekilde.

Düzenleme: Ayrıca, HTML5 modunuz etkin olmadıkça, yönlendirme için açılı olarak bir hashtag'a ihtiyacınız olacağını düşünüyorum.

+0

'u kullanma amacına hizmet etmeyecektir. Sürekli olarak res.redirect'i kişisel bir projede kullanmaktayım. tarayıcımın sadece konsolide HTML'yi aldığını düşünerek sinirlendim - bu inanılmaz derecede faydalı ve tam anlamıyla - açık ve harika bir örnek için teşekkürler - sadece bir kontrol ekledim yani, eğer (veri). yönlendirme) {/ * pencere konumu href burada değiştir * /} 've kusursuz çalışıyor! Teşekkür ederim! – natureminded