Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Putting it All Together: Ionic 2, AngularFire 2, and Firebase 3

DZone's Guide to

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.

· Mobile Zone
Free Resource
  1. Create a new Ionic 2 project:
    ionic start example-ionic blank --v2
  2. Install Firebase 3 and AngularFire 2:
    cd example-ionicnpm install angularfire2 firebase —save
  3. 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);
  4. 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');
        }
    }
  5. 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>
  6. 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.
  7. Test by running the app:
    ionic serve
Topics:
ionic ,firebase ,angular

Published at DZone with permission of Abishek Baskaran, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}