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

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

  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

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

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 }}