将 NodeJS 与 Angular 集成的最佳方法答案

【问题标题】：Best way to integrate NodeJS with Angular将 NodeJS 与 Angular 集成的最佳方法
【发布时间】：2015-11-11 00:13:10
【问题描述】：

我正在尝试制作一个使用 Node 服务器作为后端并使用 Angular 从 Node 服务器获取信息并创建响应式前端的 Web 应用程序。目前，在我的简单应用程序中，我有两个 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 使用的模型将通过 Node 服务器在传入 HTTP 请求（特别是 POST）时解析的信息不断更新。 Node 将处理这些请求并以某种方式将数据传递给 Angular（在 controller.js 文件中），它将更新模型，并随之更新视图。

我的问题是将信息从 Node 服务器传递到 controller.js 并在添加信息时更新模型/视图的最佳方式是什么？

【问题讨论】：

您要求的是实时功能（节点接收数据时自动更新角度范围）。在此之前，我建议尝试完成相同的任务，但不要实时完成。（例如，有一个 Angular 按钮，用于获取来自节点的最新数据）。
所以你是说 Angular 应该向节点服务器发出请求？
从那里，实现（几乎）实时同步的天真但简单的方法是删除有角度的按钮，但每 X 秒无限地从节点获取角度 GET 数据。
在现实世界中，这将使用 HTTP 长轮询或 Websockets 来完成，后者更现代。这些比较复杂，所以我建议在简单的 HTTP 请求之后尝试它们。
在这种情况下，请查看socket.io。这将 websocket 的底层细节抽象出来，使其更容易上手。

标签： javascript angularjs node.js

【解决方案1】：

我仅使用 HTTP 请求和$interval 做了一个非常简单的示例，它相当于 angular 的 window.setInterval。

将所有文件保存在一个文件夹中
下载节点模块（express、body-parser）
node server.js
打开 index.html
POST 一些数据到服务器 (http://localhost:3000)
index.html 应该显示一个发布到服务器的每个数据的列表，延迟约 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（角度）

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>

【讨论】：

Awww，非常聪明。我得试试这个:)
嗨，如果你对答案满意，别忘了接受并关闭：)