ไฟเชิงมุม

แองกูลาร์ไฟร์

AngularFire ปรับให้เรียบบนขอบหยาบที่นักพัฒนา Angular อาจพบเมื่อใช้ Firebase JS SDK ที่ไม่เชื่อเรื่องเฟรมเวิร์ก และตั้งเป้าที่จะมอบประสบการณ์นักพัฒนาที่เป็นธรรมชาติมากขึ้นโดยปฏิบัติตามแบบแผนของ Angular

 ng เพิ่ม @เชิงมุม/ไฟ

• การพึ่งพาการฉีด - จัดเตรียมและฉีดบริการ Firebase ในส่วนประกอบของคุณ
• Wrapper ของ Zone.js - โซนที่เสถียรช่วยให้พนักงานบริการ แบบฟอร์ม SSR และการแสดงผลล่วงหน้าทำงานได้อย่างเหมาะสม
• Observable based - ใช้ RxJS แทนการโทรกลับสำหรับการสตรีมแบบเรียลไทม์
• API ที่เป็นมิตรกับ NgRx - ผสานรวมกับ NgRx โดยใช้ API ตามการทำงานของ AngularFire
• การโหลดแบบ Lazy Loading - AngularFire นำเข้า Firebase จำนวนมากแบบไดนามิก ซึ่งช่วยลดเวลาในการโหลดแอปของคุณ
• ปรับใช้แผนงาน - ทำให้แอปพลิเคชัน Angular ของคุณใช้งานบน Firebase Hosting ด้วยคำสั่งเดียว
• Google Analytics - การรับรู้เราเตอร์เชิงมุมที่ไม่ต้องเปลืองแรงใน Google Analytics
• Router Guards - ปกป้องเส้นทางเชิงมุมของคุณด้วยการตรวจสอบ Firebase Authentication ในตัว

ตัวอย่างการใช้งาน

 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 ไม่ได้มาพร้อมกับโพลีฟิล เพื่อให้เข้ากันได้ในสภาพแวดล้อมที่หลากหลาย เราขอแนะนำให้เพิ่มโพลีฟิลต่อไปนี้ในแอปพลิเคชันของคุณ:

เอพีไอ	สภาพแวดล้อม	โพลีฟิลที่แนะนำ	ใบอนุญาต
คุณสมบัติต่างๆ ของ ES5+	ซาฟารี < 10	core-js/stable	เอ็มไอที
globalThis	โครม < 71 ซาฟารี < 12.1 iOS < 12.2 โหนด < 12	globalThis	เอ็มไอที
Proxy	ซาฟารี < 10	proxy-polyfill	อาปาเช่ 2.0
fetch	ซาฟารี < 10.1 ไอโอเอส <10.3	cross-fetch	เอ็มไอที

ทรัพยากร

การเริ่มต้นอย่างรวดเร็ว - ทำให้แอปพลิเคชันแรกของคุณพร้อมใช้งานโดยทำตามคำแนะนำการเริ่มต้นอย่างรวดเร็วของเรา

มีส่วนร่วม

เทมเพลต Stackblitz - อย่าลืมตั้งค่า Firebase ของคุณใน app/app.module.ts

อัปเกรดเป็น v7.0 หรือไม่? ลองดูคำแนะนำของเรา

แอปตัวอย่าง

เรามีแอปตัวอย่างสามแอปในที่เก็บนี้:

1. samples/compat แอปพลิเคชันอ่างล้างจานที่สาธิตการใช้ API "ความเข้ากันได้"
2. samples/modular แอปพลิเคชันอ่างล้างจานที่สาธิต API แบบใหม่ที่สั่นไหวแบบต้นไม้
3. samples/advanced เดียวกันกับ samples/modular แต่สาธิตแนวคิดขั้นสูงเพิ่มเติม เช่น การถ่ายโอนสถานะ Angular Universal การนำเข้าโมดูลคุณลักษณะ Firebase แบบไดนามิก และการรวมกลุ่มข้อมูล Firestore

มีปัญหาใช่ไหม?

รับความช่วยเหลือจากกระดานถามตอบของเรา รายชื่อผู้รับจดหมาย Firebase อย่างเป็นทางการ Firebase Community Slack ( #angularfire2 ) Angular Community Discord ( #firebase ) Gitter Subreddit ของ Firebase หรือ Stack Overflow

หมายเหตุ: แม้ว่า AngularFire จะค่อนข้างเสถียร แต่เป็นเพียงตัวอย่างสำหรับนักพัฒนาและอาจมีการเปลี่ยนแปลงได้ก่อนที่จะเปิดให้ใช้งานทั่วไป คำถามเกี่ยวกับรายชื่อผู้รับอีเมลและปัญหาที่ยื่นไว้ที่นี่จะได้รับคำตอบตาม ความพยายามอย่างดีที่สุด โดยผู้ดูแลและสมาชิกชุมชนคนอื่นๆ หากคุณสามารถสร้างปัญหาซ้ำกับ Firebase นอกเหนือจากการใช้งาน AngularFire ได้ โปรดยื่นปัญหาบน Firebase JS SDK หรือติดต่อช่องทางการสนับสนุน Firebase ส่วนบุคคล

คู่มือนักพัฒนา

คู่มือนักพัฒนานี้ถือว่าคุณกำลังใช้ AngularFire API ที่สามารถสั่นไหวแบบต้นไม้ได้ หากคุณกำลังมองหา API ที่เข้ากันได้ คุณสามารถดูเอกสารประกอบได้ที่นี่

ดูคู่มือการอัปเกรด v7 สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงนี้

การบูรณาการผลิตภัณฑ์ Firebase

การวิเคราะห์ import { } from '@angular/fire/analytics' ;	การรับรองความถูกต้อง import { } from '@angular/fire/auth' ;
คลาวด์ไฟร์สโตร์ 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' ;