@@ -178,15 +178,15 @@ export const firebaseConfig = {
178
178
export class AppModule { }
179
179
180
180
` ` `
181
- # ## Inject AngularFire and Bind it to List
181
+ # ## Inject AngularFireDatabase and Bind it to List
182
182
183
- Now inject AngularFire in your component. Open your ` home.ts` by going into ` src/pages/home/home.ts` and make the following changes:
183
+ Now inject AngularFireDatabase in your component. Open your ` home.ts` by going into ` src/pages/home/home.ts` and make the following changes:
184
184
185
- > 1) Import " AngularFire , FirebaseListObservable" at the top of your component.
185
+ > 1) Import " AngularFireDatabase , FirebaseListObservable" at the top of your component.
186
186
187
- > 2) Inject your AngularFire dependency in the constructor.
187
+ > 2) Inject your AngularFireDatabase dependency in the constructor.
188
188
189
- > 3) Call the list method on angularFire ' s database object .
189
+ > 3) Call the list method on the AngularFireDatabase module .
190
190
191
191
Your ` home.ts` file should look like this.
192
192
@@ -195,7 +195,7 @@ Your `home.ts` file should look like this.
195
195
import { Component } from ' @angular/core' ;
196
196
import { NavController } from ' ionic-angular' ;
197
197
198
- import { AngularFire , FirebaseListObservable } from ' angularfire2' ;
198
+ import { AngularFireDatabase , FirebaseListObservable } from ' angularfire2/database ' ;
199
199
200
200
@Component({
201
201
selector: ' page-home' ,
@@ -205,8 +205,8 @@ export class HomePage {
205
205
206
206
items: FirebaseListObservable< any[]> ;
207
207
208
- constructor(public navCtrl: NavController,af: AngularFire ) {
209
- this.items = af.database .list(' /items' );
208
+ constructor(public navCtrl: NavController, db: AngularFireDatabase ) {
209
+ this.items = db .list(' /items' );
210
210
}
211
211
212
212
}
@@ -260,39 +260,39 @@ This should create the AuthService under `src/providers/auth-service.ts`.
260
260
Update the service with the following code.
261
261
262
262
` ` ` bash
263
-
263
+ import { Observable } from ' rxjs/Observable ' ;
264
264
import { Injectable } from ' @angular/core' ;
265
- import { AuthProviders, AngularFireAuth, FirebaseAuthState, AuthMethods } from ' angularfire2' ;
265
+ import { AngularFireAuth } from ' angularfire2/auth' ;
266
+ import { User } from ' firebase' ;
267
+ import { FacebookAuthProvider } from ' firebase/auth' ;
266
268
267
269
@Injectable ()
268
270
export class AuthService {
269
- private authState: FirebaseAuthState;
271
+ private authState: Observable< User> ;
272
+ private currentUser: User;
270
273
271
- constructor(public auth $: AngularFireAuth) {
272
- this.authState = auth$.getAuth() ;
273
- auth $.subscribe((state: FirebaseAuthState ) => {
274
- this.authState = state ;
274
+ constructor(public afAuth $: AngularFireAuth) {
275
+ this.authState = afAuth$.authState ;
276
+ afAuth $.subscribe(( user : User ) => {
277
+ this.currentUser = user ;
275
278
});
276
279
}
277
280
278
281
get authenticated(): boolean {
279
- return this.authState !== null;
282
+ return this.currentUser !== null;
280
283
}
281
284
282
285
signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
283
- return this.auth$.login({
284
- provider: AuthProviders.Facebook,
285
- method: AuthMethods.Popup
286
- });
286
+ return this.afAuth$.auth.signInWithPopup(new FacebookAuthProvider()) ;
287
287
}
288
288
289
289
signOut (): void {
290
- this.auth$.logout ();
290
+ this.afAuth$.signOut ();
291
291
}
292
292
293
293
displayName (): string {
294
- if (this.authState ! = null) {
295
- return this.authState .facebook.displayName;
294
+ if (this.currentUser ! = = null) {
295
+ return this.currentUser .facebook.displayName;
296
296
} else {
297
297
return ' ' ;
298
298
}
@@ -375,7 +375,7 @@ import { Component } from '@angular/core';
375
375
import { NavController } from ' ionic-angular' ;
376
376
377
377
import { AuthService } from ' ../../providers/auth-service' ;
378
- import { AngularFire , FirebaseListObservable } from ' angularfire2' ;
378
+ import { AngularFireDatabase , FirebaseListObservable } from ' angularfire2/database ' ;
379
379
380
380
@Component({
381
381
selector: ' page-home' ,
@@ -385,8 +385,8 @@ export class HomePage {
385
385
386
386
items: FirebaseListObservable< any[]> ;
387
387
388
- constructor(public navCtrl: NavController,af: AngularFire, private _auth: AuthService) {
389
- this.items = af.database .list(' /items' );
388
+ constructor(public navCtrl: NavController, db: AngularFireDatabase, private _auth: AuthService) {
389
+ this.items = db .list(' /items' );
390
390
}
391
391
392
392
signInWithFacebook (): void {
@@ -467,51 +467,49 @@ and update the signInWithFacebook() method.
467
467
your ` ` ` auth-service.ts` ` ` code should look like this.
468
468
469
469
` ` ` ts
470
-
471
-
470
+ import { Observable } from ' rxjs/Observable' ;
472
471
import { Injectable } from ' @angular/core' ;
473
- import { AuthProviders, AngularFireAuth, FirebaseAuthState, AuthMethods } from ' angularfire2' ;
474
-
472
+ import { AngularFireAuth } from ' angularfire2/auth' ;
473
+ import { User } from ' firebase' ;
474
+ import { FacebookAuthProvider } from ' firebase/auth' ;
475
475
import { Platform } from ' ionic-angular' ;
476
476
import { Facebook } from ' ionic-native' ;
477
477
478
478
@Injectable ()
479
479
export class AuthService {
480
- private authState: FirebaseAuthState;
480
+ private authState: Observable< User> ;
481
+ private currentUser: User;
481
482
482
- constructor(public auth $: AngularFireAuth, private platform: Platform ) {
483
- this.authState = auth$.getAuth() ;
484
- auth $.subscribe((state: FirebaseAuthState ) => {
485
- this.authState = state ;
483
+ constructor(public afAuth $: AngularFireAuth) {
484
+ this.authState = afAuth$.authState ;
485
+ afAuth $.subscribe(( user : User ) => {
486
+ this.currentUser = user ;
486
487
});
487
488
}
488
489
489
490
get authenticated(): boolean {
490
- return this.authState !== null;
491
+ return this.currentUser !== null;
491
492
}
492
493
493
494
signInWithFacebook(): firebase.Promise<FirebaseAuthState> {
494
495
if (this.platform.is('cordova')) {
495
496
return Facebook.login([' email' , ' public_profile' ]).then(res => {
496
497
const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
497
- return firebase.auth() .signInWithCredential(facebookCredential);
498
+ return this.afAuth$.aut .signInWithCredential(facebookCredential);
498
499
});
499
500
} else {
500
- return this.auth$.login({
501
- provider: AuthProviders.Facebook,
502
- method: AuthMethods.Popup
503
- });
501
+ return this.afAuth$.auth.signInWithPopup(new FacebookAuthProvider ());
504
502
}
505
503
506
504
}
507
505
508
506
signOut (): void {
509
- this.auth$.logout ();
507
+ this.afAuth$.signOut ();
510
508
}
511
509
512
510
displayName (): string {
513
- if (this.authState ! = null) {
514
- return this.authState .facebook.displayName;
511
+ if (this.currentUser ! = = null) {
512
+ return this.currentUser .facebook.displayName;
515
513
} else {
516
514
return ' ' ;
517
515
}
0 commit comments