Can AngularJS auto-update a view if a persistent model (server database) is changed by an external app?

Question

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.

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

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?

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).

Answer 1

You have a few choices...

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.

2. 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);     }; } 

3. You could get really high tech and create a websocket implementation which syncs an Angular model with the server. When the client changes something, that change gets automatically sent to the server. Or if the server changes, it gets sent to the client.
   Here's an example of that in an old version of Angular, again using socket.io: https://github.com/mhevery/angular-node-socketio

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

Answer 2

Here's an implementation that uses jetty instead node. The angularjs part is based on the angular-seed app. I'm not sure if the angular code is idiomatic...but I've tested that this works. HTH -Todd.

TimerWebSocketServlet see

https://gist.github.com/3047812

controllers.js

// ------------------------------------------------------------- // TimerCtrl // ------------------------------------------------------------- function TimerCtrl($scope, CurrentTime) {     $scope.CurrentTime = CurrentTime;     $scope.CurrentTime.setOnMessageCB(         function (m) {             console.log("message invoked in CurrentTimeCB: " + m);             console.log(m);             $scope.$apply(function(){                 $scope.currentTime = m.data;             })         }); } TimerCtrl.$inject = ['$scope', 'CurrentTime']; 

services.js

angular.module('TimerService', [], function ($provide) {     $provide.factory('CurrentTime', function () {         var onOpenCB, onCloseCB, onMessageCB;         var location = "ws://localhost:8888/api/timer"         var ws = new WebSocket(location);         ws.onopen = function () {             if(onOpenCB !== undefined)             {                 onOpenCB();             }         };         ws.onclose = function () {             if(onCloseCB !== undefined)             {                 onCloseCB();             }         };         ws.onmessage = function (m) {             console.log(m);             onMessageCB(m);         };          return{             setOnOpenCB: function(cb){                onOpenCB = cb;             },             setOnCloseCB: function(cb){                 onCloseCB = cb;             },             setOnMessageCB: function(cb){                 onMessageCB = cb;             }         };     })}); 

web.xml

<servlet>     <servlet-name>TimerServlet</servlet-name>     <servlet-class>TimerWebSocketServlet</servlet-class>     <load-on-startup>0</load-on-startup> </servlet> <servlet-mapping>     <servlet-name>TimerServlet</servlet-name>     <url-pattern>/api/timer/*</url-pattern> </servlet-mapping>