angularfire

Feu angulaire

AngularFire atténue les aspérités qu'un développeur angulaire peut rencontrer lors de la mise en œuvre du SDK Firebase JS indépendant du framework et vise à fournir une expérience de développement plus naturelle en se conformant aux conventions angulaires.

 ng ajouter @angular/fire

• Injection de dépendances – Fournissez et injectez des services Firebase dans vos composants.
• Wrappers Zone.js - Les zones stables permettent une fonctionnalité appropriée des techniciens de service, des formulaires, du SSR et du pré-rendu.
• Basé sur des observables : utilisez RxJS plutôt que des rappels pour les flux en temps réel.
• API conviviale pour NgRx - Intégrez-vous à NgRx à l'aide des API basées sur les actions d'AngularFire.
• Chargement différé : AngularFire importe dynamiquement une grande partie de Firebase, réduisant ainsi le temps de chargement de votre application.
• Déployer des schémas - Déployez votre application Angular sur Firebase Hosting avec une seule commande.
• Google Analytics – Connaissance du routeur angulaire sans effort dans Google Analytics.
• Protections de routeur – Protégez vos routes angulaires avec des contrôles d'authentification Firebase intégrés.

Exemple d'utilisation

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

Polyremplissages

Ni AngularFire ni Firebase ne sont livrés avec des polyfills. Pour assurer la compatibilité dans un large éventail d'environnements, nous vous suggérons d'ajouter les polyfills suivants à votre application :

API	Environnements	Polyremplissage suggéré	Licence
Diverses fonctionnalités ES5+	Safaris < 10	core-js/stable	MIT
globalThis	Chrome < 71 Safari < 12.1 iOS < 12.2 Nœud < 12	globalThis	MIT
Proxy	Safaris < 10	proxy-polyfill	Apache2.0
fetch	Safari < 10.1 iOS < 10.3	cross-fetch	MIT

Ressources

Démarrage rapide - Obtenez votre première application opérationnelle en suivant notre guide de démarrage rapide.

Contribuer

Modèle Stackblitz - N'oubliez pas de définir votre configuration Firebase dans app/app.module.ts .

Vous passez à la version 7.0 ? Consultez notre guide.

Exemples d'applications

Nous avons trois exemples d'applications dans ce référentiel :

1. samples/compat d'une application d'évier de cuisine qui démontre l'utilisation de l'API de « compatibilité »
2. samples/modular une application d'évier de cuisine qui démontre la nouvelle API arborescente
3. samples/advanced la même application que samples/modular mais démontre des concepts plus avancés tels que le transfert d'état Angular Universal, l'importation dynamique de modules de fonctionnalités Firebase et le regroupement de données Firestore.

Vous avez des problèmes ?

Obtenez de l'aide sur notre forum de questions-réponses, la liste de diffusion officielle Firebase, le Firebase Community Slack ( #angularfire2 ), le Angular Community Discord ( #firebase ), Gitter, le subreddit Firebase ou Stack Overflow.

REMARQUE : Bien que relativement stable, AngularFire est un aperçu du développeur et est sujet à changement avant la disponibilité générale. Les questions sur la liste de diffusion et les problèmes déposés ici reçoivent une réponse dans la mesure du possible par les responsables et les autres membres de la communauté. Si vous parvenez à reproduire un problème avec Firebase en dehors de l'implémentation d'AngularFire , veuillez signaler un problème sur le SDK Firebase JS ou contacter le canal d'assistance personnalisé Firebase.

Guide du développeur

Ce guide du développeur suppose que vous utilisez la nouvelle API AngularFire à arborescence modifiable. Si vous recherchez l'API de compatibilité, vous pouvez trouver la documentation ici.

Consultez le guide de mise à niveau v7 pour plus d'informations sur ce changement.

Intégrations de produits Firebase

Analytique import { } from '@angular/fire/analytics' ;	Authentification import { } from '@angular/fire/auth' ;
Cloud Firestore import { } from '@angular/fire/firestore' ;	Fonctions cloud import { } from '@angular/fire/functions' ;
Messagerie cloud import { } from '@angular/fire/messaging' ;	Stockage en nuage import { } from '@angular/fire/storage' ;
Surveillance des performances import { } from '@angular/fire/performance' ;	Base de données en temps réel import { } from '@angular/fire/database' ;
Configuration à distance import { } from '@angular/fire/remote-config' ;	Vérification de l'application import { } from '@angular/fire/app-check' ;
Sommet AI import { } from '@angular/fire/vertexai-preview' ;