Angular 9 + Firebase (1) : AngularFire 快速安裝

本文為 AngularFire 介紹，改寫自 AngularFire 官方文件。

step 1. 建立專案
step 2. 安裝 AngularFire 和 Firebase
step 3. 將 Firebase config 加入專案環境
step 4. 設定 @NgModule
step 5. 注入 AngularFirestore
step 6. 取得回傳資料並綁定到 template
step 7. 本地啟動
step 8. 部屬至 Firebase

步驟

step 1. 建立 Angular 專案

在自己的機器上全域安裝 angular cli，已經安裝過 angular cli 可以略過。

npm install -g @angular/cli
ng new <project-name>
cd <project-name>

step 2. 安裝 AngularFire 和 Firebase

在專案中加入 AngularFire 和 Firebase

ng add @angular/fire

step 3. 將 Firebase config 加入專案環境

將 Firebase SDK 貼在 /src/environments/environment.ts 裡面

取得 Firebase SDK：

左側面板專案總覽齒輪 -> 專案設定 -> 一般設定 -> 您的應用程式

Firebase SDK snippet

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

step 4. 設定 @NgModule

/src/app/app.module.ts 會注入各種服務。
AngularFireModule 會啟動環境。
AngularFirestoreModule 可以操作資料庫。
其餘需求例如 AngularFireAnalyticsModule 可以自行查閱。

/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule } from '@angular/fire/firestore';

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

step 5. 注入 AngularFirestore

在需要的 component、service 注入 AngularFirestore。
此處用 /src/app/app.component.ts 示範

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  constructor(firestore: AngularFirestore) {

  }
}

step 6. 取得回傳資料並綁定到 template

/src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  items: Observable<any[]>;
  constructor(firestore: AngularFirestore) {
    this.items = firestore.collection('items').valueChanges();
  }
}

這邊要留意一下，從 firestore 回傳的是 observable，在這個快速教學裡，目標只是單純地將回傳的物件顯示在 template 上，所以使用 pipe async （| async）來處理。
| async 這個動作相當於在 subscribe。

/src/app/app.component.html

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.name}}
  </li>
</ul>

step 7. 本地啟動

ng serve

step 8. 部屬至 Firebase

ng deploy

參考資料

• https://dotblogs.com.tw/H20/2018/05/23/152941