Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How Angular 2 Makes Firebase Easy

sararob
February 10, 2016

How Angular 2 Makes Firebase Easy

Firebase is a powerful platform for building mobile and web applications. Use Firebase to store and sync data instantly, authenticate users, and easily deploy your web app. In this talk, you’ll learn how you can use Firebase to add a backend to your Angular app in minutes.

sararob

February 10, 2016
Tweet

More Decks by sararob

Other Decks in Programming

Transcript

  1. // Create a Firebase database reference const ref = new

    Firebase("https://fb-a2.firebaseio.com/"); // Write data to Firebase ref.set("Hello London JavaScript!"); // Sync data ref.on("value", (snapshot) => console.log(snapshot.val()));
  2. London JavaScript, February 2016 $digest angular.module(“app”) .controller(“MyCtrl”, MyCtrl); function MyCtrl($scope)

    { var ref = new Firebase(“<my-firebase-app>”); ref.on(“value”, function(snap) { // needs a $timeout $scope.obj = snap.val(); }); }
  3. London JavaScript, February 2016 Array Handling var ref = new

    Firebase(“<my-firebase-app>”); ref.on(“value”, function(snap) { // Firebase returns data as an object $scope.obj = snap.val(); });
  4. London JavaScript, February 2016 Promises angular.module(“app”, [“ngRoute”]) .config(ApplicationConfig); function ApplicationConfig($routeProvider)

    { $routeProvider.when(“/”, { controller: “MyCtrl”, template: “view.html”, resolve: { items: function() { // return a promise here } } }); }
  5. London JavaScript, February 2016 Cool new features in Angular 2

    Zones + Change Detection Pipes Observables
  6. London JavaScript, February 2016 AngularFire 2 (super early alpha) $

    npm install --save angularfire2 github.com/angular/angularfire2 npmjs.com/package/angularfire2
  7. London JavaScript, February 2016 Angular + Firebase We’ll build... a

    social, local, realtime chat app with i18n support
  8. London JavaScript, February 2016 Angular CLI (super early Alpha) $

    npm install --save angular-cli $ ng new my-awesome-app $ cd my-awesome-app $ ng serve
  9. London JavaScript, February 2016 Angular CLI (super early Alpha) $

    npm install --save angular-cli $ ng new my-awesome-app $ cd my-awesome-app $ ng serve
  10. London JavaScript, February 2016 Angular CLI (super early Alpha) $

    npm install --save angular-cli $ ng new my-awesome-app $ cd my-awesome-app $ ng serve
  11. London JavaScript, February 2016 Angular CLI (super early Alpha) $

    npm install --save angular-cli $ ng new my-awesome-app $ cd my-awesome-app $ ng serve
  12. London JavaScript, February 2016 Step 1: Instantiate our Firebase URL

    bootstrap(AngularfireDemoApp, [ defaultFirebase('https://FB-URL.firebaseio.com'), FIREBASE_PROVIDERS ]);
  13. London JavaScript, February 2016 Step 2: push data to Firebase

    return PromiseObservable .create(this._fbRef.child('messages').push({ message, user }));
  14. London JavaScript, February 2016 A closer look at pipes Pipes

    - transform data as input into a desired output • Stateless pipes - transform data without remembering or detecting anything about it • Stateful pipes (async) - receive a Promise or Observable as input, maintain a subscription to that input
  15. London JavaScript, February 2016 Step 3: use the async pipe

    in our template template: `<div *ngFor="#message of messages | async"></div>`
  16. London JavaScript, February 2016 Resources Demo App github.com/jeffbcross/qa-app-demo Angular 2

    Angular.io github.com/angular/angular angular.io/docs/ts/latest/guide/template- syntax.html Firebase Firebase.com AngularFire2 github.com/angular/angularfire2 npmjs.com/package/angularfire2 Angular CLI github.com/angular/angular-cli npmjs.com/package/angular-cli npmjs.com/package/angular-cli-firebase- hosting
  17. London JavaScript, February 2016 Thank You! Jeff Cross / @jeffbcross

    David East / @_davideast Sara Robinson / @SRobTweets