角火

角火

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' ;