[Из песочницы] Создание AngularJS приложения c использованием Firebase
В этой статье я хочу рассказать о связке AngularJS и Firebase в качестве хранилища данных.Про AngularJS на Хабре написано много, а вот про Firebase совсем чуть-чуть. По этому я решил заполнить этот пробел. Что же такое Firebase?
Firebase — это мощный сервис, предоставляющий API для хранения и синхронизации данных в реальном времени, сервер, на котором эти данные хранятся. Также из коробки мы имеем аутентификацию пользователей и поддержку различных платформ и фреймворков. Более подробную информацию можно получить на официальном сайте.
Также Firebase предоставляет замечательную библиотеку для AngularJS — AngularFire.
Используя AngularJS и его прекрасный двусторонний дата биндинг вместе с Firebase, мы можем получить трехстороннюю синхронизацию данных. Однако, обо всем по порядку.
Getting startedПервым делом мы должны создать бесплатный аккаунт. Это можно сделать, пройдя по ссылке: www.firebase.com/signup/. После регистрации вы получите уникальный URL, который, в дальнейшем, будет использоваться для хранения и синхронизации данных.Следующий шаг — добавление скриптов в ваш проект. Для использования AngularFire необходимо подключить следующие файлы:
Также 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://
// 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://
// 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://
Для этого AngularFire предоставляет набор методов для работы с массивами ($add, $save, $remove). Вот пример синхронизации массива данных:
var app = angular.module («sampleApp», [«firebase»]);
app.controller («SampleCtrl», function ($scope, $firebase) {
var ref = new Firebase («https://
$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://
Что дальше? В данный момент я работаю над одним проектом, который использует Firebase как хранилище данных. В следующей статье я хочу рассказать о том, как применил данный сервис на живом проекте и что из этого вышло.
