NodeJS'yi Angular

ile entegre etmenin en iyi yolu

Düğüm sunucusundan bilgi almak ve yanıt veren bir ön uç oluşturmak için arka uç olarak bir Node sunucusu ve Angular kullanan bir web uygulaması yapmaya çalışıyorum. Şu anda, benim basit uygulamada, iki js dosyam var: server.js ve controller.js. BuradaNodeJS'yi 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);

Ve kontrolör dosyasını klasöre: Burada her dosya için kodudur

(function(){ 
    var app = angular.module("testApp", []); 

    var TileController = function($scope){ 
     // add stuff to $scope as initilization   
    }; 

    app.controller("TileController", ["$scope", TileController]);  
})();

Bu kod çeşit eksik nerede onunla gitmek için emin değilim çünkü, ama bildiklerimi Onunla yapmak istiyorum.

Angular'ın kullandığı model, gelen HTTP istekleri (özellikle POST) üzerine Düğüm sunucusu tarafından ayrıştırılan bilgiler tarafından sürekli olarak güncelleştirilecektir. Düğüm bu istekleri ele alacak ve verileri bir şekilde modeli güncelleyecek olan Angular'a (controller.js dosyasında) iletecek ve bu şekilde görünümü güncelleyecektir.

Sorum, Node sunucusundan controller.js'ye bilgi aktarmanın ve bilgi eklendiğinde model/görünümü güncellemenin en iyi yolunun hangisidir?

kaynak

2015-11-11 FaTal Cubez

Ne soruyorsun Real- olduğunu zaman yetenekleri (düğüm veriyi aldığında açısal kapsamı otomatik olarak günceller). Bundan önce, aynı görevi yerine getirmeye çalışmayı öneriyorum, ancak gerçek zamanlı olarak değil. (örneğin, düğümden en son veri için bir GET yapan bir açısal düğmeli). –

Yani bu köşeli düğüm sunucusuna istekte bulunmalı mı diyorsunuz? –

Buradan, gerçek (neredeyse) gerçek zamanlı senkronizasyona ulaşmanın basit ama basit yolu, düğmeyi açısal olarak kaldırmaktır, ancak her X saniyede bir sonsuz GET verisini sonsuza kadar yapmaktır. –

Sadece HTTP isteklerini veaçısının eşdeğeri olan $interval'u kullanarak çok basit bir örnek yaptım. Bir klasördeki

Kaydet tüm dosyaları
POST index.html
node server.js
açık düğüm modülleri (beden-ayrıştırıcı, ekspres) İndir sunucusu (http://localhost:3000)
index.html, sunucuya POST'lenmiş olan her bir veriyi, ~ 3 saniye gecikmeli olarak görüntülemelidir.

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 (açısal)

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>

kaynak

2015-11-11 02:51:52

Awww, çok zekice. Bunu denemek zorunda kalacağım :) –

Hey, cevabından memnunsanız kabul etmeyi ve kapatmayı unutmayın :) –

NodeJS'yi Angular

cevap

İlgili konular