从离子1过渡到离子2并且很好奇如何从’somewhere / foo /’设置firebase import *作为Firebase的东西;使用他们的打字稿示例.
> bower是在离子中安装js依赖项的标准方法
2或者我应该使用其他一些构建链/工具来添加
像Firebase这样的东西?
>我应该使用bower install来安装firebase库还是
应该直接指向firebase cdn脚本源?
>我应该使用typings来安装firebase打字稿定义吗?
这是firebase教程https://www.firebase.com/docs/web/libraries/ionic/guide.html中的旧代码
的index.html
- <!-- AngularFire -->
- <script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
app.js
- angular.module("starter",["ionic","firebase"])
其中只包含对Firebase库的cdn引用.我们如何在离子2和打字稿中做到这一点
ionic2应用程序中没有bootstrap …
>你可以为angularfire2和firebase加载npm模块
>在应用程序组件上设置提供程序
>指定您的应用网址
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');
- }
- }
git repo中的完整源代码 – aaronksaunders/ionic2-angularfire-sample
您可以侦听这样的身份验证事件
- 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()
- }
- })
- }