Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 1ec218a

Browse files
jamesdanielsMarkTechsondavideast
authoredMar 18, 2023
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 <2554588+MarkTechson@users.noreply.github.com> Co-authored-by: David East <davideast@users.noreply.github.com>
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+

0 commit comments

Comments
 (0)
Please sign in to comment.