Angular.js请求/响应Node.js

问题描述：

我想从我的angular.js从node.js服务器请求一些数据。问题是，在数据响应时，我看到一个空白的浏览器窗口，上面印着我的json对象。我希望angular.js能够识别响应并留在页面上。Angular.js请求/响应Node.js

HTML表单 - 这被加载的LoginController

<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

模板

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服务器 - index.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 =开始;

的Node.js服务器 - 航线

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

我使用AngularJS v1.2.24和Node.js的v0.10.25

的console.log（数据）的角度不会被调用..

是否提交表单？您是否在事件中调用preventDefault？ – Gabs00 2014-09-11 10:38:41

是这个快递 – anish 2014-09-11 10:44:38

表格正在提交。服务器返回request.body或其他任何我放入JSON.stringify但Angular.js从来没有机会看到它，因为页面刷新并显示响应中只有json。喜欢从node.js部分发生某种重定向.. – 2014-09-11 10:44:38

答

嗨尝试从您的窗体中删除action和method。

从NG-提交文档

启用结合角表达式的onsubmit事件。

此外，它还可以阻止默认操作（表单意味着将请求发送到服务器并重新加载当前页面），但仅限于表单不包含操作，数据操作或x操作属性。

所以通过添加这些，您在提交表单时会导致页面刷新。

没有他们，角度会调用$ event.preventDefault（）给你，这样就不会重新加载页面。

编辑：我想补充，你是从服务器，因为你与预设的数据，这将始终提供当有人员额/登录响应看到正确的数据。

所以你的形式，目前规避的角度完全，直接从服务器获取数据。

Angular.js请求/响应Node.js

相关推荐