ngTable动态更新的三种方式-白红宇

ngTable动态更新的三种方式

阅读量：2725 次

发布时间：2019-05-13

本文共 4685 字，大约阅读时间需要 15 分钟。

，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript

weibo：@Conan_Z

blog:

email: bsspirit@gmail.com

转载请注明出处：

前言

表格是HTML中常见的表现形式，当我们用AngularJS做前端开发时，我可以选择用ngTable的开源组件。ngTable已经为了我们封装了常用的表格操作，节省我们大量的开发时间。

本文将介绍如何动态更新表格，分为3种方式：1. 前端更新, 2. Ajax更新, 3. websocket更新。

ngTable介绍

前端更新

Ajax更新

WebScoket更新

1. ngTable介绍

ngTable是一个基于AngularJS的directive设计一个表格项目，支持基本的表格操作，分页，排序，异步加载等功能。

项目地址：

开发环境还是基于我们之前用。

2. 前端更新

前端更新，是指在AngularJS中，通过JS计算，更新表格中的数据。

增加两个文件：

ngTable.html: AngularJS启动的APP

mytable.js: 实现脚本

依赖的JS库类，包括jquery,ng-table，可以自己手动下载配置到项目，也可以通过bower自动安装到项目中, bower的介绍，请参考：

增加文件：app/ngTable.html


    ngTable
    
    
     js更新
     
                     {
   {user.name}}         {
   {user.age}}

增加文件：scripts/demo/mytable.js

'use strict';var myTableApp = angular.module('myTable', ['ngTable']);function table1Ctrl($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);};

启动程序：

grunt server

打开浏览器

我们实现了，在AngularJS中，对ngTable的动态更新。

3. Ajax更新

Ajax更新，是指通过Ajax取数据，更新表格中的内容。

在刚才2个文件上面增加内容：

ngTable.html: AngularJS启动的APP

mytable.js: 实现脚本

ngTable.json：JSON数据文件

编辑文件：app/ngTable.html

新加新表格: ng-controller=”table2Ctrl”


    
     Ajax更新
     
                     {
   {user.name}}         {
   {user.age}}

编辑文件：scripts/demo/mytable.js

增加新controller: table2Ctrl

function table2Ctrl($scope,$http,$timeout){    $scope.users = [        {name: "Moroni", age: 0},        {name: "Enos", age: 0}    ];    $timeout(function(){        $http.get("/json/ngTable.json").success(function(data, status, headers, config){            $scope.users = data;        });        console.log("AJAX loading delay 3s.");    }, 3000);}

增加文件：json/ngTable.json

[    {"name": "Moroni", "age": 10},    {"name": "Enos", "age": 15}]

打开浏览器，看到效果

通过Ajax，等待3秒后，实现对ngTable的更新。

4. WebScoket更新

WebScoket更新，是指通过WebScoket协议由服务器端主动PUSH，更新ngTable表格中的内容。

通过WebSocket操作，会稍微有点复杂，我们需要调整一下应用的结构。

AngularJS(Socket.io.client) + Nodejs(Express3) + WebSocket(Socket.io)

安装express3, ejs, socket.io的依赖包

npm install express3npm install ejsnpm install socket.io

当然，再好一点的方法是，在package.json文件中，增加依赖关系再安装

~ vi package.json//部分代码"dependencies": {    "express":"~3.2.6",    "ejs":"0.8.4",    "socket.io": ">=0.9.16"    ...}~ npm install

需要修改3个文件：

ngTableApp.js: nodejs的启动文件

ngTable.html: AngularJS启动的APP

mytable.js: 实现脚本

增加文件：ngTableApp.js

~ vi ngTableApp.jsvar 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'));});

增加文件：views/ngTable.html


    ngTable
    
    
     WebSocket更新
     
                     {
   {user.name}}         {
   {user.age}}

编辑文件：scripts/demo/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]);    });}

启动Node: