1. Angular is on Fire(base)!
Shmuela Jacobs

2. Shmuela Jacobs
Front-end Developer & Consultant

3. Firebase

4. 4

5. https://github.com/angular/angular-cli
Angular CLI

6. https://github.com/angular/angularfire2
AngularFire2

7. Angular & Firebase
Authentication
Real Time Database
Cloud Functions
Best Practices
NEW!

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. 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. Authentication
Email + Password
OAuth
Smart user management

11. Authentication
ng g s auth
// auth.service.ts
@Injectable()
export class AuthService {
login(username, password) {...}
login(provider)
logout() {...}
getUser() {...}
}

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. Database
Real time
Read/write protection
Lists
Objects
Queries - observables!

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. 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. Cloud Functions
Server side functions
DB Triggers
Manage storage
Google APIs
Notifications

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. More in Firebase
Storage
Notifications
Invites
Hosting
AdWords
Analytics
...and more!

19. Shmuela Jacobs
shmuela@ng-girls.org
github.com/shmool
@ShmuelaJ
ng-girls.org