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

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)