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

前端之家收集整理的这篇文章主要介绍了如何使用离子2 /角度2和打字稿设置firebase前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
从离子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

  1. <!-- AngularFire -->
  2. <script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>

app.js

  1. angular.module("starter",["ionic","firebase"])

其中只包含对Firebase库的cdn引用.我们如何在离子2和打字稿中做到这一点

ionic2应用程序中没有bootstrap …

>你可以为angularfire2和firebase加载npm模块
>在应用程序组件上设置提供程序
>指定您的应用网址

app.ts

  1. import 'es6-shim';
  2. import {App,Platform} from 'ionic-angular';
  3. import {StatusBar} from 'ionic-native';
  4. import {HomePage} from './pages/home/home';
  5.  
  6.  
  7. import {FIREBASE_PROVIDERS,defaultFirebase,AngularFire} from 'angularfire2';
  8.  
  9. @App({
  10. template: '<ion-nav [root]="rootPage"></ion-nav>',providers: [
  11. FIREBASE_PROVIDERS,defaultFirebase('https://[YOUR-APP].firebaseio.com/')
  12. ],config: {} // http://ionicframework.com/docs/v2/api/config/Config/
  13. })
  14. export class MyApp {
  15. rootPage: any = HomePage;
  16.  
  17. constructor(platform: Platform) {
  18. platform.ready().then(() => {
  19. // Okay,so the platform is ready and our plugins are available.
  20. // Here you can do any higher level native things you might need.
  21. StatusBar.styleDefault();
  22. });
  23. }
  24. }

home.ts

  1. import {Page} from 'ionic-angular';
  2. import {Component} from 'angular2/core';
  3. import {AngularFire} from 'angularfire2';
  4. import {Observable} from 'rxjs/Observable';
  5.  
  6. @Page({
  7. template: `
  8. <ion-navbar *navbar>
  9. <ion-title>
  10. Home
  11. </ion-title>
  12. </ion-navbar>
  13.  
  14. <ion-content class="home">
  15. <ion-card *ngFor="#item of bookItems | async">
  16. <ion-card-header>
  17. {{item.volumeInfo.title}}
  18. </ion-card-header>
  19. <ion-card-content>
  20. {{item.volumeInfo.description}}
  21. </ion-card-content>
  22. </ion-card>
  23. </ion-content>`
  24. })
  25. export class HomePage {
  26. bookItems: Observable<any[]>;
  27. constructor(af: AngularFire) {
  28. this.bookItems = af.list('/bookItems');
  29. }
  30. }

git repo中的完整源代码aaronksaunders/ionic2-angularfire-sample

您可以侦听这样的身份验证事件

  1. ngOnInit() {
  2.  
  3. // subscribe to the auth object to check for the login status
  4. // of the user,if logged in,save some user information and
  5. // execute the firebase query...
  6. // .. otherwise
  7. // show the login modal page
  8. this.auth.subscribe((data) => {
  9. console.log("in auth subscribe",data)
  10. if (data) {
  11. this.authInfo = data.password
  12. this.bookItems = this.af.list('/bookItems');
  13. } else {
  14. this.authInfo = null
  15. this.displayLoginModal()
  16. }
  17. })
  18. }

See Code Here

猜你在找的Angularjs相关文章