Angular 8 + Firestore (Firebase) 設定教學 (使用AngularFire)

Angular 專案加上 Firebase

Firebase最大的優點就是，它的操作簡單直覺，還有圖形化介面的後台，所以對於資料庫操作不是那麼熟悉的人來說，這是非常好的一個選擇。

這次會用到AngularFire，Angular官方的Library

官方library寫得非常清楚，只要依照步驟一一完成就可以了。

我們依然是使用stackblitz雲端IDE，在這邊
從npm安裝AngularFire 和 Firebase。

@angular/fire firebase

配置環境變數

至Firebase創建一個Project，接著點擊Project Overview，會出現下圖畫面。

再點擊+Add app。

這時會請你選擇平台，我們先點選紅筆圈選的Web。

輸入web app 的名稱

這時你就會得到類似下圖格式的環境變數資料，不用擔心如果忘記了，還可以在設定中找到。

配置environments

接著回到我們的Angular專案，創建一個 environments 的資料夾，以及兩個檔案 environment.ts 及 environment.prod.ts

開啟 environments.ts，把剛剛firebase的環境派至變數填入。

設置app.module.ts

這裡要將環境變數連結AngularFire Module。

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

@NgModule中，在imports加入

 AngularFireModule.initializeApp(environment.firebase)

這次我們會使用的是Database中的Firestore，所以必須引入這兩個

 import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { AngularFireDatabaseModule } from '@angular/fire/database';

@NgModule中，import

 AngularFirestoreModule, AngularFireDatabaseModule

基本上配置的部分就完成了

測試Angular 與 Firebase連結

在app.component.ts import 下列兩行

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

以及在class 中新增

items: Observable<any[]>;
 constructor(db: AngularFirestore) {
   this.items = db.collection('items').valueChanges();
  }

如果不懂rxjs的話，這裡有一篇淺顯易懂的文章- 最淺顯易懂的 RxJS 教學

在app.component.html中

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

透過ngFor將database中，"items"這個collection內的所有document都顯示出來。

與此同時，當然要在firebase中創建名為items的collection囉。

這邊比較重要的是，Document id他可以自動生成，我們只需要設定Field為name，而value就可以自行設定了。

There you go，你的Angular + Firebase專案就完成第一步啦!
就可以運用他完成你的ideas了！

Angular + Firebase 系列文章：