如何将数据从AngularJS前端传递到Nodejs后端?

我在这里有一些angular度的js代码。

<!DOCTYPE html> <html lang="en"> <head> <script src="Scripts/angular.min.js"></script> <body> <div ng-app=""> <form> Author: <input type="text" ng-model="author"> <br> <br> Title: <input type="text" ng-model="title"> <br> <br> Body: <input type="author" ng-model="body"> <br> <br> <input type="submit" value="Submit"> </form> </div> </head> </body> </html> 

和节点js与MySQL代码在这里。 我能够从这个节点代码传递数据到MySQL数据库。 如何继续向angularjs节点? 我来自PHP的背景。 我应该能够从angular度jsforms发送数据到MySQL数据库。 我能够从这里的节点代码发送数据到MySQL数据库。

 var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'localhost', user: '', password: '', database: 'copedb' }); connection.connect(); var cope = { author: 'XYZXYZ', title: 'Testing Node', body: 'Node JS' }; var query = connection.query('insert into cope set ?', cope, function(err, result) { if (err) { console.error(err); return; } console.error(result); }); 

它可以成为你入门的垫脚石:

的index.html

 <!DOCTYPE html> <html lang="en"> <head> <script src="Scripts/angular.min.js"></script> <script src="Scripts/app.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <form> Author: <input type="text" ng-model="author"> <br> <br> Title: <input type="text" ng-model="title"> <br> <br> Body: <input type="author" ng-model="body"> <br> <br> <input type="submit" value="Submit" ng-click="submit()"> </form> </div> </body> 

Angular代码app.js

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.submit= function(){ var data = $.param({ book: JSON.stringify({ author: $scope.author, title : $scope.title, body : $scope.body }) }); $http.post("/api/book/", data).success(function(data, status) { console.log('Data posted successfully'); }) } }); 

server.js – Nodejs

 var express = require('express'); var mysql = require('mysql'); var app = express(); var connection = mysql.createConnection({ host: 'localhost', user: '', password: '', database: 'copedb' }); connection.connect(); app.post('/api/book', function(req, res, next){ var cope = req.body.params; var query = connection.query('insert into cope set ?', cope, function(err, result) { if (err) { console.error(err); return res.send(err); } else { return res.send('Ok'); } }); app.listen(8080); 

无论如何,我写了实际的工作代码在这里。

  index.html <!DOCTYPE html> <html lang="en"> <head> <script src="angular.min.js"></script> <script src="app.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <form> Author: <input type="text" ng-model="data.author"> <br> <br> Title: <input type="text" ng-model="data.title"> <br> <br> Body: <input type="author" ng-model="data.body"> <br> <br> <input type="submit" value="Submit" ng-click="submit()"> </form> </div> </body> </html> app.js var app = angular.module('myApp', []); app.controller('myCtrl', function($scope,$http) { $scope.data = {}; $scope.submit= function(){ console.log('clicked submit'); $http({ url: 'http://localhost:8080/blah', method: 'POST', data: $scope.data }).then(function (httpResponse) { console.log('response:', httpResponse); }) } }); server.js var express = require('express'); var bodyParser = require('body-parser'); var mysql = require('mysql'); var app = express(); app.use(bodyParser.json({limit: '50mb'})); app.use(express.static('public')); var connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '', database: 'copedb' }); connection.connect(); app.post('/blah', function(req, res, next) { var cope = req.body; console.log('request received:', req.body); var query = connection.query('insert into cope set ?', cope, function (err, result) { if (err) { console.error(err); return res.send(err); } else { return res.send('Ok'); } }); //res.send('received the data.'); }); app.listen(8080); 

首先,根据您的需求,使用Express / Restify (npm模块)创build一个RESTful服务,然后再与您的SQL数据库交谈。

一旦服务在服务器级启动并运行,您现在就可以在客户端级上向/从服务器发送/接收数据了。

注意:使用$ resource而不是AngularJS的$ http服务与服务器交谈。

https://docs.angularjs.org/api/ngResource/service/ $ resource

最简单的答案如何将数据从AngularJS前端传递到Nodejs后端

与HTML的AngularJs代码

  <body> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> <p>First Name: <input type="text" name="firstName" ng-model="firstName" required /></p> <p>Lirst Name: <input type="text" name="lastName" ng-model="lastName" required /></p> <button ng-click="SendData()">Submit</button> <hr /> {{ PostDataResponse }} </div> <script> var app = angular.module("app",[]); app.controller("myCtrl", function($scope,$http){ $scope.SendData = function() { var data = { fName : $scope.firstName,lName : $scope.lastName } $http.post('/postFormAngular', data) .success(function (data, status, headers, config) { $scope.PostDataResponse = data; }) .error(function(data, status, header, config){ $scope.PostDataResponse = "Data: " + status; }); }; }); </script> </body> 

Nodejs代码

 var express = require('express'); var multer = require('multer'); var mime = require('mime'); var mysql = require('mysql'); var app = express(); var bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); var connection = mysql.createConnection({ host : 'localhost', user : 'root', port : 3306, password : '', database : 'angular_db' }); connection.connect(function(err){ if(!err) { console.log("Database is connected ... nn"); } else { console.log("Error connecting database ... nn"); } }); app.get('/angular_html.html', function(req, res){ res.sendFile(__dirname + '/' + 'angular_html.html'); console.log("----------------"); }); app.post("/postFormAngular", function (req, res) { console.log(req.body.fName); res.send(req.body.fName); }); app.listen(3000);