将NodeJS与Angular集成的最佳方法

Question

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

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

Answer 1

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

将所有文件保存在文件夹中
下载节点模块（express，body-parser）
node server.js
打开index.html
将一些数据发布到服务器（ 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（角度）

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>

将NodeJS与Angular集成的最佳方法

问题描述

1 个解决方案

解决方案1
7 已采纳 2015-11-11 02:51:52

将NodeJS与Angular集成的最佳方法

问题描述

1 个解决方案

解决方案1 7 已采纳 2015-11-11 02:51:52

解决方案1
7 已采纳 2015-11-11 02:51:52