Menu
I'm trying to make a web application that uses a Node server as the back end and Angular to take information from the Node server and create a responsive front end. Currently, in my simple application, I have two js files: server.js and controller.js. Here is the code for each file:
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);
And here's the controller file:
(function(){
var app = angular.module("testApp", []);
var TileController = function($scope){
// add stuff to $scope as initilization
};
app.controller("TileController", ["$scope", TileController]);
})();
This code is sort of incomplete because I'm not sure where to go with it, but I know what I want to do with it.
The model that Angular uses is going to be constantly updated by information parsed by the Node server upon incoming HTTP requests (specifically POST). Node is going to handle these requests and somehow pass the data along to Angular (in the controller.js file), which is going to update the model, and update the view along with that.
My question is what is the best way to pass information along from the Node server to the controller.js and update the model/view when the information is added?
471
I made a very simple example using just HTTP requests, and $interval, which is angular's equivalent of window.setInterval.
node server.jsserver.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
