angularfire

AngularFire

يعمل AngularFire على تنعيم الحواف الخشنة التي قد يواجهها مطور Angular عند تنفيذ Firebase JS SDK غير المتوافق مع إطار العمل ويهدف إلى توفير تجربة مطور أكثر طبيعية من خلال التوافق مع اتفاقيات Angular.

 نانوغرام أضف @angular/fire

• حقن التبعية - توفير خدمات Firebase وحقنها في مكوناتك.
• أغلفة Zone.js - تسمح المناطق المستقرة بالوظائف المناسبة للعاملين في الخدمة والنماذج وSSR والعرض المسبق.
• قائم على الملاحظة - استخدم RxJS بدلاً من عمليات الاسترجاعات للتدفقات في الوقت الفعلي.
• واجهة برمجة التطبيقات الصديقة لـ NgRx - التكامل مع NgRx باستخدام واجهات برمجة التطبيقات المستندة إلى الإجراء الخاصة بـ AngularFire.
• التحميل البطيء - يستورد AngularFire الكثير من Firebase ديناميكيًا، مما يقلل الوقت اللازم لتحميل تطبيقك.
• نشر المخططات - احصل على تطبيق Angular الخاص بك منشورًا على استضافة Firebase بأمر واحد.
• Google Analytics - الوعي بالموجه الزاوي بدون جهد في Google Analytics.
• حراس جهاز التوجيه - قم بحماية مسارات Angular الخاصة بك من خلال عمليات التحقق من مصادقة Firebase المضمنة.

استخدام المثال

 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 : `
  <ul>
    @for (item of (item$ | async); track item) {
      <li>
        {{ item.name }}
      </li>
    }
  </ul>
  `
} )
export class AppComponent {
  item$ : Observable < Item [ ] > ;
  firestore : Firestore = inject ( Firestore ) ;

  constructor ( ) {
    const itemCollection = collection ( this . firestore , 'items' ) ;
    this . item$ = collectionData < Item > ( itemCollection ) ;
  }
}

حشوات متعددة

لا يتم شحن AngularFire أو Firebase بحشوات متعددة. للحصول على التوافق عبر نطاق واسع من البيئات، نقترح إضافة الحشوات المتعددة التالية إلى تطبيقك:

واجهة برمجة التطبيقات	البيئات	اقترح Polyfill	رخصة
ميزات ES5+ المختلفة	سفاري <10	core-js/stable	معهد ماساتشوستس للتكنولوجيا
globalThis	كروم <71 سفاري <12.1 دائرة الرقابة الداخلية <12.2 العقدة <12	globalThis	معهد ماساتشوستس للتكنولوجيا
Proxy	سفاري <10	proxy-polyfill	أباتشي 2.0
fetch	سفاري <10.1 دائرة الرقابة الداخلية <10.3	cross-fetch	معهد ماساتشوستس للتكنولوجيا

موارد

Quickstart - قم بإعداد تطبيقك الأول وتشغيله باتباع دليل البدء السريع الخاص بنا.

المساهمة

قالب Stackblitz - تذكر تعيين تكوين Firebase الخاص بك في app/app.module.ts .

الترقية إلى الإصدار 7.0؟ تحقق من دليلنا.

تطبيقات عينة

لدينا ثلاثة تطبيقات نموذجية في هذا المستودع:

1. samples/compat تطبيق حوض المطبخ الذي يوضح استخدام واجهة برمجة التطبيقات "التوافقية".
2. samples/modular لحوض المطبخ يوضح واجهة برمجة التطبيقات (API) الجديدة القابلة للاهتزاز
3. samples/advanced نفس التطبيق مثل samples/modular ولكنها توضح مفاهيم أكثر تقدمًا مثل نقل الحالة Angular Universal، واستيراد وحدات ميزات Firebase ديناميكيًا، وتجميع بيانات Firestore.

تواجه مشاكل؟

احصل على المساعدة من خلال لوحة الأسئلة والأجوبة، أو القائمة البريدية الرسمية لـ Firebase، أو Firebase Community Slack ( #angularfire2 )، أو Angular Community Discord ( #firebase )، أو Gitter، أو Firebase subreddit، أو Stack Overflow.

ملحوظة: على الرغم من أن AngularFire مستقر نسبيًا، إلا أنه عبارة عن معاينة للمطورين ويخضع للتغيير قبل التوفر العام. يتم الرد على الأسئلة الموجودة في القائمة البريدية والمشكلات المقدمة هنا على أساس أفضل جهد من قبل المشرفين وأعضاء المجتمع الآخرين. إذا كنت قادرًا على إعادة إنتاج مشكلة في Firebase خارج تطبيق AngularFire ، فيرجى تقديم مشكلة على Firebase JS SDK أو التواصل مع قناة دعم Firebase المخصصة.

دليل المطور

يفترض دليل المطور هذا أنك تستخدم واجهة برمجة تطبيقات AngularFire الجديدة القابلة للاهتزاز، إذا كنت تبحث عن واجهة برمجة التطبيقات المتوافقة، فيمكنك العثور على الوثائق هنا.

راجع دليل ترقية الإصدار 7 لمزيد من المعلومات حول هذا التغيير.

تكامل منتجات 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' ;