集成NodeJS和Angular的最佳方法
我试图制作一个使用Node服务器作为后端的Web应用程序，Angular从Node服务器获取信息并创build响应式前端。 目前，在我的简单应用程序中，我有两个js文件： server.js和controller.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并更新信息添加时的模型/视图？
我做了一个非常简单的例子，只使用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>