ngTable动态更新的三种方式
前言
表格是HTML中常见的表现形式，当我们用AngularJS做前端开发时，我可以选择用ngTable的开源组件。ngTable已经为了我们封装了常用的表格操作，节省我们大量的开发时间。
本文将介绍如何动态更新表格，分为3种方式：1. 前端更新, 2. Ajax更新, 3. websocket更新。
ngTable介绍
ngTable是一个基于AngularJS的directive设计一个表格项目，支持基本的表格操作，分页，排序，异步加载等功能。
项目地址：https://github.com/esvit/ng-table
前端更新
前端更新，是指在AngularJS中，通过JS计算，更新表格中的数据。
1、建立文件夹FrontUpdate
2、在文件夹FrontUpdate中分别建立文件package.json、bower.json
package.json
{
"version": "0.0.0",
"private": true,
"name": "frontUpdate-ngTable",
"description": "AngularJS前端更新ngTable",
"repository": "",
"license": "MIT",
"devDependencies": {
"bower": "^1.3.1",
"http-server": "^0.6.1",
"karma": "^0.12.16",
"karma-chrome-launcher": "^0.1.4",
"karma-firefox-launcher": "^0.1.3",
"karma-jasmine": "~0.1.0",
"protractor": "^2.1.0",
"shelljs": "^0.2.6",
"tmp": "0.0.23"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a 0.0.0.0 -p 8000",
"pretest": "npm install",
"test": "node node_modules/karma/bin/karma start test/karma.conf.js",
"test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor test/protractor-conf.js",
"update-index-async": "node -e "require('shelljs/global'); sed('-i', /\/\/@@NG_LOADER_START@@[\s\S]*\/\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\n//@@NG_LOADER_END@@', 'app/index-async.html');""
}
}
bower.json
{
"name": "frontUpdate-ngTable",
"description": "AngularJS前端更新ngTable",
"version": "0.0.0",
"homepage": "",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.4.3",
"angular-mocks": "1.4.3",
"jquery": "~2.1.1",
"bootstrap": "~3.X.X",
"angular-route": "1.4.3",
"angular-resource": "1.4.3",
"angular-animate": "1.4.3",
"ng-table":"0.8.3"
}
}
3、在文件夹FrontUpdate中建立app文件夹
4、在app下建立文件ngTable.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>ngTable</title>
<link rel="stylesheet" href="styles/bootstrap.css">
</head>
<body ng-app="myTable">
<div class="span8" ng-controller="table1Ctrl">
<h3>js更新</h3>
<table ng-table class="table">
<tr ng-repeat="user in users">
<td title="Name">{{user.name}}</td>
<td title="Value">{{user.age}}</td>
</tr>
</table>
</div>
<script src="../bower_components/jquery/jquery.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/ng-table/ng-table.src.js"></script>
<script src="js/mytable.js"></script>
</body>
</html>
5、在app下建立文件夹js，并建立文件mytable.js
'use strict';
var myTableApp = angular.module('myTable', ['ngTable']);
myTableApp.controller('myCtrl',['$scope',function($scope){
$scope.users = [
{name: "Moroni", age: 0},
{name: "Enos", age: 0}
];
setInterval(function(){
$scope.users = [
{name: "Moroni", age: Math.random()*100},
{name: "Enos", age: Math.random()*100}
];
$scope.$apply();
console.log($scope.users[0]);
},2000);
}]);
6、安装依赖包： npm install
7、启动http-server： npm start ,在浏览器中输入http://localhost:8000/app/ngTable.html
Ajax更新
Ajax更新，是指通过Ajax取数据，更新表格中的内容。
在刚才2个文件上面增加内容：
ngTable.html: AngularJS启动的APP
mytable.js: 实现脚本
ngTable.json：JSON数据文件
编辑文件：app/ngTable.html
新加新表格: ng-controller=”table2Ctrl”
<!doctype html>
<head>
<meta charset="utf-8">
<title>ngTable</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myTable">
<div class="span8" ng-controller="table1Ctrl">
<h3>js更新</h3>
<table ng-table class="table">
<tr ng-repeat="user in users">
<td title="Name">{{user.name}}</td>
<td title="Value">{{user.age}}</td>
</tr>
</table>
</div>
<hr>
<div class="span8" ng-controller="table2Ctrl">
<h3>Ajax更新</h3>
<table ng-table class="table">
<tr ng-repeat="user in users">
<td title="Name">{{user.name}}</td>
<td title="Value">{{user.age}}</td>
</tr>
</table>
</div>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/ng-table/dist/ng-table.min.js"></script>
<script src="js/mytable.js"></script>
</body>
</html>
编辑文件：js/mytable.js
增加新controller: table2Ctrl
'use strict';
var myTableApp = angular.module('myTable', ['ngTable']);
myTableApp.controller('table1Ctrl',['$scope',function($scope){
$scope.users = [
{name: "Moroni", age: 0},
{name: "Enos", age: 0}
];
setInterval(function(){
$scope.users = [
{name: "Moroni", age: Math.random()*100},
{name: "Enos", age: Math.random()*100}
];
// $scope.$apply();
// console.log($scope.users[0]);
},2000);
}]);
myTableApp.controller('table2Ctrl',['$scope','$http','$timeout',function($scope,$http,$timeout){
$scope.users = [
{name: "Moroni", age: 0},
{name: "Enos", age: 0}
];
$timeout(function(){
$http.get("/app/json/ngTable.json").success(function(data, status, headers, config){
$scope.users = data;
});
console.log("AJAX loading delay 3s.");
}, 3000);
}]);
增加文件：app/json/ngTable.json
[
{"name": "Moroni", "age": 10},
{"name": "Enos", "age": 15}
]
打开浏览器，看到效果
通过Ajax，等待3秒后，实现对ngTable的更新。
WebScoket更新
1、新建文件夹：WebScoketUpdate
2:、拷贝前面的 package.json、bower.json过来
3、修改package.json，引入express、ejs、socket.io
{
"version": "0.0.0",
"private": true,
"name": "frontUpdate-ngTable",
"description": "AngularJS前端更新ngTable",
"repository": "",
"license": "MIT",
"devDependencies": {
"express":"~4.1.1",
"ejs":">=0.8.4",
"socket.io": ">=0.9.16",
"bower": "^1.3.1",
"grunt": "^0.4.5",
"grunt-babel": "^6.0.0",
"http-server": "^0.6.1",
"karma": "^0.12.16",
"karma-chrome-launcher": "^0.1.4",
"karma-firefox-launcher": "^0.1.3",
"karma-jasmine": "~0.1.0",
"load-grunt-tasks": "^3.4.0",
"protractor": "^2.1.0",
"shelljs": "^0.2.6",
"tmp": "0.0.23"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a 0.0.0.0 -p 8000",
"pretest": "npm install",
"test": "node node_modules/karma/bin/karma start test/karma.conf.js",
"test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor test/protractor-conf.js",
"update-index-async": "node -e "require('shelljs/global'); sed('-i', /\/\/@@NG_LOADER_START@@[\s\S]*\/\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\n//@@NG_LOADER_END@@', 'app/index-async.html');""
}
}
4、在文件夹FrontUpdate中建立app文件夹
5、增加文件：ngTableApp.js
var express = require('express')
, path = require('path')
, ejs = require('ejs')
, app = express()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
io.on('connection', function (socket) {
console.log(socket.handshake);
setInterval(function(){
var users= [
{"name": "Moroni", "age": Math.round(Math.random() * 100)},
{"name": "Enos", "age":Math.round(Math.random() * 100)}
];
socket.emit('ngTableSocket', users);
},2000);
});
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'app')));
if (app.get('env') === 'development') {
app.use(express.errorHandler());
};
if (app.get('env') === 'production') {
// TODO
};
app.get('/', function(req, res){
res.sendfile('views/ngTable.html');
});
server.listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});
6、增加文件：views/ngTable.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>ngTable</title>
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myTable">
<div class="span8" ng-controller="table3Ctrl">
<h3>WebSocket更新</h3>
<table ng-table class="table">
<tr ng-repeat="user in users">
<td title="Name">{{user.name}}</td>
<td title="Value">{{user.age}}</td>
</tr>
</table>
</div>
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../bower_components/ng-table/dist/ng-table.min.js"></script>
<script src="../../node_modules/socket.io/lib/socket.js"></script>
<script src="../js/mytable.js"></script>
</body>
</html>
7、编辑文件：js/mytable.js
var socket = io.connect("localhost");
function table3Ctrl($scope){
$scope.users = [
{name: "Moroni", age: 0},
{name: "Enos", age: 0}
];
socket.on('ngTableSocket', function (data) {
$scope.users = data;
$scope.$apply();
console.log($scope.users[0]);
});
}
8、安装依赖包： npm install
9、启动Node:
node ngTableApp.js
http://ng-table.com/#/demo/todo