角火

角火

AngularFire 平滑了 Angular 開發人員在實現與框架無關的 Firebase JS SDK 時可能遇到的粗糙邊緣，並旨在透過遵守 Angular 約定來提供更自然的開發人員體驗。

 ng 添加@angular/fire

• 依賴注入- 在您的元件中提供和注入 Firebase 服務。
• Zone.js 包裝器- 穩定區域允許服務工作者、表單、SSR 和預先渲染發揮適當的功能。
• 基於 Observable - 使用 RxJS 而不是即時串流的回呼。
• NgRx 友善的 API - 使用 AngularFire 基於操作的 API 與 NgRx 整合。
• 延遲載入- AngularFire 動態導入 Firebase 的大部分內容，減少載入應用程式的時間。
• 部署原理圖- 使用單一命令將 Angular 應用程式部署在 Firebase 託管上。
• Google Analytics - Google Analytics 中的零努力 Angular 路由器感知。
• Router Guards - 透過內建的 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 均未附帶 Polyfill。為了在廣泛的環境中具有相容性，我們建議將以下填充添加到您的應用程式中：

應用程式介面	環境	建議的 Polyfill	執照
各種 ES5+ 功能	野生動物園 < 10	core-js/stable	麻省理工學院
globalThis	鉻 < 71 Safari < 12.1 iOS < 12.2 節點 < 12	globalThis	麻省理工學院
Proxy	野生動物園 < 10	proxy-polyfill	阿帕契2.0
fetch	Safari < 10.1 iOS < 10.3	cross-fetch	麻省理工學院

資源

快速入門 - 按照我們的快速入門指南啟動並運行您的第一個應用程式。

貢獻

Stackblitz 範本 - 請記得在app/app.module.ts中設定 Firebase 配置。

升級到v7.0？查看我們的指南。

範例應用程式

我們在此存儲庫中有三個示例應用程式：

1. samples/compat一個廚房水槽應用程序，示範如何使用「相容性」API
2. samples/modular廚房水槽應用程序，示範新的 tree-shakable API
3. samples/advanced與samples/modular相同的應用程序，但演示了更高級的概念，例如 Angular 通用狀態傳輸、動態導入 Firebase 功能模組和 Firestore 資料捆綁。

有麻煩嗎？

在我們的問答版塊、官方 Firebase 郵件清單、Firebase 社群 Slack ( #angularfire2 )、Angular 社群 Discord ( #firebase )、Gitter、Firebase subreddit 或 Stack Overflow 上取得協助。

注意：雖然相對穩定，但 AngularFire 是開發者預覽版，在正式發布之前可能會發生變化。維護者和其他社區成員將盡力回答有關郵件清單的問題和此處提交的問題。如果您能夠在 AngularFire 實作之外重現 Firebase 問題，請在 Firebase JS SDK 上提交問題或聯絡個人化 Firebase 支援管道。

開發者指南

本開發人員指南假設您正在使用新的可樹搖動的 AngularFire API，如果您正在尋找相容性 API，您可以在此處找到文件。

有關此更改的更多信息，請參閱 v7 升級指南。

Firebase 產品集成

分析 import { } from '@angular/fire/analytics' ;	驗證 import { } from '@angular/fire/auth' ;
雲端Firestore 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' ;
頂點人工智慧 import { } from '@angular/fire/vertexai-preview' ;