添加 Firebase Angular - Javascript

Firebase是一个全球性的移动和Web应用程序平台，提供实时数据库，身份验证，云存储，云函数等功能。Angular是Google推出的一个流行的JavaScript框架，用于构建单页面Web应用程序。将Firebase与Angular结合使用可以为您的Web应用程序提供无与伦比的快速、可扩展性和可靠性。本文将介绍如何在Angular应用程序中添加Firebase。

步骤1：创建Firebase项目

首先，您需要在Firebase控制台上创建一个新项目。访问Firebase控制台，单击“添加项目”按钮，输入项目名称和其他相关信息，然后单击“创建项目”按钮。

步骤2：添加Firebase库

在Firebase控制台中创建新项目后，单击“添加Firebase到Web应用程序”按钮，选择“使用Firebase Hosting”选项，并将所有域名添加到白名单中。单击“注册应用程序”按钮，将生成一个配置对象，其中包括您的项目ID和其他与Firebase集成相关的信息。

接下来，将Firebase库添加到Angular应用程序中。要做到这一点，您需要安装firebase和angularfire2包。您可以使用以下命令进行安装：

npm install firebase angularfire2 --save

步骤3：在Angular中使用Firebase

现在，您已经将Firebase库添加到了Angular应用程序中。接下来，您需要在Angular组件中使用它。首先，在app.module.ts文件中导入AngularFireModule和AngularFireDatabaseModule，如下所示：

import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
  ],
  declarations: [],
  providers: [],
  bootstrap: []
})
export class AppModule { }

在上面的代码中，我们将AngularFireModule和AngularFireDatabaseModule导入到我们的app.module.ts文件中。此外，我们还使用AngularFireModule的initializeApp方法初始化Firebase，并将我们的配置过程传递给该方法。

现在，我们可以在任何组件中使用Firebase库了。例如，我们可以在app.component.ts中获取Firebase的实例并访问我们的实时数据库中的数据，如下所示：

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Component({
  selector: 'app-root',
  template: `
  <div *ngFor="let item of items | async">
    {{ item.name }}
  </div>
  `
})
export class AppComponent {
  items;

  constructor(db: AngularFireDatabase) {
    this.items = db.list('items').valueChanges();
  }
}

在上面的代码中，我们使用AngularFireDatabase在Angular组件中注入了Firebase的实例，并使用valueChanges方法访问我们的实时数据库中的数据。我们还使用Angular的async管道来实现我们的数据绑定。

总结

现在，您已经知道如何在Angular应用程序中添加Firebase库。如果您希望使用Firebase身份验证、云存储、云函数等功能，请查阅Firebase开发者文档以获得更多信息。