Successfully reported this slideshow.

Angular is one fire(base)! - Shmuela Jacobs

0

Share

Upcoming SlideShare
Angular 4 with firebase
Angular 4 with firebase
Loading in …3
×
1 of 19
1 of 19

More Related Content

More from Codemotion Tel Aviv

Related Books

Free with a 14 day trial from Scribd

See all

Angular is one fire(base)! - Shmuela Jacobs

  1. 1. Angular is on Fire(base)! Shmuela Jacobs
  2. 2. Shmuela Jacobs Front-end Developer & Consultant
  3. 3. Firebase
  4. 4. 4
  5. 5. https://github.com/angular/angular-cli Angular CLI
  6. 6. https://github.com/angular/angularfire2 AngularFire2
  7. 7. Angular & Firebase Authentication Real Time Database Cloud Functions Best Practices NEW!
  8. 8. Project Setup npm i angular-cli -g ng new my-app --style=scss --prefix=sj -it --routing // .angular-cli.json {...
 "defaults": {
 ...
 "inline": {
 "style": false,
 "template": true
 }
 } }
  9. 9. Connecting to Firebase npm i firebase angularfire2 -S // firebase.config.ts export const firebaseConfig = {
 apiKey: "A-Long_api-key",
 authDomain: "fir-xyz.firebaseapp.com",
 databaseURL: "https://fir-xyz.firebaseio.com",
 storageBucket: "fir-xyz.appspot.com",
 }; // app.module.ts
 import { AngularFireModule } from 'angularfire2';
 import { firebaseConfig } from './firebase.config';
 @NgModule({ ... imports: [
 AngularFireModule.initializeApp(firebaseConfig),
 ], ... }) export class AppModule { }
  10. 10. Authentication Email + Password OAuth Smart user management
  11. 11. Authentication ng g s auth // auth.service.ts @Injectable()
 export class AuthService { login(username, password) {...} login(provider) logout() {...}
 getUser() {...} }
  12. 12. Authentication ng g s auth // auth.service.ts @Injectable()
 export class AuthService { constructor(public af: AngularFire) {
 this.af.auth.subscribe((authResponse: FirebaseAuthState) => {
 if (authResponse) { ... } else { ... }
 })
 } login(username, password) {...} login(provider) logout() {...}
 getUser() {...} }
  13. 13. Database Real time Read/write protection Lists Objects Queries - observables!
  14. 14. Database - Read ng g s data // data.service.ts @Injectable()
 export class DataService { constructor(private af: AngularFire) {
 this.itemList = this.af.database.list('/list');
 } getItem(id) {
 const itemObservable = this.af.database.object(`/items/${id}`);
 itemObservable.subscribe(item => this.currentItem = item);
 return itemObservable;
 } }
  15. 15. Database - Write saveNewItem(item) { return this.af.database.list(`/list`)
 .push(item)
 .then(savedItem => {
 ...
 return savedItem;
 })
 .catch(error => console.error(error));
 }
 
 saveExistingItem (item, key) {
 return this.af.database.object(`/list/${key}`)
 .set(item)
 .then(() => ... )
 .catch(error => console.error(error)); }
  16. 16. Cloud Functions Server side functions DB Triggers Manage storage Google APIs Notifications
  17. 17. // functions/index.js const functions = require('firebase-functions'); // Import Admin SDK const admin = require("firebase-admin"); admin.initializeApp(functions.config().firebase); const db = admin.database(); exports.myFunction = functions.database.ref('/list/{id}') .onWrite(event => { ... event.data.val() ... ... event.params.id ... return db.ref('otherList').update(listItem); }) Cloud Functions npm i -g firebase-tools firebase login firebase init functions
  18. 18. More in Firebase Storage Notifications Invites Hosting AdWords Analytics ...and more!
  19. 19. Shmuela Jacobs shmuela@ng-girls.org github.com/shmool @ShmuelaJ ng-girls.org

×