FaT*_*bez 10 javascript node.js angularjs
我正在尝试创建一个使用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使用的模型将通过Node服务器在传入的HTTP请求(特别是POST)时解析的信息不断更新.Node将处理这些请求并以某种方式将数据传递给Angular(在controller.js文件中),Angular将更新模型,并随之更新视图.
我的问题是什么是从Node服务器传递信息到controller.js的最佳方法,并在添加信息时更新模型/视图？
我只使用HTTP请求做了一个非常简单的例子$interval,这是角度的等价物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(有角度的)
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>
| 归档时间： |
|
| 查看次数： |
6117 次 |
| 最近记录： |