2016-04-10 35 views
6

आयनिक 1 से आयनिक 2 में संक्रमण करना और फ़ायरबेस import * as Firebase from 'somewhere/foo/'; जैसे कि उनके टाइपस्क्रिप्ट उदाहरण का उपयोग करके कुछ सेट अप करने के बारे में उत्सुक था।आयनिक 2/कोणीय 2 और टाइपस्क्रिप्ट

  1. आयनिक 2 में में js निर्भरता स्थापित करने का मानक तरीका बोवर या मैं कुछ Firebase की तरह जोड़ने के लिए कुछ अन्य निर्माण श्रृंखला/उपकरण का उपयोग किया जाना चाहिए है?

  2. क्या मुझे फ़ायरबेस पुस्तकालयों को स्थापित करने के लिए बॉवर इंस्टॉल का उपयोग करना चाहिए या सीधे फ़ायरबेस सीडीएन स्क्रिप्ट स्रोत पर इंगित करना चाहिए?

  3. क्या मुझे फायरबेस टाइपस्क्रिप्ट परिभाषाओं को स्थापित करने के लिए टाइपिंग का उपयोग करना चाहिए?

यह 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"]) 

जो सिर्फ करने के लिए cdn संदर्भ शामिल हैं फायरबेस लाइब्रेरी। हम आयनिक 2 और टाइपप्रति

उत्तर

4

वहाँ ionic2 क्षुधा में कोई बूटस्ट्रैप है ..

  • आप angularfire2 और 0 के लिए एनपीएम मॉड्यूल लोड कर सकते हैं
  • एप्लिकेशन घटक
  • पर प्रदाताओं सेट अपने अनुप्रयोग यूआरएल

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(); 
     }); 
    } 
} 

घर निर्दिष्ट करें।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() 
     } 
    }) 
} 

See Code Here

+0

ओह कूल, ऐसा लगता है कि मैं क्या देख रहा हूं, एक और सवाल - आरओएनजेएस आयनिक में शामिल है या यह है कि मुझे कुछ बाहरी रूप से संदर्भित करने की आवश्यकता है - एनपीएम के साथ स्थापित करना स्वचालित रूप से आयनिक कोड से आयात के लिए उपलब्ध कराता है - या एनपीएम के माध्यम से खींचा गया हर नई लाइब्रेरी एक प्रदाता की आवश्यकता है? – MonkeyBonkey

+0

github repo में package.json की जांच करें, यह आवश्यक सभी मॉड्यूल सूचीबद्ध करेगा –

+0

आप angularfire2 के साथ लॉगिन/लॉगआउट ईवेंट की सदस्यता कैसे लेते हैं? – MonkeyBonkey

1

में ऐसा होगा कैसे आप अपने SystemJS विन्यास में दोनों Firebase और Angularfire2 विन्यस्त करने की जरूरत:

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 में सक्षम हो जाएगा।

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

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

फिर आप AngularFire वर्ग इंजेक्षन कर सकते हैं::

पहली बात तो जब आपके आवेदन bootstrapping Angularfire2 प्रदाताओं निर्दिष्ट करने के लिए है

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

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

    } 
} 
+0

तरह प्रमाणीकरण की घटनाओं के लिए सुन सकते हैं एक आयनिक विन्यास फाइल या एक कोणीय 2 systemjs है फाइल? – MonkeyBonkey

+0

यह कुछ कोड है जिसे आपको अपनी मुख्य HTML फ़ाइल में परिभाषित करने की आवश्यकता है। –

संबंधित मुद्दे