この記事では、データウェアハウスとしてのAngularJSと
Firebaseの組み合わせについてお話したいと思います。
Habr上のAngularJSについてはたくさん書かれていますが、Firebaseについてはかなり書かれています。 したがって、私はこのギャップを埋めることにしました。 Firebaseとは何ですか？
Firebaseは、データをリアルタイムで保存および同期するためのAPI（このデータが保存されているサーバー）を提供する強力なサービスです。 また、すぐに使用できるように、さまざまなプラットフォームとフレームワークのユーザー認証とサポートがあります。 詳細については、
公式ウェブサイトをご覧ください 。
Firebaseは、AngularJS-
AngularFire用の優れたライブラリも提供します。
AngularJSとFirebaseとの優れた双方向データバインディングを使用して、3方向のデータ同期を取得できます。 ただし、最初にまず最初に。
はじめに
まず、無料のアカウントを作成する必要があります。 これは、リンク
www.firebase.com/signupをクリックして実行できます。 登録後、一意のURLを受け取ります。これは、将来、データの保存と同期に使用されます。
次のステップは、プロジェクトにスクリプトを追加することです。 AngularFireを使用するには、次のファイルを含める必要があります。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
FirebaseとAngularFireも、bowerを使用してインストールできます。
bower install firebase angularfire
必要なスクリプトを接続したら、Firebaseを依存関係としてAngularJSプロジェクトに追加できます。
まず、モジュールに依存関係を追加する必要があります。
var app = angular.module("sampleApp", ["firebase"]);
次に、コントローラー、ディレクティブ、およびサービスで使用できます。
app.controller("SampleCtrl", ["$scope", "$firebase", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/");
三角バインディング
AngularJSは、JavaScriptモデルとDOM間の双方向メロンバインディングで知られています。 FarebaseをAngularJSと組み合わせて使用すると、いわゆる「スリーウェイバインディング」を整理できます。これにより、JavaScript、DOM、Firebaseモデルの変更をリアルタイムで同期できます。
これを行うには、$ asObject（）メソッドを使用して同期オブジェクトを作成し、$ bindTo（）メソッドを使用して$スコープの変数にバインドします。 サンプルコードを次に示します。
var app = angular.module("sampleApp", ["firebase"]); app.controller("SampleCtrl", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/data"); var sync = $firebase(ref);
コレクションを操作する
3方向のデータバインディングは、単純なキー/値オブジェクトでうまく機能しますが、コレクション（配列）を操作する必要がある場合にタスクが発生することがよくあります。 このために、$ asArray（）メソッドを使用できます。
サーバーからコレクションを取得するには、$ asArrayメソッドを呼び出します。このメソッドは読み取り専用で、$スコープに追加します。
var app = angular.module("sampleApp", ["firebase"]); app.controller("SampleCtrl", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/messages"); var sync = $firebase(ref);
配列がサーバーとクライアントと同時に同期されるという事実を考えると、その変更はデータの整合性を損なう可能性があります（間違ったレコードを管理することによりデータを損傷します）。したがって、push（）およびsplice（）メソッドを使用して変更できません。
これを行うために、AngularFireは配列を操作するための一連のメソッドを提供しています（$ add、$ save、$ remove）。 データ配列の同期の例を次に示します。
var app = angular.module("sampleApp", ["firebase"]); app.controller("SampleCtrl", function($scope, $firebase) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/messages"); var sync = $firebase(ref); $scope.messages = sync.$asArray(); $scope.addMessage = function(text) { $scope.messages.$add({text: text}); } });
認証を追加する
Firebaseは、ユーザーデータ管理ソリューションと完全なクライアント側認証を提供する認証サービスを提供します。 Firebaseは、すぐに使用できるEメールとパスワードを使用した匿名認証、および一般的なOAuthプロバイダー（Facebook、Github、Google、Twitter）を使用した認証をサポートしています。
AngularFireライブラリは、$ firebaseAuthというサービスを提供します。これは、Firebaseライブラリが提供する認証方法のラッパーです。 このサービスは、依存関係としてサービス、コントローラー、およびディレクティブに追加できます。 Facebookを使用した認証の例を次に示します。
app.controller("SampleCtrl", ["$scope", "$firebaseAuth", function($scope, $firebaseAuth) { var ref = new Firebase("https://<your-firebase>.firebaseio.com/"); var auth = $firebaseAuth(ref); auth.$authWithOAuthPopup("facebook").then(function(authData) { console.log("Logged in as:", authData.uid); }).catch(function(error) { console.error("Authentication failed: ", error); }); } ]);
認証の詳細については、
公式Webサイトを参照してください 。
次は？
現在、Firebaseをデータウェアハウスとして使用するプロジェクトに取り組んでいます。 次の記事では、このサービスを実際のプロジェクトにどのように適用したか、およびその結果についてお話したいと思います。