New modular docs

README.md

@@ -31,6 +31,7 @@ export class AppModule { }
 ```
 
 ```ts
+import { inject } from '@angular/core';
 import { Firestore, collectionData, collection } from '@angular/fire/firestore';
 import { Observable } from 'rxjs';
 
@@ -51,8 +52,10 @@ interface Item {
 })
 export class AppComponent {
   item$: Observable<Item[]>;
-  constructor(firestore: Firestore) {
-    const collection = collection(firestore, 'items');
+  firestore: Firestore = inject(Firestore);
+
+  constructor() {
+    const itemCollection = collection(this.firestore, 'items');
     this.item$ = collectionData(collection);
   }
 }
@@ -116,86 +119,97 @@ Get help on our [Q&A board](https://github.com/angular/angularfire/discussions?d
 
 ## Developer Guide
 
-AngularFire has a new tree-shakable API, however this is still under active development and documentation is in the works, so we suggest most developers stick with the Compatiability API for the time being. [See the v7 upgrade guide for more information.](docs/version-7-upgrade.md). 
-
-This developer guide assumes you're using the Compatiability API (`@angular/fire/compat/*`).
-
-### Monitor usage of your application in production
-
-> `AngularFireAnalytics` provides a convenient method of interacting with Google Analytics in your Angular application. The provided `ScreenTrackingService` and `UserTrackingService` automatically log events when you're using the Angular Router or Firebase Authentication respectively. [Learn more about Google Analytics](https://firebase.google.com/docs/analytics).
-
-- [Getting started with Google Analytics](docs/analytics/getting-started.md)
-
-### Interacting with your database(s)
-
-Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing. [Learn about the differences between them in the Firebase Documentation](https://firebase.google.com/docs/firestore/rtdb-vs-firestore).
-
-#### Cloud Firestore
-
-> `AngularFirestore` allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.
-
-- [Documents](docs/firestore/documents.md)
-- [Collections](docs/firestore/collections.md)
-- [Querying Collections](docs/firestore/querying-collections.md)
-- [Offline data](docs/firestore/offline-data.md)
-
-#### Realtime Database
-
-> `AngularFireDatabase` allows you to work with the Realtime Database, Firebase's original database. It's an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.
-
-- [Objects](docs/rtdb/objects.md)
-- [Lists](docs/rtdb/lists.md)
-- [Querying lists](docs/rtdb/querying-lists.md)
-
-### Authenticate users
-
-- [Getting started with Firebase Authentication](docs/auth/getting-started.md)
-- [Route users with AngularFire guards](docs/auth/router-guards.md)
-
-### Local Emulator Suite
-
-- [Getting started with Firebase Emulator Suite](docs/emulators/emulators.md)
-
-### Upload files
-
-- [Getting started with Cloud Storage](docs/storage/storage.md)
-
-### Receive push notifications
-
-- [Getting started with Firebase Messaging](docs/messaging/messaging.md)
+This developer guide assimes you're using the new tree-shakable AngularFire API, [if you're looking for the compatability API you can find the documentation here](docs/compat.md).
 
-### **BETA:** Change behavior and appearance of your application without deploying
+[See the v7 upgrade guide for more information on this change.](docs/version-7-upgrade.md).
 
-> Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. [Learn more about Remote Config](https://firebase.google.com/docs/remote-config).
+### Firebase product integrations
 
-- [Getting started with Remote Config](docs/remote-config/getting-started.md)
+<table>
+  <tr>
+    <td>
 
-### Monitor your application performance in production
-
-> Firebase Performance Monitoring is a service that helps you to gain insight into the performance characteristics of your iOS, Android, and web apps. [Learn more about Performance Monitoring](https://firebase.google.com/docs/perf-mon).
+#### [Analytics](docs/analytics.md#analytics)
+```ts
+import { } from '@angular/fire/analytics';
+```
+</td>
+    <td>
 
-- [Getting started with Performance Monitoring](docs/performance/getting-started.md)
+#### [Authentication](docs/auth.md#authentication)
+```ts
+import { } from '@angular/fire/auth';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-### Directly call Cloud Functions
+#### [Cloud Firestore](docs/firestore.md#cloud-firestore)
+```ts
+import { } from '@angular/fire/firestore';
+```
+</td>
+    <td>
 
-- [Getting started with Callable Functions](docs/functions/functions.md)
+#### [Cloud Functions](docs/functions.md#cloud-functions)
+```ts
+import { } from '@angular/fire/functions';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-### Deploying your application
+#### [Cloud Messaging](docs/messaging.md#cloud-messaging)
+```ts
+import { } from '@angular/fire/messaging';
+```
+</td>
+    <td>
 
-> Firebase Hosting is production-grade web content hosting for developers. With Hosting, you can quickly and easily deploy web apps and static content to a global content delivery network (CDN) with a single command.
+#### [Cloud Storage](docs/storage.md#cloud-storage)
+```ts
+import { } from '@angular/fire/storage';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-- [Deploy your application on Firebase Hosting](docs/deploy/getting-started.md)
+#### [Performance Monitoring](docs/performance.md#performance-monitoring)
+```ts
+import { } from '@angular/fire/performance';
+```
+</td>
+    <td>
 
-#### Server-side rendering
+#### [Realtime Database](docs/database.md#realtime-database)
+```ts
+import { } from '@angular/fire/database';
+```
+</td>
+  </tr>
+  <tr>
+    <td>
 
-> Angular Universal is a technology that allows you to run your Angular application on a server. This allows you to generate your HTML in a process called server-side rendering (SSR). AngularFire is compatible with server-side rendering; allowing you to take advantage of the Search Engine Optimization, link previews, the performance gains granted by the technology, and more. [Learn more about Angular Universal](https://angular.io/guide/universal).
+#### [Remote Config](docs/remote-config.md#remote-config)
+```ts
+import { } from '@angular/fire/remote-config';
+```
+</td>
+    <td>
 
-- [Getting started with Angular Universal](docs/universal/getting-started.md)
-- [Deploying your Universal application on Cloud Functions for Firebase](docs/universal/cloud-functions.md)
-- [Prerendering your Universal application](docs/universal/prerendering.md)
+#### [App Check](docs/app-check.md#app-check)
+```ts
+import { } from '@angular/fire/app-check';
+```
+</td>
+  </tr>
+</table>
 
-### Ionic
+### Deploying your site
 
-- [Installation and Setup with Ionic CLI](docs/ionic/cli.md)
-- [Using AngularFire with Ionic 2](docs/ionic/v2.md)
-- [Using AngularFire with Ionic 3](docs/ionic/v3.md)
+* Deploy to Firebase Hosting
+* Angular Universal: Deploy to Cloud Functions
+* Angular Universal: Deploy to Cloud Run

docs/analytics.md

@@ -0,0 +1,67 @@
+<img align="right" width="30%" src="images/analytics-illo_1x.png">
+
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Analytics
+</small>
+
+# Analytics
+
+Google Analytics is an app measurement solution, available at no charge, that provides insight on app usage and user engagement.
+
+[Learn more](https://firebase.google.com/docs/analytics)
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Google Analytics instance in the application's `NgModule` (`app.module.ts`):
+
+```ts
+@NgModule({
+  declarations: [
+    ...
+  ],
+  imports: [
+    ...
+    // App initialization
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideAnalytics(() => getAnalytics())
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+In your component class, for example `user-profile.component.ts` import and inject `Firestore`:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { Analytics } from '@angular/fire/analytics';
+
+@Component({
+    standalone: true,
+    selector: 'app-user-profile',
+    ...
+})
+export class UserProfileComponent {
+    private analytics: Analytics = inject(Analytics);
+    ...
+}
+```
+
+## Firebase API
+
+The [Firebase API for Google Analytics documentation](https://firebase.google.com/docs/reference/js/analytics.md#analytics_package) is available on the Firebase website.
+
+## Services
+
+### ScreenTrackingService
+
+Coming soon, for now [please review the documentation](https://firebase.google.com/docs/analytics/screenviews)
+
+### UserTrackingService
+Coming soon
+

docs/app-check.md

@@ -0,0 +1,53 @@
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime App Check
+</small>
+
+<img align="right" width="30%" src="images/[email protected]">
+
+# App Check
+
+App Check helps protect your API resources from abuse by preventing unauthorized clients from accessing your backend resources. It works with both Firebase services, Google Cloud services, and your own APIs to keep your resources safe.
+
+[Learn More](https://firebase.google.com/docs/app-check)
+
+## Dependency Injection
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide an App Check instance and configuration in the application's `NgModule` (`app.module.ts`):
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { getAppCheck, provideAppCheck } from '@angular/fire/app-check';
+
+@NgModule({
+  imports: [
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideAppCheck(() => initializeAppCheck(getApp(), {
+        provider: new ReCaptchaV3Provider(/* configuration */),
+      })),
+  ]
+})
+```
+
+Next inject it into your component:
+
+```ts
+import { Component, inject} from '@angular/core';
+import { AppCheck } from '@angular/fire/app-check';
+
+@Component({ ... })
+export class AppCheckComponent {
+  private appCheck: AppCheck = inject(AppCheck);
+  ...
+}
+```
+
+## Firebase API
+
+The [AppCheck documentation](https://firebase.google.com/docs/reference/js/app-check) is available on the Firebase website.
+
+## Convenience observables
+Coming soon.