There is no bootstrap in ionic2 apps...
- you can load up the npm modules for
angularfire2
and firebase
- set the providers on the app component
- specify your app URL
app.ts
import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2';
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [
FIREBASE_PROVIDERS,
defaultFirebase('https://[YOUR-APP].firebaseio.com/')
],
config: {} // http://ionicframework.com/docs/v2/api/config/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();
});
}
}
home.ts
import {Page} from 'ionic-angular';
import {Component} from 'angular2/core';
import {AngularFire} from 'angularfire2';
import {Observable} from 'rxjs/Observable';
@Page({
template: `
<ion-navbar *navbar>
<ion-title>
Home
</ion-title>
</ion-navbar>
<ion-content class="home">
<ion-card *ngFor="#item of bookItems | async">
<ion-card-header>
{{item.volumeInfo.title}}
</ion-card-header>
<ion-card-content>
{{item.volumeInfo.description}}
</ion-card-content>
</ion-card>
</ion-content>`
})
export class HomePage {
bookItems: Observable<any[]>;
constructor(af: AngularFire) {
this.bookItems = af.list('/bookItems');
}
}
full source in git repo - aaronksaunders/ionic2-angularfire-sample
You can listen for authentication events like this
ngOnInit() {
// subscribe to the auth object to check for the login status
// of the user, if logged in, save some user information and
// execute the firebase query...
// .. otherwise
// show the login modal page
this.auth.subscribe((data) => {
console.log("in auth subscribe", data)
if (data) {
this.authInfo = data.password
this.bookItems = this.af.list('/bookItems');
} else {
this.authInfo = null
this.displayLoginModal()
}
})
}
See Code Here
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…