2015-10-05 2 views
5

У меня возникли проблемы с попыткой перенаправления запросов POST с использованием Node.js, Express и углового. Я знаю, есть стандартный способ использования формы следующим образом:Перенаправление с 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 + '/'); 
}); 

Этот метод автоматически перенаправляет страницу на «тестовый» маршрут, поскольку он использует форму для обработки запроса на отправку.

Однако при использовании углового подхода страница не будет автоматически перенаправляться. Как мне это сделать?

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'); 
    } 
}]); 
теги

ответ

2

Маршруты, создаваемые сервером Node.js фактические маршруты, а маршрутизация AngularJS основан на хэш (#), как -

Маршруты в node.js -

app.get ('/ MyRoute') будет как - http://localhost:8000/myroute

Маршруты в AngularJS -

'/ myangroute' будет как - http://localhost:8000/#/myangroute

Так, возвращаясь к вашему вопрос, $http.post('/redirect'); не перенаправляет вас, а отправляет данные на '/redirect' маршрут (определенный на конце сервера). Для перенаправления используйте angularjs $location сервис.

+0

Спасибо Nesh, не могли бы вы привести краткий пример того, как я буду использовать его для кода, который у меня выше? – slim1801

+1

Вместо фактической переадресации в 'res.redirect ('/ test')' Обычно я предпочитаю отправить код статуса, а затем выполнить действие в AngularJS – Nesh

+0

Я согласен с Nesh. Угловое предназначено для работы в одиночку в своем модуле в качестве клиента, поэтому обрабатывайте перенаправление изнутри углового. Измените экспресс-конечную точку, чтобы вместо этого вернуть код состояния и использовать что-то вроде '$ window.location.href = value' для ** перенаправления из внутреннего обратного вызова функции $ http.post **. – SamuelN

5

Попробуйте сохранить перенаправление изнутри Углового, так как Angular должен оставаться на стороне клиента в своем собственном модуле. Как я уже сказал в комментарии, вы можете отправить код статуса с сервера, указав, что клиент выполняет перенаправление.

Например, изменить курьерскую конечную точку на что-то вроде

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

И ваш Угловая контроллер к чему-то вроде

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, то есть 'if (data. redirect) {/ * расположение окна href здесь * /} 'и работает безупречно! Спасибо! – natureminded

Смежные вопросы