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

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.


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>


What you are looking for is Firebase and Deployd.Firebase comes with an adapter too that makes using it a breeze: http://angularfire.com/