加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

如何使用离子2 /角度2和打字稿设置firebase

发布时间:2020-12-17 07:50:49 所属栏目:安全 来源:网络整理
导读:从离子1过渡到离子2并且很好奇如何从’somewhere / foo /’设置firebase import *作为Firebase的东西;使用他们的打字稿示例. bower是在离子中安装js依赖项的标准方法 2或者我应该使用其他一些构建链/工具来添加 像Firebase这样的东西? 我应该使用bower inst
从离子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()
        }
    })
}

See Code Here

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读