모난 불

AngularFire

AngularFire는 프레임워크에 구애받지 않는 Firebase JS SDK를 구현할 때 Angular 개발자가 직면할 수 있는 거친 부분을 부드럽게 처리하고 Angular 규칙을 준수하여 보다 자연스러운 개발자 환경을 제공하는 것을 목표로 합니다.

 @angular/fire를 추가하세요.

• 종속성 주입 - 구성 요소에 Firebase 서비스를 제공하고 삽입합니다.
• Zone.js 래퍼 - 안정적인 영역에서는 서비스 작업자, 양식, SSR 및 사전 렌더링의 적절한 기능을 허용합니다.
• 관찰 가능 기반 - 실시간 스트림을 위해 콜백 대신 RxJS를 활용합니다.
• NgRx 친화적인 API - AngularFire의 작업 기반 API를 사용하여 NgRx와 통합합니다.
• 지연 로딩 - AngularFire는 Firebase의 대부분을 동적으로 가져오므로 앱 로드 시간이 단축됩니다.
• 회로도 배포 - 단일 명령으로 Firebase 호스팅에 Angular 애플리케이션을 배포하세요.
• Google Analytics - Google Analytics의 간편한 Angular Router 인식.
• 라우터 가드 - 내장된 Firebase 인증 검사로 Angular 경로를 보호하세요.

사용예

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

폴리필

AngularFire와 Firebase 모두 ​​폴리필과 함께 제공되지 않습니다. 광범위한 환경에서 호환성을 가지려면 애플리케이션에 다음 폴리필을 추가하는 것이 좋습니다.

API	환경	제안된 폴리필	특허
다양한 ES5+ 기능	사파리 < 10	core-js/stable	MIT
globalThis	크롬 < 71 사파리 < 12.1 iOS < 12.2 노드 < 12	globalThis	MIT
Proxy	사파리 < 10	proxy-polyfill	아파치 2.0
fetch	사파리 < 10.1 iOS < 10.3	cross-fetch	MIT

자원

빠른 시작 - 빠른 시작 가이드에 따라 첫 번째 애플리케이션을 시작하고 실행하세요.

기여

Stackblitz 템플릿 - app/app.module.ts 에서 Firebase 구성을 설정하는 것을 잊지 마세요.

v7.0으로 업그레이드하시겠습니까? 우리 가이드를 확인해보세요.

샘플 앱

이 저장소에는 세 가지 샘플 앱이 있습니다.

1. "호환성" API 사용을 보여주는 부엌 싱크대 애플리케이션 samples/compat
2. 새로운 트리 셰이크 가능 API를 시연하는 주방 싱크대 애플리케이션 samples/modular
3. samples/advanced samples/modular 과 동일한 앱이지만 Angular Universal 상태 전송, 동적으로 Firebase 기능 모듈 가져오기, Firestore 데이터 번들링과 같은 고급 개념을 보여줍니다.

문제가 있나요?

Q&A 게시판, 공식 Firebase 메일링 리스트, Firebase 커뮤니티 Slack( #angularfire2 ), Angular Community Discord( #firebase ), Gitter, Firebase 하위 레딧 또는 Stack Overflow에서 도움을 받으세요.

참고: 상대적으로 안정적이지만 AngularFire는 개발자 미리 보기이므로 일반 출시되기 전에 변경될 수 있습니다. 메일링 리스트에 있는 질문과 여기에 제출된 문제는 관리자와 다른 커뮤니티 구성원이 최선을 다해 답변합니다. AngularFire 구현 외부에서 Firebase 문제를 재현할 수 있는 경우 Firebase JS SDK에 문제를 제출하거나 맞춤형 Firebase 지원 채널에 문의하세요.

개발자 가이드

이 개발자 가이드에서는 새로운 트리 셰이크 가능 AngularFire API를 사용한다고 가정합니다. 호환성 API를 찾고 있다면 여기에서 문서를 찾을 수 있습니다.

이 변경 사항에 대한 자세한 내용은 v7 업그레이드 가이드를 참조하세요.

Firebase 제품 통합

해석학 import { } from '@angular/fire/analytics' ;	입증 import { } from '@angular/fire/auth' ;
클라우드 파이어스토어 import { } from '@angular/fire/firestore' ;	클라우드 기능 import { } from '@angular/fire/functions' ;
클라우드 메시징 import { } from '@angular/fire/messaging' ;	클라우드 스토리지 import { } from '@angular/fire/storage' ;
성능 모니터링 import { } from '@angular/fire/performance' ;	실시간 데이터베이스 import { } from '@angular/fire/database' ;
원격 구성 import { } from '@angular/fire/remote-config' ;	앱체크 import { } from '@angular/fire/app-check' ;
버텍스 AI import { } from '@angular/fire/vertexai-preview' ;