Putting it All Together: Ionic 2, AngularFire 2, and Firebase 3
A simple step-by-step guide to get these three technologies to work together.
Join the DZone community and get the full member experience.
Join For Free- Create a new Ionic 2 project:
ionic start example-ionic blank --v2
- Install Firebase 3 and AngularFire 2:
cd example-ionicnpm install angularfire2 firebase —save
- In app.ts:
import {Component} from '@angular/core'; import {Platform, ionicBootstrap} from 'ionic-angular'; import {StatusBar} from 'ionic-native'; import {HomePage} from './pages/home/home'; import { defaultFirebase, FIREBASE_PROVIDERS } from 'angularfire2'; const COMMON_CONFIG = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_FIREBASE.firebaseapp.com", databaseURL: "https://YOUR_FIREBASE.firebaseio.com", storageBucket: "YOUR_FIREBASE.appspot.com" }; @Component({ template: '<ion-nav [root]="rootPage"></ion-nav>', providers: [ FIREBASE_PROVIDERS, defaultFirebase(COMMON_CONFIG) ] }) export class MyApp { rootPage: any = HomePage; constructor(platform: Platform) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. StatusBar.styleDefault(); }); } } ionicBootstrap(MyApp);
- In home.ts:
import {Component} from '@angular/core'; import {NavController} from 'ionic-angular'; import { AngularFire, FirebaseObjectObservable } from 'angularfire2'; @Component({ templateUrl: 'build/pages/home/home.html' }) export class HomePage { item: FirebaseObjectObservable<any>; constructor(private navCtrl: NavController, af: AngularFire) { this.item = af.database.object('/item'); } }
- In home.html:
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> The world is your oyster. <p> {{ (item | async)?.name }} </p> </ion-content>
- In your firebase console, make sure have an object under /item with a “name” property. This is what we load in our example code above.
- Test by running the app:
ionic serve
Firebase
Ionic (mobile app framework)
Published at DZone with permission of Abishek Baskaran, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments