永続モデル（サーバーデータベース）が外部アプリによって変更された場合、AngularJSはビューを自動更新できますか？

Question 1

AngularJSに慣れ始めたばかりですが、サーバー側のデータベースで何かが変更されたときに、ユーザーがリアルタイムで（更新なしで）自動更新されるビューを持つWebアプリを構築したいと思います。

AngularJSはこれを（ほとんど）自動的に処理できますか？もしそうなら、機能している基本的なメカニズムは何ですか？

たとえば、「モデル」の変更についてDBを定期的にポーリングするようにAngularJSを設定しますか？または、Cometのようなメカニズムを使用して、モデルが変更されたことをAngularJSクライアント側コードに通知しますか？

私のアプリケーションでは、他の（Web以外の）サーバー側ソフトウェアがデータベースを更新することがあるという課題があります。ただし、この質問は、AngularJS Webクライアントを介してデータベースを変更する複数のクライアントが存在する可能性がある純粋なWebアプリにも同様に当てはまり、そのうちの1つがDB（モデル）に変更を加えるときにそれぞれを更新する必要があります。

Question 2

いくつかの選択肢があります...

$timeoutとを使用してXミリ秒ごとにポーリングを実行でき$httpます。または、使用しているデータがRESTサービスに接続されている場合は、の$resource代わりにを使用できます$http。

Websocketの実装を使用scope.$applyし、ソケットによってプッシュされた変更を処理するために使用するサービスを作成できます。node.jsWebSocketライブラリであるsocket.ioを使用した例を次に示します。

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

本当にハイテクになり、Angularモデルをサーバーと同期するWebSocket実装を作成できます。クライアントが何かを変更すると、その変更は自動的にサーバーに送信されます。または、サーバーが変更された場合、サーバーはクライアントに送信されます。
これは、古いバージョンのAngularで、socket.ioを使用した例です：https：//github.com/mhevery/angular-node-socketio

編集：＃3では、Firebaseを使用してこれを行っています。

Question 3

これは、ノードの代わりに桟橋を使用する実装です。anglejsパーツは、angular-seedアプリに基づいています。角度コードが慣用的であるかどうかはわかりません...しかし、これが機能することをテストしました。HTH-トッド。

TimerWebSocketServletを参照してください

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>

Question 4

探しているのはFirebaseとDeployedです。Firebaseには、簡単に使用できるアダプターも付属しています：http：//angularfire.com/

Question 5

「DiscoverMeteor」の本によると、Angularの時計/スコープは反応性に関するMeteorの計算に似ています...しかし、Angularはクライアントのみであり、Meteorよりもきめ細かい制御を提供しません。

私の印象では、Angularを使用すると、既存のアプリに反応性を追加するのに適している可能性がありますが、Meteorを使用すると、全体的に急上昇します。しかし、私はまだAngularの実際の経験がありません（いくつかの小さなMeteorアプリを作成しましたが）。

Question 6

したがって、Andy Joslinは、私の意見の中で最良の解決策である3番目のオプションについて言及しました。これは、WebSocketまたはその他の非同期ライブラリを介して双方向に状態を維持することです（これは、Chrome拡張機能用のChromeメッセージAPIです。たとえば、アプリ）、およびtoddgは、それがどのように達成されるかの例を示しています。ただし、彼の例では、AngularJSにアンチパターンを実装しています。サービスはコントローラーを呼び出しています。代わりに、モデルをサービス内に配置してから、コントローラーから参照する必要があります。

サービスソケットコールバックはサービスモデルを変更し、コントローラーから参照されるため、ビューを更新します。ただし、再割り当て可能なプリミティブデータ型または変数を扱っている場合は注意が必要です。これを機能させるには、コントローラーを監視する必要があります。