Angular.js 요청/응답 Node.js

내 angular.js에서 node.js 서버의 일부 데이터를 요청하려고합니다. 문제는 데이터 응답시 json 객체가 인쇄 된 빈 브라우저 창이 나타납니다. angular.js가 응답을 인식하고 페이지에 머물러 있기를 바랍니다.Angular.js 요청/응답 Node.js

HTML 양식 -

<section class="small-container"> 
    <div class="login-form"> 
     <form action="/login" method="post" ng-submit="processForm()"> 
      <input ng-model="formData.username" type="text" name="username"> 
      <input ng-model="formData.password" type="password" name="password"> 
      <button>login</button> 
     </form> 
    </div> 
</section>

Angular.JS

가 인 LoginController에로드되는 템플릿

var app = angular.module("blavor", ['ngRoute']); 

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
    $routeProvider 
     .when("/", { 
      templateUrl: "/index", 
      controller: "loginController" 
     }) 
     .when("/register", { 
      templateUrl: "/register", 
      controller: "registerController" 
     }) 
     .otherwise("/"); 

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

app.controller('loginController', function($scope, $http) { 
    $scope.formData = {}; 
    $scope.processForm = function() { 
     $http({ 
      method: 'POST', 
      url: '/login', 
      data: $.param($scope.formData), 
      processData: false, 
      responseType: "json", 
      headers: { 
       'Content-Type': 'application/x-www-form-urlencoded' 
      } 
     }).success(function(data) { 
       console.log(data); 
       if (!data.success) { 
        alert("Noo!"); 
       } else { 
        alert("YEEEY!"); 
       } 
      }); 
    }; 
});

Node.js를 서버 -

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
var express = require('express'); 

var bodyParser = require('body-parser'); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
var routes = require('./routes')(app); 
http.listen(3000, function() { 
    console.log('listening on *:3000'); 
});

module.exports.start하는 index.js = 시작;

Node.js를 서버 - 나는 AngularJS와의 v1.2.24 및 호출되지 없구요 각도에서 Node.js를의 v0.10.25

을 console.log (데이터)를 사용하고 루트

module.exports = function(app) { 
app.post('/login', function(request, response) { 
console.log(request.body); 
    response.setHeader('Content-Type', 'application/json'); 
    response.end(JSON.stringify({value:"somevalue"})); 
}); 
}

출처

2014-09-11 Dusan J.

양식을 제출합니까? 이벤트에서 preventDefault를 호출 했습니까? – Gabs00

이 표현은 – anish

양식을 제출 중입니다. 서버는 request.body 또는 JSON.stringify에 넣은 다른 항목을 반환하지만 Angular.js는 페이지를 새로 고치고 응답의 json 만 표시하므로보기가 불가능합니다. 어떤 종류의 리디렉션이 node.js 부분에서 발생합니다 .. –

안녕하세요 action 및 method을 양식에서 삭제 해보세요. NG 제출 문서

에서
이벤트를 onsubmit하는 각도 표현을 결합 할 수 있습니다.

또한 양식에 action, data-action 또는 x-action 속성이없는 경우에만 양식의 기본 동작 (서버에 요청을 보내고 현재 페이지를 다시로드하는 것을 의미)을 방지합니다.

페이지를 추가하면 양식을 제출할 때 페이지가 새로 고침됩니다.

각도가 없으면 angular가 $ event.preventDefault()를 호출하여 페이지가 다시로드되지 않게합니다.

EDIT : 추가하기 만하면 서버에서 올바른 데이터를 보았습니다. 사용자가/login에 게시 할 때 항상 제공되는 미리 설정된 데이터로 응답하기 때문입니다.

양식이 현재 완전히 각도를 벗어나 서버에서 직접 데이터를 가져 오는 중입니다.

출처

2014-09-11 11:12:26 Gabs00

Angular.js 요청/응답 Node.js

답변

관련 문제