angularfire

Api Sudut

AngularFire menghaluskan sisi kasar yang mungkin ditemui pengembang Angular saat mengimplementasikan Firebase JS SDK yang tidak memiliki kerangka kerja & bertujuan untuk memberikan pengalaman pengembang yang lebih alami dengan mematuhi konvensi Angular.

 dan tambahkan @angular/fire

• Injeksi ketergantungan - Menyediakan dan Menyuntikkan layanan Firebase di komponen Anda.
• Pembungkus Zone.js - Zona stabil memungkinkan fungsionalitas pekerja layanan, formulir, SSR, dan pra-rendering yang tepat.
• Berbasis observasi - Memanfaatkan RxJS daripada panggilan balik untuk streaming waktu nyata.
• API ramah NgRx - Integrasikan dengan NgRx menggunakan API berbasis tindakan AngularFire.
• Pemuatan lambat - AngularFire secara dinamis mengimpor sebagian besar Firebase, sehingga mengurangi waktu untuk memuat aplikasi Anda.
• Terapkan skema - Terapkan aplikasi Angular Anda di Firebase Hosting dengan satu perintah.
• Google Analytics - Kesadaran Router Sudut tanpa usaha di Google Analytics.
• Router Guards - Lindungi rute Angular Anda dengan pemeriksaan Firebase Authentication bawaan.

Contoh penggunaan

 import { provideFirebaseApp , initializeApp } from '@angular/fire/app' ;
import { getFirestore , provideFirestore } from '@angular/fire/firestore' ;

export const appConfig : ApplicationConfig = {
  providers : [
    provideFirebaseApp ( ( ) => initializeApp ( { ... } ) ) ,
    provideFirestore ( ( ) => getFirestore ( ) ) ,
    ...
  ] ,
  ...
} ) 

 import { inject } from '@angular/core' ;
import { Firestore , collectionData , collection } from '@angular/fire/firestore' ;
import { Observable } from 'rxjs' ;

interface Item {
  name : string ,
  ...
} ;

@ Component ( {
  selector : 'app-root' ,
  standalone : true ,
  template : `
  <ul>
    @for (item of (item$ | async); track item) {
      <li>
        {{ item.name }}
      </li>
    }
  </ul>
  `
} )
export class AppComponent {
  item$ : Observable < Item [ ] > ;
  firestore : Firestore = inject ( Firestore ) ;

  constructor ( ) {
    const itemCollection = collection ( this . firestore , 'items' ) ;
    this . item$ = collectionData < Item > ( itemCollection ) ;
  }
}

polifill

Baik AngularFire maupun Firebase tidak dikirimkan dengan polyfill. Agar memiliki kompatibilitas di berbagai lingkungan, kami menyarankan agar polyfill berikut ditambahkan ke aplikasi Anda:

API	Lingkungan	Polifill yang Disarankan	Lisensi
Berbagai fitur ES5+	Safari <10	core-js/stable	MIT
globalThis	Krom <71 Safari <12.1 iOS <12.2 Simpul <12	globalThis	MIT
Proxy	Safari <10	proxy-polyfill	Apache 2.0
fetch	Safari <10.1 iOS <10.3	cross-fetch	MIT

Sumber daya

Mulai Cepat - Aktifkan dan jalankan aplikasi pertama Anda dengan mengikuti panduan memulai cepat kami.

Berkontribusi

Templat Stackblitz - Ingatlah untuk menyetel konfigurasi Firebase Anda di app/app.module.ts .

Mengupgrade ke v7.0? Lihat panduan kami.

Contoh aplikasi

Kami memiliki tiga contoh aplikasi di repositori ini:

1. samples/compat aplikasi wastafel dapur yang mendemonstrasikan penggunaan API "kompatibilitas".
2. samples/modular aplikasi wastafel dapur yang mendemonstrasikan API baru yang dapat diguncang pohon
3. samples/advanced aplikasi yang sama seperti samples/modular tetapi menunjukkan konsep yang lebih canggih seperti transfer status Angular Universal, mengimpor modul fitur Firebase secara dinamis, dan bundling data Firestore.

Mengalami masalah?

Dapatkan bantuan di forum Tanya Jawab kami, Milis Firebase resmi, Firebase Community Slack ( #angularfire2 ), Angular Community Discord ( #firebase ), Gitter, subreddit Firebase, atau Stack Overflow.

CATATAN: Meskipun relatif stabil, AngularFire adalah pratinjau pengembang dan dapat berubah sebelum ketersediaan umum. Pertanyaan di milis dan permasalahan yang diajukan di sini dijawab berdasarkan upaya terbaik oleh pengelola dan anggota komunitas lainnya. Jika Anda dapat mereproduksi masalah dengan Firebase di luar penerapan AngularFire , harap laporkan masalah di Firebase JS SDK atau hubungi saluran dukungan Firebase yang dipersonalisasi.

Panduan Pengembang

Panduan pengembang ini mengasumsikan Anda menggunakan AngularFire API baru yang dapat diguncang pohon, jika Anda mencari API kompatibilitas, Anda dapat menemukan dokumentasinya di sini.

Lihat panduan peningkatan v7 untuk informasi lebih lanjut tentang perubahan ini..

Integrasi produk Firebase

Analisis import { } from '@angular/fire/analytics' ;	Otentikasi import { } from '@angular/fire/auth' ;
Penyimpanan Awan Api import { } from '@angular/fire/firestore' ;	Fungsi Awan import { } from '@angular/fire/functions' ;
Pesan Awan import { } from '@angular/fire/messaging' ;	Penyimpanan Awan import { } from '@angular/fire/storage' ;
Pemantauan Kinerja import { } from '@angular/fire/performance' ;	Basis Data Waktu Nyata import { } from '@angular/fire/database' ;
Konfigurasi Jarak Jauh import { } from '@angular/fire/remote-config' ;	Pemeriksaan Aplikasi import { } from '@angular/fire/app-check' ;
Verteks AI import { } from '@angular/fire/vertexai-preview' ;