如果外部应用程序更改了持久模型(服务器数据库)，AngularJS 是否可以自动更新视图? [英] Can AngularJS auto-update a view if a persistent model (server database) is changed by an external app?

问题描述

我刚刚开始熟悉 AngularJS，但我想构建一个 Web 应用程序，该应用程序的视图会在服务器端发生变化时为用户实时自动更新(无刷新)数据库.

I'm just starting to familiarize with AngularJS, but I would like to build a web app that has a view that gets auto-upated in real-time (no refresh) for the user when something changes in the server-side database.

AngularJS 能否(大部分)自动为我处理这个问题?如果是这样，工作的基本机制是什么?

Can AngularJS handle this (mostly) automatically for me? And if so, what is the basic mechanism at work?

例如，您是否以某种方式设置 AngularJS 以定期轮询数据库以获取模型"更改?或者使用某种类似 Comet 的机制来通知 AngularJS 客户端代码模型已经改变?

For example, do you somehow setup AngularJS to poll the DB regularly for "model" changes? Or use some sort of Comet-like mechanism to notify AngularJS client-side code that the model has changed?

在我的应用程序中，挑战在于其他(非网络)服务器端软件有时会更新数据库.但是这个问题同样适用于纯 Web 应用程序，其中您可能有多个客户端通过 AngularJS Web 客户端更改数据库，并且当其中一个对数据库(模型)进行更改时，每个客户端都需要更新.

In my application, the challenge is that other (non-web) server-side software will be updating the database at times. But this question applies equally to pure web-apps where you might have multiple clients changing the database through AngularJS web clients, and they each need to be updated when one of them makes a change to the DB (model).

推荐答案

您有几个选择...

1. 您可以使用 $timeout 和 $http 每 X 毫秒进行一次轮询，或者如果您使用的数据连接到 REST 服务，你可以使用 $resource 而不是 $http.

1. You could do polling every X milliseconds using $timeout and $http, or if the data you're using is hooked up to a REST service, you could use $resource instead of $http.

您可以创建一个使用某些 Websocket 实现并使用 scope.$apply 来处理由套接字推送的更改的服务.下面是一个使用 socket.io 的例子，一个 node.js websocket 库:

You could create a service that uses some Websocket implementation and uses scope.$apply to handle changes that are pushed by the socket. Here's an example using socket.io, a node.js websocket library:

myApp.factory('Socket', function($rootScope) {
    var socket = io.connect('http://localhost:3000');

    //Override socket.on to $apply the changes to angular
    return {
        on: function(eventName, fn) {
            socket.on(eventName, function(data) {
                $rootScope.$apply(function() {
                    fn(data);
                });
            });
        },
        emit: socket.emit
    };
})

function MyCtrl($scope, Socket) {
    Socket.on('content:changed', function(data) {
        $scope.data = data;
    });
    $scope.submitContent = function() {
        socket.emit('content:changed', $scope.data);
    };
}

您可以获得真正的高科技并创建一个 websocket 实现，该实现将 Angular 模型与服务器同步.当客户端更改某些内容时，该更改会自动发送到服务器.或者如果服务器发生变化，它会被发送到客户端.
这是旧版本的 Angular 中的一个例子，再次使用 socket.io:https://github.com/mhevery/angular-node-socketio

编辑:对于 #3，我一直在使用 Firebase 来做到这一点.

EDIT: For #3, I've been using Firebase to do this.

这篇关于如果外部应用程序更改了持久模型(服务器数据库)，AngularJS 是否可以自动更新视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！