AngularFire

What we're going to cover

What is Firebase?

Role of a backend in an Angular App

Building a TODO app with Angular + Firebase

User Authentication and Security

Firebase: A Realtime Synchronization Network

Build Apps fast - no servers required!

Data persistence, but in realtime

With authentication & security rules, serves as the complete backend

Firebase: Wire up a backend with ease!

Angular: A Superheroic MVW Framework

Build Apps fast wihout worrying about data binding

Declaratively specify views in plain HTML

<body ng-app>
  <div ng-controller="MyApp">
    <input type="text" ng-model="name"/><br/>
    <h1 ng-cloak>Hi {{name}}!</h1>
  </div>
</body>

Firebase ❤ Angular = AngularFire

<body ng-app="myModule">
  <div ng-controller="myApp">
    <input type="text" ng-model="name"/><br/><h1>Hi {{name}}!</h1>
  </div>
</body>
<script>
  angular.module("myModule", ["firebase"]).
  controller("myApp", function($scope, angularFire) {
    var url = "https://anant.firebaseio.com/angular";
    angularFire(url, $scope, "name", "");
  });
</script>

A More Complex Example

User Authentication in AngularFire

AngularFire provides an easy way to integrate user login via JSON Web Tokens.

Convenience wrappers over Facebook, Github, Twitter and Persona.

<body ng-controller="MyController">
  <span ng-show="user">
    {{user.name}} | <a href="#" ng-click="logout()">Logout</a>
  </span>
  <a href="#" ng-hide="user" ng-click="login()">Login</a>
  <script>
    function MyController($scope, angularFireAuth) {
      var url = "https://anant.firebaseio.com/";
      angularFireAuth.initialize(url, {scope: $scope, name: "user"});
      $scope.login = function() {
        angularFireAuth.login("facebook");
      };
      $scope.logout = function() {
        angularFireAuth.logout();
      };
    }
  </script>
</body>

Security with Firebase

Security in a client-only app has always been a big open question

Tie it to authentication and express logic as lightweight expressions

{
  "rules": {
    "$userid": {
      ".read": true,
      ".write": "auth.id == $userid"
    }
  }
}