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

Angular on Fire!

Angular on Fire!

How to take advantage of Firebase while developing client side apps at the Frontend Auckland Meetup in New Zealand during my round the world trip. #rtw80

https://www.meetup.com/Frontend-Auckland-Meetup/events/237744877/

More Decks by Pablo Villoslada Puigcerber

Other Decks in Programming

Transcript

  1. JSON object { "title": "The Hobbit: An Unexpected Journey", "url":

    "https://ontdek.ziggo.nl/films-series/on- demand/detail/45117/hobbit-the-an-unexpected- journey", "year": "2012", "genre": "adventure, fantasy", "director": "Peter Jackson", "plot": "A reluctant hobbit, Bilbo Baggins, sets out to the Lonely Mountain with a spirited group of dwarves to reclaim their mountain home - and the gold within it - from the dragon Smaug." }
  2. { "angular-on-fire-20bf9": { "-KdyADmROyZIMz6E5jC_": { "title": "The Hobbit: An Unexpected

    Journey", "url": "https://ontdek.ziggo.nl/films-series/ on-demand/detail/45117/hobbit-the-an-unexpected- journey", "year": "2012", "director": "Peter Jackson" } } } JSON tree
  3. { "angular-on-fire-20bf9": { "movies": { "-KdyADmROyZIMz6E5jC_": { "title": "The Hobbit:

    An Unexpected Journey" }, "-KdyNaUNgiZt8FEZ51Vu": { "title": "Black Sheep" }, "-KdyOX4pxaMJ_4jcYnjb": { "title": "30 Days of Night" } } } }
  4. Get list of movies var database = firebase.database(); var moviesRef

    = database.ref('movies'); moviesRef.once('value', function(snapshot) { console.log(snapshot.val()); });
  5. { "angular-on-fire-20bf9": { "movies": { "30-days-of-night": { "title": "30 Days

    of Night" }, "black-sheep": { "title": "Black Sheep" }, "the-hobbit": { "title": "The Hobbit: An Unexpected Journey" } } } }
  6. { "the-hobbit": { "title": "The Hobbit: An Unexpected Journey", "genre":

    "adventure, fantasy" } } Two genres? Doesn’t work!
  7. { "genres": { "adventure": { "mission-impossible": true, "the-hobbit": true },

    "comedy": {}, "fantasy": { "the-hobbit": true } } }
  8. { "moviesByGenre": { "adventure": { "the-hobbit": { "title": "The Hobbit:

    An Unexpected Journey", "year": "2012", "director": "Peter Jackson" } }, "fantasy": { "the-hobbit": { "title": "The Hobbit: An Unexpected Journey", "year": "2012", "director": "Peter Jackson" } } } }
  9. Rating child key { "the-hobbit": { "title": "The Hobbit: An

    Unexpected Journey", "genre": "adventure, fantasy", "rating": 7.9 } }
  10. How data is ordered 1. null 2. false 3. true

    4. numeric ASC 5. string ASC lexicographically 6. object
  11. How movies are ordered 1. null (movies without rating) 2.

    false 3. true 4. numeric ASC (movies ordered from 0 to 10) 5. string ASC lexicographically 6. object
  12. Negative ratings? { "the-hobbit": { "title": "The Hobbit: An Unexpected

    Journey", "genre": "adventure, fantasy", "rating": -7.9 } }
  13. { "best-movie": { "title": "Best Movie", "rating": 10, "sorting": 1

    }, "second-best-movie": { "title": "Second Best Movie", "rating": 9.8, "sorting": 2 } } Sorting child key
  14. import {Component} from '@angular/core'; import {AngularFire, FirebaseListObservable} from 'angularfire2'; @Component({

    selector: 'movie-list', template: `<ul> <li *ngFor="let movie of movies | async"> {{ movie.title }} </li> </ul>` }) export class MovieListComponent { movies: FirebaseListObservable<any[]>; constructor(af: AngularFire) { this.movies = af.database.list('/movies'); } }