fogo angular

AngularFire

AngularFire suaviza as arestas que um desenvolvedor Angular pode encontrar ao implementar o Firebase JS SDK independente de estrutura e tem como objetivo fornecer uma experiência de desenvolvedor mais natural, em conformidade com as convenções Angular.

 adicione @angular/fire

• Injeção de dependência - Forneça e injete serviços Firebase em seus componentes.
• Wrappers Zone.js – Zonas estáveis ​​permitem funcionalidade adequada de service workers, formulários, SSR e pré-renderização.
• Baseado em observável - Utilize RxJS em vez de retornos de chamada para fluxos em tempo real.
• API amigável para NgRx - Integre-se ao NgRx usando APIs baseadas em ação do AngularFire.
• Carregamento lento - AngularFire importa dinamicamente grande parte do Firebase, reduzindo o tempo de carregamento do seu aplicativo.
• Implante esquemas - implante seu aplicativo Angular no Firebase Hosting com um único comando.
• Google Analytics - Reconhecimento do roteador angular de esforço zero no Google Analytics.
• Router Guards - Proteja suas rotas Angular com verificações integradas do Firebase Authentication.

Exemplo de uso

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

Polifills

Nem o AngularFire nem o Firebase são fornecidos com polyfills. Para ter compatibilidade em uma ampla variedade de ambientes, sugerimos que os seguintes polyfills sejam adicionados ao seu aplicativo:

API	Ambientes	Polyfill sugerido	Licença
Vários recursos do ES5+	Safári <10	core-js/stable	MIT
globalThis	Cromo <71 Safári <12.1 iOS <12.2 Nó <12	globalThis	MIT
Proxy	Safári <10	proxy-polyfill	Apache 2.0
fetch	Safári <10.1 iOS <10.3	cross-fetch	MIT

Recursos

Início rápido - Coloque seu primeiro aplicativo em funcionamento seguindo nosso guia de início rápido.

Contribuindo

Modelo Stackblitz - Lembre-se de definir sua configuração do Firebase em app/app.module.ts .

Atualizando para v7.0? Confira nosso guia.

Exemplos de aplicativos

Temos três aplicativos de exemplo neste repositório:

1. samples/compat de um aplicativo de pia de cozinha que demonstra o uso da API de "compatibilidade"
2. samples/modular um aplicativo de pia de cozinha que demonstra a nova API que pode ser abalada em árvore
3. samples/advanced é o mesmo aplicativo que samples/modular , mas demonstra conceitos mais avançados, como transferência de estado Angular Universal, importação dinâmica de módulos de recursos do Firebase e agrupamento de dados do Firestore.

Está tendo problemas?

Obtenha ajuda em nosso quadro de perguntas e respostas, na lista de discussão oficial do Firebase, no Firebase Community Slack ( #angularfire2 ), no Angular Community Discord ( #firebase ), no Gitter, no subreddit do Firebase ou no Stack Overflow.

NOTA: Embora relativamente estável, AngularFire é uma prévia do desenvolvedor e está sujeito a alterações antes da disponibilidade geral. As perguntas na lista de discussão e os problemas registrados aqui são respondidos da melhor maneira possível pelos mantenedores e outros membros da comunidade. Se você conseguir reproduzir um problema com o Firebase fora da implementação do AngularFire , registre um problema no SDK JS do Firebase ou entre em contato com o canal de suporte personalizado do Firebase.

Guia do desenvolvedor

Este guia do desenvolvedor pressupõe que você esteja usando a nova API AngularFire que pode ser abalada em árvore. Se estiver procurando pela API de compatibilidade, você pode encontrar a documentação aqui.

Consulte o guia de atualização da v7 para obter mais informações sobre essa alteração.

Integrações de produtos Firebase

Análise import { } from '@angular/fire/analytics' ;	Autenticação import { } from '@angular/fire/auth' ;
Cloud Firestore import { } from '@angular/fire/firestore' ;	Funções de nuvem import { } from '@angular/fire/functions' ;
Mensagens na nuvem import { } from '@angular/fire/messaging' ;	Armazenamento em nuvem import { } from '@angular/fire/storage' ;
Monitoramento de desempenho import { } from '@angular/fire/performance' ;	Banco de dados em tempo real import { } from '@angular/fire/database' ;
Configuração remota import { } from '@angular/fire/remote-config' ;	Verificação de aplicativo import { } from '@angular/fire/app-check' ;
Vértice AI import { } from '@angular/fire/vertexai-preview' ;