В этой статье я хочу рассказать о связке AngularJS и Firebas в качестве хранилища данных.
Про AngularJS на Хабре написано много, а вот про Firebase совсем чуть чуть. По этому я решил заполнить этот пробел. Что же такое Firebase?
Firebas — это мощный сервис, предоставляющий API для хранения и синхронизации данных в реальном времени, сервер, на котором эти данные хранятся. Также из коробки мы имеем аутентификацию пользователей и поддержку различных платформ и фреймворков. Более подробную информацию можно получить на официальном сайте.
Также Firebase предоставляет замечательную библиотек для AngularJS — AngularFire.
Используя AngularJS и его прекрасный двусторонний дата биндинг вместе с Firebase, мы можем получить трехстороннюю синхронизацию данных. Однако, обо всем по порядку.
Итак, Geting started
Первым делом мы должны создать бесплатный аккаунт: Это можно сделать, пройдя по ссылке: www.firebase.com/signup/. После регистрации вы получите уникальный URL, который, в дальнейшем, будет использоваться для хранения и синхронизации данных.
Следующий шаг — добавление скриптов в ваш проект. Для использования AngularFire необходимо подключить следующие скрипты:
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
Также Firebase и AngularFire доступны для установки с помощью bower:
bower install firebase angularfire
После подключения необходимых скриптов мы можем добавить Firebas в наш AngularJS проект в качестве зависимостей.
Прежде всего, нужно добавить зависимость в модуль:
var app = angular.module("sampleApp", ["firebase"]);
После чего мы можем использовать его в контроллерах, директивах и сервисах:
app.controller("SampleCtrl", ["$scope", "$firebase",
function($scope, $firebase) {
var ref = new Firebase("https://<your-firebase>.firebaseio.com/");
// create an AngularFire reference to the data
var sync = $firebase(ref);
// download the data into a local object
$scope.data = sync.$asObject();
}
]);
Трехстороннее связывание
AngularJS известно своим двухсторонним связыванием дынных между моделью JavaScript и документной моделью браузера (DOM). Используя Farebase в связке с AngularJS мы можем организовать так называемое «трехстороннее связывание», которое позволит нам синхронизировать изменения в модели JavaScript, DOM и Firebase в реальном времени.
Для этого мы можем использовать метод $asObject(), чтобы создать синхронизируемый объект и привязать его к переменной из нашего $scope, с помощью метода $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);
// download the data into a local object
var syncObject = sync.$asObject();
// synchronize the object with a three-way data binding
// click on `index.html` above to see it used in the DOM!
syncObject.$bindTo($scope, "data");
});
Работа с колекциями
Трехстороннее связывание данных прекрасно работает с простыми объектами вида ключ/значение, но довольно часто возникают задачи, когда необходимо работать с колекциями (масивами). Для этого мы можем использовать метод $asArray().
Мы можем получить коллекцию с сервера вызвав метод $asArray, которая будет доступна только для чтения и добавить его в наш $scope:
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);
// create a synchronized array for use in our HTML code
$scope.messages = sync.$asArray();
});
Учитывая тот фактор, что массив одновременно синхронизирован с сервером и клиентом, его модификация может повредить целостность данных (повредить данные путем управления не теми записями), поэтому нельзя его модифицировать, используя методы 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-mail и пароля, а также аутентификацию с использованием популярных 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);
});
}
]);
Более подробно об аутентификации можно прочитать на официальном сайте.
Что дальше?
В данный момент я работаю над одним проектом, который использует Firebase как хранилище данных. В следующей статье я хочу рассказать о том, как применил данный сервис на живом проекте и что из этого вышло.
Автор: jenezis
