Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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>
- Loading branch information
3 people
committed
Mar 18, 2023
1 parent
57d9005
commit 1ec218a
Showing
45 changed files
with
1,185 additions
and
1,735 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> ❱ <a href="../README.md#developer-guide">Developer Guide</a> ❱ 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 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <small> | ||
| <a href="https://github.com/angular/angularfire">AngularFire</a> ❱ <a href="../README.md#developer-guide">Developer Guide</a> ❱ Realtime App Check | ||
| </small> | ||
|
|
||
| <img align="right" width="30%" src="images/reCAPTCHA-logo@1x.png"> | ||
|
|
||
| # 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. |
Oops, something went wrong.