Skip to content

Commit 1ec218a

Browse files
jamesdanielsMarkTechsondavideast
authored
New modular docs (#3236)
* Getting rolling on the new docs * Working on the markdown * Huh * Firebase style TOC * TOC links * Placeholders for the new docs * Breadcrumbs * Breadcrumbs and anchor links * h4 integrations * Note about compat * Fix links * Images for the individual docs * Auth & database * Add updates to quickstart, firestore developer guide and installation instructions - The quickstart guide has been modernized to feature installation details based on the latest versions of the tools. - The Cloud Firestore developer guide has been updated to feature details on dependency injections, new examples and more * Add updated auth developer guide - updated the code examples to user modern Angular syntax - added the sections on the convenience observables with examples * update missing descriptions * Add updated docs for products, README and quick start * Drop ng12 from the tests, JS SDK (typescript) broke, not work hunting for a good version IMO * Skip prerender test on ng13, broken not worth hunting the flake IMO * Add ng15 to the matrix, add upgrade to ng14 step * Bump the version * Add ng15 to the acceptable peers * Add to README * Contrib tests are failing on newer Node, we should look into but not block merging and cutting --------- Co-authored-by: Mark Thompson <[email protected]> Co-authored-by: David East <[email protected]>
1 parent 57d9005 commit 1ec218a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1185
-1735
lines changed

‎README.md

Lines changed: 84 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export class AppModule { }
3131
```
3232

3333
```ts
34+
import { inject } from '@angular/core';
3435
import { Firestore, collectionData, collection } from '@angular/fire/firestore';
3536
import { Observable } from 'rxjs';
3637

@@ -51,8 +52,10 @@ interface Item {
5152
})
5253
export class AppComponent {
5354
item$: Observable<Item[]>;
54-
constructor(firestore: Firestore) {
55-
const collection = collection(firestore, 'items');
55+
firestore: Firestore = inject(Firestore);
56+
57+
constructor() {
58+
const itemCollection = collection(this.firestore, 'items');
5659
this.item$ = collectionData(collection);
5760
}
5861
}
@@ -116,86 +119,97 @@ Get help on our [Q&A board](https://github.com/angular/angularfire/discussions?d
116119
117120
## Developer Guide
118121

119-
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).
120-
121-
This developer guide assumes you're using the Compatiability API (`@angular/fire/compat/*`).
122-
123-
### Monitor usage of your application in production
124-
125-
> `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).
126-
127-
- [Getting started with Google Analytics](docs/analytics/getting-started.md)
128-
129-
### Interacting with your database(s)
130-
131-
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).
132-
133-
#### Cloud Firestore
134-
135-
> `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.
136-
137-
- [Documents](docs/firestore/documents.md)
138-
- [Collections](docs/firestore/collections.md)
139-
- [Querying Collections](docs/firestore/querying-collections.md)
140-
- [Offline data](docs/firestore/offline-data.md)
141-
142-
#### Realtime Database
143-
144-
> `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.
145-
146-
- [Objects](docs/rtdb/objects.md)
147-
- [Lists](docs/rtdb/lists.md)
148-
- [Querying lists](docs/rtdb/querying-lists.md)
149-
150-
### Authenticate users
151-
152-
- [Getting started with Firebase Authentication](docs/auth/getting-started.md)
153-
- [Route users with AngularFire guards](docs/auth/router-guards.md)
154-
155-
### Local Emulator Suite
156-
157-
- [Getting started with Firebase Emulator Suite](docs/emulators/emulators.md)
158-
159-
### Upload files
160-
161-
- [Getting started with Cloud Storage](docs/storage/storage.md)
162-
163-
### Receive push notifications
164-
165-
- [Getting started with Firebase Messaging](docs/messaging/messaging.md)
122+
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).
166123

167-
### **BETA:** Change behavior and appearance of your application without deploying
124+
[See the v7 upgrade guide for more information on this change.](docs/version-7-upgrade.md).
168125

169-
> 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).
126+
### Firebase product integrations
170127

171-
- [Getting started with Remote Config](docs/remote-config/getting-started.md)
128+
<table>
129+
<tr>
130+
<td>
172131

173-
### Monitor your application performance in production
174-
175-
> 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).
132+
#### [Analytics](docs/analytics.md#analytics)
133+
```ts
134+
import { } from '@angular/fire/analytics';
135+
```
136+
</td>
137+
<td>
176138

177-
- [Getting started with Performance Monitoring](docs/performance/getting-started.md)
139+
#### [Authentication](docs/auth.md#authentication)
140+
```ts
141+
import { } from '@angular/fire/auth';
142+
```
143+
</td>
144+
</tr>
145+
<tr>
146+
<td>
178147

179-
### Directly call Cloud Functions
148+
#### [Cloud Firestore](docs/firestore.md#cloud-firestore)
149+
```ts
150+
import { } from '@angular/fire/firestore';
151+
```
152+
</td>
153+
<td>
180154

181-
- [Getting started with Callable Functions](docs/functions/functions.md)
155+
#### [Cloud Functions](docs/functions.md#cloud-functions)
156+
```ts
157+
import { } from '@angular/fire/functions';
158+
```
159+
</td>
160+
</tr>
161+
<tr>
162+
<td>
182163

183-
### Deploying your application
164+
#### [Cloud Messaging](docs/messaging.md#cloud-messaging)
165+
```ts
166+
import { } from '@angular/fire/messaging';
167+
```
168+
</td>
169+
<td>
184170

185-
> 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.
171+
#### [Cloud Storage](docs/storage.md#cloud-storage)
172+
```ts
173+
import { } from '@angular/fire/storage';
174+
```
175+
</td>
176+
</tr>
177+
<tr>
178+
<td>
186179

187-
- [Deploy your application on Firebase Hosting](docs/deploy/getting-started.md)
180+
#### [Performance Monitoring](docs/performance.md#performance-monitoring)
181+
```ts
182+
import { } from '@angular/fire/performance';
183+
```
184+
</td>
185+
<td>
188186

189-
#### Server-side rendering
187+
#### [Realtime Database](docs/database.md#realtime-database)
188+
```ts
189+
import { } from '@angular/fire/database';
190+
```
191+
</td>
192+
</tr>
193+
<tr>
194+
<td>
190195

191-
> 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).
196+
#### [Remote Config](docs/remote-config.md#remote-config)
197+
```ts
198+
import { } from '@angular/fire/remote-config';
199+
```
200+
</td>
201+
<td>
192202

193-
- [Getting started with Angular Universal](docs/universal/getting-started.md)
194-
- [Deploying your Universal application on Cloud Functions for Firebase](docs/universal/cloud-functions.md)
195-
- [Prerendering your Universal application](docs/universal/prerendering.md)
203+
#### [App Check](docs/app-check.md#app-check)
204+
```ts
205+
import { } from '@angular/fire/app-check';
206+
```
207+
</td>
208+
</tr>
209+
</table>
196210

197-
### Ionic
211+
### Deploying your site
198212

199-
- [Installation and Setup with Ionic CLI](docs/ionic/cli.md)
200-
- [Using AngularFire with Ionic 2](docs/ionic/v2.md)
201-
- [Using AngularFire with Ionic 3](docs/ionic/v3.md)
213+
* Deploy to Firebase Hosting
214+
* Angular Universal: Deploy to Cloud Functions
215+
* Angular Universal: Deploy to Cloud Run

‎docs/analytics.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<img align="right" width="30%" src="images/analytics-illo_1x.png">
2+
3+
<small>
4+
<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Analytics
5+
</small>
6+
7+
# Analytics
8+
9+
Google Analytics is an app measurement solution, available at no charge, that provides insight on app usage and user engagement.
10+
11+
[Learn more](https://firebase.google.com/docs/analytics)
12+
## Dependency Injection
13+
14+
As a prerequisite, ensure that `AngularFire` has been added to your project via
15+
```bash
16+
ng add @angular/fire
17+
```
18+
19+
Provide a Google Analytics instance in the application's `NgModule` (`app.module.ts`):
20+
21+
```ts
22+
@NgModule({
23+
declarations: [
24+
...
25+
],
26+
imports: [
27+
...
28+
// App initialization
29+
provideFirebaseApp(() => initializeApp(environment.firebase)),
30+
provideAnalytics(() => getAnalytics())
31+
],
32+
providers: [],
33+
bootstrap: [AppComponent]
34+
})
35+
export class AppModule { }
36+
```
37+
38+
In your component class, for example `user-profile.component.ts` import and inject `Firestore`:
39+
40+
```typescript
41+
import { Component, inject } from '@angular/core';
42+
import { Analytics } from '@angular/fire/analytics';
43+
44+
@Component({
45+
standalone: true,
46+
selector: 'app-user-profile',
47+
...
48+
})
49+
export class UserProfileComponent {
50+
private analytics: Analytics = inject(Analytics);
51+
...
52+
}
53+
```
54+
55+
## Firebase API
56+
57+
The [Firebase API for Google Analytics documentation](https://firebase.google.com/docs/reference/js/analytics.md#analytics_package) is available on the Firebase website.
58+
59+
## Services
60+
61+
### ScreenTrackingService
62+
63+
Coming soon, for now [please review the documentation](https://firebase.google.com/docs/analytics/screenviews)
64+
65+
### UserTrackingService
66+
Coming soon
67+

‎docs/app-check.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<small>
2+
<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime App Check
3+
</small>
4+
5+
<img align="right" width="30%" src="images/[email protected]">
6+
7+
# App Check
8+
9+
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.
10+
11+
[Learn More](https://firebase.google.com/docs/app-check)
12+
13+
## Dependency Injection
14+
As a prerequisite, ensure that `AngularFire` has been added to your project via
15+
```bash
16+
ng add @angular/fire
17+
```
18+
19+
Provide an App Check instance and configuration in the application's `NgModule` (`app.module.ts`):
20+
21+
```ts
22+
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
23+
import { getAppCheck, provideAppCheck } from '@angular/fire/app-check';
24+
25+
@NgModule({
26+
imports: [
27+
provideFirebaseApp(() => initializeApp(environment.firebase)),
28+
provideAppCheck(() => initializeAppCheck(getApp(), {
29+
provider: new ReCaptchaV3Provider(/* configuration */),
30+
})),
31+
]
32+
})
33+
```
34+
35+
Next inject it into your component:
36+
37+
```ts
38+
import { Component, inject} from '@angular/core';
39+
import { AppCheck } from '@angular/fire/app-check';
40+
41+
@Component({ ... })
42+
export class AppCheckComponent {
43+
private appCheck: AppCheck = inject(AppCheck);
44+
...
45+
}
46+
```
47+
48+
## Firebase API
49+
50+
The [AppCheck documentation](https://firebase.google.com/docs/reference/js/app-check) is available on the Firebase website.
51+
52+
## Convenience observables
53+
Coming soon.

0 commit comments

Comments
 (0)