集成NodeJS和Angular的最佳方法

我试图制作一个使用Node服务器作为后端的Web应用程序,Angular从Node服务器获取信息并创build响应式前端。 目前,在我的简单应用程序中,我有两个js文件: server.jscontroller.js 。 这是每个文件的代码:

 var express = require("express"); var bodyParser = require("body-parser"); var app = express(); var port = 8006; app.use(express.static(__dirname)); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.post('/data', function(req, res){ console.log(req.body); res.send("Success!") res.status(200); res.end(); }); app.listen(port); console.log("Server running on port " + port); 

这里是控制器文件:

 (function(){ var app = angular.module("testApp", []); var TileController = function($scope){ // add stuff to $scope as initilization }; app.controller("TileController", ["$scope", TileController]); })(); 

这段代码是不完整的,因为我不知道该去哪里,但是我知道我想用它做什么。

Angular使用的模型将会随着传入的HTTP请求(特别是POST)被Node服务器parsing的信息不断更新。 节点将要处理这些请求,并以某种方式将数据传递给Angular(在controller.js文件中),它将更新模型,并随之更新视图。

我的问题是什么是最好的方式来传递信息从节点服务器到controller.js并更新信息添加时的模型/视图?

       

网上收集的解决方案 "集成NodeJS和Angular的最佳方法"

我做了一个非常简单的例子,只使用HTTP请求和$interval ,这个angular度相当于window.setInterval

  • 将所有文件保存在一个文件夹中
  • 下载节点模块(express,body-parser)
  • node server.js
  • 打开index.html
  • POST一些数据到服务器( http:// localhost:3000 )
  • index.html应该显示每个POST到服务器的数据列表,延迟〜3秒

server.js

 var express = require('express'); var bodyParser = require('body-parser'); var app = express(); var arr = []; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.get('/', function(req, res) { res.json({arr: arr}); }); app.post('/', function(req, res) { console.log(req.body); arr.push(req.body); res.end('Data received'); }) app.listen(3000, console.log.call(console, 'Server started.')); 

app.js(angular度)

 var app = angular.module('app', []); app.controller('MainCtrl', function($scope, $interval, $http) { $scope.arr = []; var stop = $interval(function() { $http.get('http://localhost:3000') .then(function(res) { $scope.arr = res.data.arr; }, function(e) { console.error(e); }); }, 3000); }); 

的index.html

 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta content="UTF-8"> <title>live data example</title> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body ng-controller="MainCtrl"> <ul> <li ng-repeat="item in arr">{{item}}</li> </ul> </body>