Lad os lære, hvordan du installerer og opsætter AngularFire2 4.0

Sponsoreret af: letsboot.com
Tjek vores vinklede interne træninger eller et offentligt vinkelkursus.
Prøv fossilo.com, vores kantede projekt til arkivering af komplette websteder.

eller vores webplatform “letslearn” for at styre Angular-kurser, har vi åbenlyst valgt Angular4 og Firebase4 til at bygge denne nye applikation!

Herinde lærer vi, hvordan man opretter et nyt projekt med vinkel / cli, firebase-godkendelse til login og firebase-database til at læse data.

Nye opgraderinger af AngularFire2 er blevet frigivet i slutningen af ​​maj 2017, så AngularFire2 4.0 er blevet brugt til dette projekt.

Opret en ny firebase

Generer to Firebase-databaser: en til udvikling (letslearn-dev) og en til produktion (letslearn).

2 måder at gøre det på:

> tilføj projekt i Firebase-konsollen

> importer et eksisterende Google-projekt fra Google Cloud Platform

Start et nyt kantet projekt

Installer vinkel-cli vha. Npm.

npm installere -g @ vinkel / cli

Generer dit nye projekt, flyt ind i depotet og kør din server.

ng nyt letslearn --prefix lsl
cd letslearn
ng servering -o

Din lokale applikation er nu indlæst i din browser: http: // localhost: 4200 / Du kan ændre standardporten med indstillingen - port. Meddelelsen “Velkommen til lsl !!” skal vises!

Installer og opsæt din Firebase

Installer den nyeste version af AngularFire2 og Firebase med npm.

npm installere angularfire2 firebase - Save

Kopiér-indsæt din Firebase-konfiguration fra afsnittet Oversigt og tilføj den til dine miljøvariabelfiler:

> src / miljøer / miljø.ts til udvikling (letslearn-dev)

> src / miljøer / miljø.prod.ts til produktion (letslearn)

eksport konst miljø = {
  produktion: falsk,
  ildbase: {
    apiKey: 'xxx',
    autorDomain: 'xxx.firebaseapp.com',
    databaseURL: 'https://xxx.firebaseio.com',
    projektId: 'xxx',
    storageBucket: 'xxx.appspot.com',
    messagingSenderId: 'xxx'
  }
};

Opsætning og import af AngularFire-moduler

Gå til src / app / app.module.ts for at opsætte og importere de moduler, du har brug for til din applikation.

Importer AngularFireModule, AngularFireDatabaseModule og AngularFireAuthModule fra angularfire2 og miljø for at få Firebase-opsætningen.

import {AngularFireModule} fra 'angularfire2';
import {AngularFireDatabaseModule} fra 'angularfire2 / database';
import {AngularFireAuthModule} fra 'angularfire2 / autor';
import {miljø} fra 'miljøer / miljø';

Tilføj derefter moduler i NgModule. Det er muligt at tilpasse dit Firebase-navn ved hjælp af 'initialiazeApp'.

@NgModule ({
  erklæringer: [
    AppComponent
  ],
  import: [
    BrowserModule,
    AngularFireModule.initializeApp (miljø.firebase, 'letslearn-dev'),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [AppComponent]
})
eksportklasse AppModule {}

Opret en AuthService for at administrere godkendelse.

Du kan oprette den i en delt mappe.

ng genererer service delt / autorisation

Importér det derefter til src / app / app.module.ts og registrer AuthService i udbydere.

import {AuthService} fra './shared/auth.service';
@NgModule ({
  udbydere: [AuthService],
})

I src / app / shared / autor.service.ts skal du importere AngularFireAuth fra angularfire2, firebase fra firebase og Observable. Injicér AngularFireAuth, og abonner for at få den aktuelle bruger til tjenestens konstruktør.

import {AngularFireAuth} fra 'angularfire2 / autor';
import * som ildbase fra 'ildbase / app';
import {Observable} fra 'rxjs / Observable';
eksport klasse AuthService {
  privat autoratat: observerbar 
  private currentUser: firebase.User = null;
konstruktør (offentlig afAuth: AngularFireAuth) {
    this.authState = this.afAuth.authState;
    this.authState.subscribe (bruger => {
      hvis (bruger) {
        this.currentUser = bruger;
      } andet {
        this.currentUser = null;
      }
    });
  }
  getAuthState () {
    returner dette.authState;
  }
}

Gennemfør godkendelsen

Injicér din Firebase Auth-service i din appkomponent.

import {AuthService} fra './shared/auth.service';
eksportklasse AppComponent implementerer OnInit {
  bruger = null;
konstruktør (
    privat autorisation: AuthService) {}
ngOnInit () {
    this.auth.getAuthState (). abonnere (
      (bruger) => dette.bruger = bruger);
  }
}

Tilføj et login med en Google-funktion

I din src / app / shared / auth.service.ts skal du tilføje denne funktion og aktivere log-udbyderen i Firebase-konsollen> Afsnittet Autentificering> fanen til login-metode.

loginWithGoogle () {
  returner denne.afAuth.auth.signInWithPopup (
    ny firebase.auth.GoogleAuthProvider ());
}

I din src / app / app.component.ts

eksportklasse AppComponent implementerer OnInit {
konstruktør (
    privat autorisation: AuthService) {}
loginWithGoogle () {
    this.auth.loginWithGoogle ();
  }
}

Tilføj AngularFireDatabase

Injicér AngularFireDatabase i din komponent.

Åbn src / app / app.component.ts

Importer AngularFireDatabase fra angularfire2. Importer muligvis også FirebaseListObservable og / eller FirebaseObjectObservable, hvis du har brug for at binde til en liste eller et objekt.

import {Komponent, OnInit} fra '@ vinkel / kerne';
import {AuthService} fra './shared/auth.service';
import {AngularFireDatabase, FirebaseListObservable} fra 'angularfire2 / database';
import * som ildbase fra 'ildbase / app';

Injicér AngularFireDatabase i komponentens konstruktør.

konstruktør (
  privat autorisation: AuthService,
  offentlig db: AngularFireDatabase) {}

Indstil derefter dine emner-variabler som en FirebaseListObservable og indstil din liste over emner i ngOnInit-funktionen.

eksportklasse AppComponent implementerer OnInit {
  emner: FirebaseListObservable ;
  ngOnInit () {
    this.auth.getAuthState (). abonnere (
      (bruger) => dette.bruger = bruger);
    this.topics = this.db.list ('/ emner');
  }
}

Du får muligvis en fejl, såsom "Klient har ikke tilladelse til at få adgang til de ønskede data" i din browserkonsol, når du kører serveren. Du har ikke de gode regler for at læse og / eller skrive dataene fra / i Firebase. For at løse dette skal du gå til Firebase Console> Databasesektion> fanebladet Regler og ændre reglerne!

Eksempel på reglerne i Firebase-konsollen.

Rediger din skabelon

Åbn src / app / app.component.html

Tilføj en knap for at logge ind med Google og bind til login med din Google-funktion.

 Log ind med Google 

Vis din liste over emner ved hjælp af en For-loop, og glem ikke async-røret.

      
  •     {{Emne. $ Value}}   

Det er det! Let er det ikke? Du kan nu oprette et nyt projekt med en Firebase-database, bruge AngularFireAuth til godkendelse og AngularFireDatabase til at læse data fra din database. Implementere det til dit projekt, og test forskellige login-metoder!

Lad os nu kode!

Næste gang gør vi mere med Firebase, Angular4 og data. Følg mig på Medium.com eller Twitter for at få de næste artikler!