安装 Firebase 和 Angular 8

Firebase 是一个由 Google 提供的云服务平台，它提供了多种服务，包括实时数据库、认证、存储、云函数等。Angular 是一个由 Google 开发的前端框架，它使用 TypeScript 编写，极大地简化了开发流程。

在本篇文章中，我们将介绍如何在 Angular 8 中集成 Firebase。

步骤 1：创建 Firebase 项目

首先，我们需要在 Firebase 控制台中创建一个项目。具体步骤如下：

1. 访问 Firebase 控制台
2. 点击“添加项目”按钮
3. 输入项目名称并选择所在国家/地区，然后点击“继续”
4. 选择 Google Analytics 是否要启用，然后点击“创建项目”

步骤 2：添加 Firebase 应用

在创建项目后，我们需要添加 Firebase 应用。具体步骤如下：

1. 在 Firebase 控制台中，选择我们创建的项目
2. 点击“设置”按钮
3. 在“一般”选项卡下，点击“向下滚动到适用于 Web 的 Firebase SDK”链接
4. 输入我们的应用名称，并点击“注册应用”

步骤 3：安装 Firebase SDK

1. 打开终端并导航到我们的 Angular 项目根目录
2. 运行以下命令，安装 Firebase 和 AngularFire 库：

npm install firebase @angular/fire --save

步骤 4：初始化 Firebase 模块

1. 打开 src/environments/environment.ts 文件
2. 添加以下 Firebase 配置信息：

export const environment = {
    production: false,
    firebase: {
        apiKey: 'YOUR_API_KEY',
        authDomain: 'YOUR_AUTH_DOMAIN',
        databaseURL: 'YOUR_DATABASE_URL',
        projectId: 'YOUR_PROJECT_ID',
        storageBucket: 'YOUR_STORAGE_BUCKET',
        messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
        appId: 'YOUR_APP_ID'
    }
};

将上面的 YOUR_API_KEY、YOUR_AUTH_DOMAIN、YOUR_DATABASE_URL、YOUR_PROJECT_ID、YOUR_STORAGE_BUCKET、YOUR_MESSAGING_SENDER_ID 和 YOUR_APP_ID 替换为我们在 Firebase 控制台中创建项目时生成的配置信息。

3. 打开 src/app/app.module.ts 文件，添加以下代码：

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';

@NgModule({
    imports: [
        // ...
        AngularFireModule.initializeApp(environment.firebase)
    ],
    // ...
})
export class AppModule { }

该代码会在 AppModule 中引入 AngularFireModule 并初始化 Firebase 模块。

步骤 5：测试 Firebase 集成

我们现在已经成功地将 Firebase 配置添加到我们的 Angular 应用中，现在可以进行测试了。在我们的组件中，我们可以使用 AngularFire 模块来实现对 Firebase 数据库的 CRUD 操作。

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-root',
    template: `
        <ul>
            <li *ngFor="let item of items | async">{{ item.text }}</li>
        </ul>
    `
})
export class AppComponent {
    items: Observable<any[]>;

    constructor(private store: AngularFirestore) {
        this.items = store.collection('items').valueChanges();
    }
}

上面的代码会在我们的组件中显示一个无序列表，该列表列出了在 Firebase Firestore 数据库中名为“items”的所有文档。我们使用 store.collection('items').valueChanges() 从 Firebase 中读取文档。

我们现在已经成功地将 Firebase 集成到我们的 Angular 8 应用中。祝贺你！