docs(angular): update the your first app pages

Author: thetaPC

docs/angular/your-first-app.md

@@ -34,9 +34,9 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
 
 Highlights include:
 
-- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
+- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
 - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
+- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
 
 Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng).
 
@@ -114,7 +114,7 @@ import { AppModule } from './app/app.module';
 // CHANGE: Add the following import.
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
-// Call the element loader before the `bootstrapModule` call.
+// CHANGE: Call the element loader before the `bootstrapModule` call.
 defineCustomElements(window);
 
 platformBrowserDynamic()

docs/angular/your-first-app/2-taking-photos.md

@@ -11,7 +11,7 @@ sidebar_label: Taking Photos
   />
 </head>
 
-Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
 
 ## Photo Service
 
@@ -147,9 +147,10 @@ export class PhotoService {
 }
 ```
 
-Over in the `addNewToGallery` method, add the newly captured photo to the beginning of the Photos array.
+Over in the `addNewToGallery` method, add the newly captured photo to the beginning of the `photos` array.
 
 ```ts
+// CHANGE: Update `addNewToGallery()` method.
 public async addNewToGallery() {
   const capturedPhoto = await Camera.getPhoto({
     resultType: CameraResultType.Uri,
@@ -169,7 +170,6 @@ public async addNewToGallery() {
 
 ```ts
 import { Injectable } from '@angular/core';
-// CHANGE: Add the following imports.
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Preferences } from '@capacitor/preferences';
@@ -178,10 +178,8 @@ import { Preferences } from '@capacitor/preferences';
   providedIn: 'root',
 })
 export class PhotoService {
-  // CHANGE: Add the photos array.
   public photos: UserPhoto[] = [];
 
-  // CHANGE: Add the gallery function.
   public async addNewToGallery() {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
@@ -190,15 +188,13 @@ export class PhotoService {
       quality: 100,
     });
 
-    // CHANGE: Add the new photo to the photos array.
     this.photos.unshift({
       filepath: 'soon...',
       webviewPath: capturedPhoto.webPath!,
     });
   }
 }
 
-// CHANGE: Add the interface.
 export interface UserPhoto {
   filepath: string;
   webviewPath?: string;

docs/angular/your-first-app/3-saving-photos.md

@@ -52,6 +52,7 @@ import { Preferences } from '@capacitor/preferences';
 export class PhotoService {
   public photos: UserPhoto[] = [];
 
+  // CHANGE: Update `addNewToGallery()` method.
   public async addNewToGallery() {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({

docs/angular/your-first-app/5-adding-mobile.md

@@ -42,7 +42,7 @@ export class PhotoService {
 
 ## Platform-specific Logic
 
-First, we’ll update the photo saving functionality to support mobile. In the `readAsBase64()` function, check which platform the app is running on. If it’s “hybrid” (Capacitor or Cordova, two native runtimes), then read the photo file into base64 format using the `Filesystem`'s' `readFile()` method. Otherwise, use the same logic as before when running the app on the web.
+First, we’ll update the photo saving functionality to support mobile. In the `readAsBase64()` method, check which platform the app is running on. If it’s “hybrid” (Capacitor or Cordova, two native runtimes), then read the photo file into base64 format using the `Filesystem`'s' `readFile()` method. Otherwise, use the logic as before when running the app on the web.
 
 Update `readAsBase64()` to look like the following:
 
@@ -106,7 +106,7 @@ private async savePicture(photo: Photo) {
 }
 ```
 
-Next, head back over to the `loadSaved()` method we implemented for the web earlier. On mobile, we can directly set the source of an image tag - `<img src="x" />` - to each photo file on the `Filesystem`, displaying them automatically. Thus, only the web requires reading each image from the `Filesystem` into base64 format. Update this method to add an _if statement_ around the `Filesystem` code:
+Next, add a new bit of logic in the `loadSaved()` method. On mobile, we can directly point to each photo file on the Filesystem and display them automatically. On the web, however, we must read each image from the Filesystem into base64 format. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Update the `loadSaved()` method:
 
 ```ts
 // CHANGE: Update `loadSaved` method.