fuego angular

Fuego angular

AngularFire suaviza las asperezas que un desarrollador de Angular puede encontrar al implementar el SDK Firebase JS independiente del marco y tiene como objetivo proporcionar una experiencia de desarrollador más natural al ajustarse a las convenciones de Angular.

 ng agregar @angular/fire

• Inyección de dependencia : proporcione e inyecte servicios de Firebase en sus componentes.
• Envoltorios de Zone.js : las zonas estables permiten la funcionalidad adecuada de los trabajadores de servicio, formularios, SSR y prerenderizado.
• Basado en observables : utilice RxJS en lugar de devoluciones de llamadas para transmisiones en tiempo real.
• API compatible con NgRx : integre con NgRx utilizando las API basadas en acciones de AngularFire.
• Carga diferida : AngularFire importa dinámicamente gran parte de Firebase, lo que reduce el tiempo para cargar su aplicación.
• Implemente esquemas : implemente su aplicación Angular en Firebase Hosting con un solo comando.
• Google Analytics : reconocimiento de Angular Router sin esfuerzo en Google Analytics.
• Router Guards : proteja sus rutas Angular con comprobaciones de autenticación de Firebase integradas.

Uso de ejemplo

 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 : `
  

    @for (item of (item$ | async); track item) {
      

        {{ item.name }}
      
    }
  
  `
} )
export class AppComponent {
  item$ : Observable < Item [ ] > ;
  firestore : Firestore = inject ( Firestore ) ;

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

Polirellenos

Ni AngularFire ni Firebase se envían con polyfills. Para tener compatibilidad en una amplia gama de entornos, sugerimos agregar los siguientes polyfills a su aplicación:

API	Ambientes	Polyfill sugerido	Licencia
Varias funciones de ES5+	Safari < 10	core-js/stable	MIT
globalThis	Cromo < 71 Safari < 12.1 iOS < 12.2 Nodo < 12	globalThis	MIT
Proxy	Safari < 10	proxy-polyfill	apache 2.0
fetch	Safari < 10.1 iOS < 10.3	cross-fetch	MIT

Recursos

Inicio rápido: ponga en funcionamiento su primera aplicación siguiendo nuestra guía de inicio rápido.

Contribuyendo

Plantilla Stackblitz: recuerde establecer su configuración de Firebase en app/app.module.ts .

¿Actualizando a v7.0? Consulta nuestra guía.

Aplicaciones de muestra

Tenemos tres aplicaciones de muestra en este repositorio:

1. samples/compat de una aplicación de fregadero de cocina que demuestra el uso de la API de "compatibilidad"
2. samples/modular una aplicación de fregadero de cocina que demuestra la nueva API que se puede sacudir en forma de árbol
3. samples/advanced es la misma aplicación que samples/modular , pero demuestra conceptos más avanzados como la transferencia de estado universal angular, la importación dinámica de módulos de funciones de Firebase y la agrupación de datos de Firestore.

¿Tienes problemas?

Obtenga ayuda en nuestro tablero de preguntas y respuestas, la lista de correo oficial de Firebase, Firebase Community Slack ( #angularfire2 ), Angular Community Discord ( #firebase ), Gitter, el subreddit de Firebase o Stack Overflow.

NOTA: Si bien es relativamente estable, AngularFire es una vista previa para desarrolladores y está sujeta a cambios antes de la disponibilidad general. Las preguntas en la lista de correo y los problemas presentados aquí son respondidos con el mejor esfuerzo por parte de los mantenedores y otros miembros de la comunidad. Si puede reproducir un problema con Firebase fuera de la implementación de AngularFire , presente un problema en el SDK de Firebase JS o comuníquese con el canal de soporte personalizado de Firebase.

Guía para desarrolladores

Esta guía para desarrolladores supone que está utilizando la nueva API AngularFire que se puede sacudir en árbol. Si está buscando la API de compatibilidad, puede encontrar la documentación aquí.

Consulte la guía de actualización v7 para obtener más información sobre este cambio.

Integraciones de productos Firebase

Analítica import { } from '@angular/fire/analytics' ;	Autenticación import { } from '@angular/fire/auth' ;
Tienda de fuego en la nube import { } from '@angular/fire/firestore' ;	Funciones de la nube import { } from '@angular/fire/functions' ;
Mensajería en la nube import { } from '@angular/fire/messaging' ;	Almacenamiento en la nube import { } from '@angular/fire/storage' ;
Monitoreo del desempeño import { } from '@angular/fire/performance' ;	Base de datos en tiempo real import { } from '@angular/fire/database' ;
Configuración remota import { } from '@angular/fire/remote-config' ;	Verificación de aplicaciones import { } from '@angular/fire/app-check' ;
IA de vértice import { } from '@angular/fire/vertexai-preview' ;