угловой огонь

AngularFire

AngularFire сглаживает острые углы, с которыми может столкнуться разработчик Angular при реализации независимого от платформы Firebase JS SDK, и стремится обеспечить более естественный опыт разработки за счет соответствия соглашениям Angular.

 нг добавить @angular/fire

• Внедрение зависимостей . Предоставляйте и внедряйте сервисы Firebase в ваши компоненты.
• Обертки Zone.js — стабильные зоны обеспечивают правильную работу сервис-воркеров, форм, SSR и предварительной отрисовки.
• На основе наблюдаемых — используйте RxJS вместо обратных вызовов для потоков в реальном времени.
• Дружественный к NgRx API — интеграция с NgRx с использованием API-интерфейсов AngularFire, основанных на действиях.
• Отложенная загрузка . AngularFire динамически импортирует большую часть Firebase, сокращая время загрузки вашего приложения.
• Развертывание схем . Разверните приложение Angular на хостинге Firebase с помощью одной команды.
• Google Analytics — осведомленность об Angular Router с нулевыми усилиями в Google Analytics.
• Router Guards — защитите свои маршруты 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 : `
  

    @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 не поставляются с полифилами. Чтобы обеспечить совместимость в широком диапазоне сред, мы предлагаем добавить в ваше приложение следующие полифилы:

API	Окружающая среда	Предлагаемый полифилл	Лицензия
Различные функции ES5+	Сафари < 10	core-js/stable	Массачусетский технологический институт
globalThis	Хром < 71 Сафари < 12.1 iOS < 12.2 Узел < 12	globalThis	Массачусетский технологический институт
Proxy	Сафари < 10	proxy-polyfill	Апач 2.0
fetch	Сафари < 10.1 iOS < 10.3	cross-fetch	Массачусетский технологический институт

Ресурсы

Краткое руководство. Запустите свое первое приложение, следуя нашему краткому руководству.

Содействие

Шаблон Stackblitz. Не забудьте установить конфигурацию Firebase в app/app.module.ts .

Обновление до версии 7.0? Ознакомьтесь с нашим руководством.

Примеры приложений

В этом репозитории есть три примера приложений:

1. samples/compat приложение для кухонной мойки, демонстрирующее использование API «совместимости»
2. samples/modular приложения для кухонной мойки, демонстрирующего новый API, поддерживающий древовидную тряску
3. samples/advanced представляет собой то же приложение, что и samples/modular , но демонстрирует более продвинутые концепции, такие как универсальная передача состояния Angular, динамический импорт функциональных модулей Firebase и объединение данных Firestore.

Возникли проблемы?

Получите помощь на нашей доске вопросов и ответов, в официальном списке рассылки Firebase, в Slack сообщества Firebase ( #angularfire2 ), в Discord сообщества Angular ( #firebase ), Gitter, в субреддите Firebase или Stack Overflow.

ПРИМЕЧАНИЕ. Несмотря на то, что AngularFire относительно стабилен, он представляет собой предварительную версию для разработчиков и может быть изменен перед общедоступной версией. На вопросы в списке рассылки и проблемы, оставленные здесь, отвечают специалисты по сопровождению и другие члены сообщества. Если вам удается воспроизвести проблему с Firebase за пределами реализации AngularFire , сообщите о проблеме в Firebase JS SDK или обратитесь по индивидуальному каналу поддержки Firebase.

Руководство разработчика

В этом руководстве разработчика предполагается, что вы используете новый API AngularFire с поддержкой дерева. Если вы ищете API совместимости, вы можете найти документацию здесь.

Дополнительную информацию об этом изменении см. в руководстве по обновлению до версии 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' ;