如何在Ionic 2 / Angular 2和TypeScript中设置Firebase

Question

我正在从ionic 1迁移到ionic 2，想知道如何设置类似firebase的东西import * as Firebase from 'somewhere/foo/';，使用他们的typescript示例。

1. 在ionic 2中，是否应该使用bower来安装js依赖项的标准方式，还是应该使用其他构建链/工具来添加类似Firebase这样的东西？

2. 我应该使用bower install来安装Firebase库，还是直接引用Firebase cdn脚本源？

3. 我应该使用typings来安装Firebase Typescript定义吗？

这是来自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"])

如何在ionic 2和typescript中实现仅包含Firebase库的CDN引用。

- MonkeyBonkey

Answer 1

在ionic2应用中没有bootstrap...

• 你可以加载npm模块angularfire2和firebase
• 在应用组件上设置提供者
• 指定你的应用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');
    }
}

完整的源代码在git仓库中 - 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()
        }
    })
}

在此处查看代码

- Aaron Saunders

---

哦，很酷，这看起来就是我要找的东西，还有一个问题——rxjs是否包含在ionic中，还是需要在外部引用？使用npm安装后，它会自动使其可从ionic代码中导入吗？或者每个通过npm添加的新库都需要提供程序？ - MonkeyBonkey

请查看 Github 存储库中的 package.json 文件，它将列出所有所需的模块。 - Aaron Saunders

你如何使用angularfire2订阅登录/注销事件？ - MonkeyBonkey

修改了回答...可能应该是一个新问题。 - Aaron Saunders

Answer 2

您需要将Firebase和Angularfire2都配置到您的SystemJS配置中：

System.config({
  map: {
    firebase: '/node_modules/firebase/lib/firebase-web.js',
    angularfire2: ' node_modules/angularfire2'
  },
  packages: {      
    angularfire2: {
      main: 'angularfire2.js',
      defaultExtension: 'js'
    },app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
});

这样，您就能够使用AngularFire2了。

首先，启动应用程序时需要指定Angularfire2提供程序：

(...)
import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2';

bootstrap(AppComponent, [
  FIREBASE_PROVIDERS,
  defaultFirebase('https://<your-firebase>.firebaseio.com'),
  (...)
]);

您可以注入AngularFire类：

(...)
import {AngularFire} from 'angularfire2';

@Component({
  (...)
})
export class AppComponent {
  constructor(private af: AngularFire) {

  }
}

- Thierry Templier

---

systemjs是一个Ionic配置文件还是Angular 2文件？ - MonkeyBonkey

这是一些代码，您需要在主HTML文件中定义。 - Thierry Templier