DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Putting it All Together: Ionic 2, AngularFire 2, and Firebase 3

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.

Abishek Baskaran user avatar by
Abishek Baskaran
·
Aug. 05, 16 · Mobile Zone · Tutorial
Like (3)
Save
Tweet
9.03K Views

Join the DZone community and get the full member experience.

Join For Free
  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
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.

Popular on DZone

  • 7 Best MQTT Client Tools Worth Trying
  • When Microservices Are a Bad Idea
  • How To Build a Multi-Zone Java App in Days With Vaadin, YugabyteDB, and Heroku
  • Brewing Patterns in Java: An Informal Primer

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo