將NodeJS與Angular集成的最佳方式

我試圖製作一個使用Node服務器作爲後端的Web應用程序，Angular從Node服務器獲取信息並創建響應式前端。目前，在我的簡單應用程序中，我有兩個js文件：server.js和controller.js。下面是每個文件的代碼：將NodeJS與Angular集成的最佳方式

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將處理這些請求，並以某種方式將數據傳遞給Angular（在controller.js文件中），這將更新模型，並隨之更新視圖。

我的問題是什麼是從節點服務器傳遞信息到controller.js並在信息添加時更新模型/視圖的最佳方式？

來源

2015-11-11 FaTal Cubez

什麼你問的是現實實時功能（節點接收數據時自動更新角度範圍）。在此之前，我建議儘量完成同樣的任務，但不要實時完成。（例如，在角度上有一個按鈕，用於獲取來自節點的最新數據的GET）。 –

所以你是說角度應該向節點服務器發出請求？ –

從那裏，實現（幾乎）實時同步的天真但簡單的方法是刪除按鈕的角度，但無限地每隔X秒從節點角度GET數據。 –

我做了一個非常簡單的例子，只使用HTTP請求和$interval，角度相當於window.setInterval。

保存的所有文件夾中的文件
下載節點模塊（快遞，身體解析器）
node server.js
打開index.html
POST一些數據到服務器（http://localhost:3000）
index.html應該顯示每個POST'd到服務器的數據列表，延遲〜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>

來源

2015-11-11 02:51:52

Awww，很聰明。我將不得不試試:) –

嘿，如果你對答案感到滿意，不要忘記接受並關閉:) –

將NodeJS與Angular集成的最佳方式

回答

相關問題