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 somet

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.