web-dev-qa-db-ja.com

サーバーとクライアント間でデータを自動的に同期するAngularJS

AngularJSのドキュメントには、見つけられないように見えるものや、たぶん欠落しているものがあります。

バックエンドでNodeJSとExpressを使用してWebアプリを作成していますが、フロントエンドでAngularと対話する方法を理解しようとしています。特に、 Angularから情報を取得するためのJSON API。フロントエンドが常に最新であることを望みます。

私の質問は：

  • 双方向のデータバインディング機能は、Angular（$ resourceまたは$ http）がn秒ごとにサーバーからデータを自動的にフェッチしますか？
  • 自然に長いポーリング、短いポーリング、またはWebソケットを使用しますか？
  • サーバーとクライアントの同期を実現するためにJQueryが必要ですか、それともAngularですべてを実行できますか？
  • この動作を実現するには、追加のコードを追加する必要がありますか？ $ timeoutを使用する必要がありますか？

私が見つけると思われるすべての例では、クライアントがデータを1回フェッチする必要があります。データをサーバーと同期していません。

angularjsangular-resource
58
vilijou

AngularJSの双方向バインディングは、データモデル（$ scope）とビュー（ディレクティブ）を指します。たとえば、モデルのデータが変更された場合、ビューは自動的に更新されます。同様に、ユーザーがビューのデータを変更すると、モデルは自動的に更新されます。

Webサービスとのやり取りは、$ httpサービスモジュールを介して行われます。したがって、RESTful APIからデータを取得するには、次のようにします。

$http.get('/someUrl').success(successCallback);

$ httpの完全なドキュメントは AngularJSサイト にあります。 jQueryの$ .ajaxメソッドに非常に似ていることがわかると思います。 angleの$ timeoutサービス（基本的にはsetTimeoutのラッパー）を使用して、短いポーリング用に$ http.get（）を簡単にセットアップします。

AngularJSクライアントとサーバーAPI間のリアルタイム更新については、 Socket.io を調べてください。 node.jsを使用して、ブラウザーとサーバー間のライブソケット接続を作成し、古いブラウザー用のフォールバックメカニズム（フラッシュ、ロングポーリング）を備えています。 GitHubには、Socket.ioでAngularJSを設定する方法を示す定型プロジェクトがあります。 https://github.com/btford/angular-socket-io-seed

要点をまとめると：

双方向のデータバインディング機能は、Angular（$ resourceまたは$ http）は、n秒ごとにサーバーからデータを自動的にフェッチしますか？

いいえ、双方向バインディングはAngularモデルとビューの間です。

自然に長いポーリング、短いポーリング、またはWebソケットを使用しますか？

デフォルトでは、Angularにはこれらのいずれも含まれていません。自分で設定する必要があります。

サーバーとクライアントの同期を実現するためにJQueryが必要ですか、それともAngularですべてを実行できますか？

$ httpは、広い意味で、Angular jQueryの$ .ajaxと同等です

この動作を実現するには、追加のコードを追加する必要がありますか？ $ timeoutを使用する必要がありますか？

短いポーリングには$ timeoutを使用するか、長いポーリングやWebソケットには独自のソリューションを展開します（ angular-socket-io-seed プロジェクトを参照）。

81
eterps