如何使用离子2 /角度2和打字稿设置firebase [英] how to set up firebase with ionic 2 / angular 2 and typescript

问题描述

从离子1过渡到离子2并且很好奇如何使用他们的打字稿从'somewhere / foo /'; 设置firebase import *作为Firebase例如。

1. bower是在离子
   2中安装js依赖项的标准方法，还是我应该使用一些其他构建链/工具用于添加类似Firebase的
   ？




2. 我应该使用bower install来安装firebase库还是
   应该指向直接到firebase cdn脚本源？




3. 我应该使用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


• 在应用程序组件上设置提供程序


• 指定您的应用程序URL

app.ts

  import'es6-shim';来自'ionic-angular'的
 import {App，Platform};来自'ionic-native'的
 import {StatusBar};来自'./pages/home/home'的
 import {HomePage};来自'angularfire2'的
 
 
 import {FIREBASE_PROVIDERS，defaultFirebase，AngularFire}; 
 
 @App（{
模板：'< ion-nav [root] =rootPage>< / ion-nav>'，
提供商：[
 FIREBASE_PROVIDERS，
 defaultFirebase（'https：// [YOUR-APP] .firebaseio.com /'）
]，
 config：{} // http：// ionicframework。 com / docs / v2 / api / config / Config / 
}）
导出类MyApp {
 rootPage：any = HomePage; 
 
构造函数（平台：平台）{
 platform.ready（）。then（（）=> {
 //好的，所以平台准备就绪，我们的插件是
 //在这里你可以做任何你需要的更高级别的本地事物。
 StatusBar.styleDefault（）; 
}）; 
} 
} 
  

home.ts

 从'ionic-angular'导入{Page}; 
从'angular2 / core'导入{Component};来自'angularfire2'的
 import {AngularFire};来自'rxjs / Observable'的
 import {Observable}; 
 
 @Page（{
模板：`
< 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>`
}）
导出类主页{
 bookItems：Observable< any []> ;; 
构造函数（af：AngularFire）{
 this.bookItems = af.list（'/ bookItems'）; 
} 
} 
  

git repo中的完整源代码 - 您可以收听此类身份验证事件

  ngOnInit（）{
 
 / /订阅auth对象以检查用户的登录状态
 //，如果已登录，则保存一些用户信息并
 //执行firebase查询... 
 // ..否则
 //显示登录模式页面
 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（）
} 
}）
} 
  

请参阅此处的代码

Making transition from ionic 1 to ionic 2 and was curious about how to set up something like firebase import * as Firebase from 'somewhere/foo/'; using their typescript example.

1. Is bower the standard way of installing js dependencies in in ionic 2 or should I be using some other build chain/tool for adding something like Firebase?

2. Should I use bower install to install the firebase libraries or should point directly to a firebase cdn script source?

3. Should I using typings to install firebase typescript definitions?

This is the old code from the firebase tutorial 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"])

which just includes cdn references to the Firebase library. How would we do this in ionic 2 and typescript

解决方案

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

这篇关于如何使用离子2 /角度2和打字稿设置firebase的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！