Skip to content

Commit 7714f0e

Browse files
thetaPCthetaPC
committed
docs(angular): update live reload page
1 parent 77848e5 commit 7714f0e

File tree

1 file changed

+71
-123
lines changed

1 file changed

+71
-123
lines changed

‎docs/angular/your-first-app/7-live-reload.md‎

Lines changed: 71 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ sidebar_label: Live Reload
1212

1313
So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
1414

15-
We can use the Ionic CLI’s [Live Reload functionality](https://ionicframework.com/docs/cli/livereload) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
15+
We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
1616

1717
## Live Reload
1818

@@ -23,76 +23,66 @@ We can also use it when developing on iOS and Android devices. This is particula
2323
Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform:
2424

2525
```shell
26-
$ ionic cap run ios -l --external
26+
ionic cap run ios -l --external
2727

28-
$ ionic cap run android -l --external
28+
ionic cap run android -l --external
2929
```
3030

3131
The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device.
3232

3333
## Deleting Photos
3434

35-
With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
35+
With Live Reload running and the app open on your device, let’s implement photo deletion functionality.
3636

37-
```html
38-
<ion-header [translucent]="true">
39-
<ion-toolbar>
40-
<ion-title> Photo Gallery </ion-title>
41-
</ion-toolbar>
42-
</ion-header>
37+
In `photo.service.ts`, add the `deletePicture()` method. The selected photo is removed from the `photos` array first. Then, we use the Capacitor Preferences API to update the cached version of the `photos` array. Finally, we delete the actual photo file itself using the Filesystem API.
4338

44-
<ion-content [fullscreen]="true">
45-
<ion-header collapse="condense">
46-
<ion-toolbar>
47-
<ion-title size="large">Photo Gallery</ion-title>
48-
</ion-toolbar>
49-
</ion-header>
39+
```ts
40+
import { Injectable } from '@angular/core';
41+
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
42+
import { Filesystem, Directory } from '@capacitor/filesystem';
43+
import { Preferences } from '@capacitor/preferences';
44+
import { Platform } from '@ionic/angular';
45+
import { Capacitor } from '@capacitor/core';
5046

51-
<ion-grid>
52-
<ion-row>
53-
<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
54-
<!-- CHANGE: Add a click event listener to each image. -->
55-
<ion-img [src]="photo.webviewPath" (click)="showActionSheet(photo, position)"></ion-img>
56-
</ion-col>
57-
</ion-row>
58-
</ion-grid>
47+
@Injectable({
48+
providedIn: 'root',
49+
})
50+
export class PhotoService {
51+
// Same old code from before.
5952

60-
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
61-
<ion-fab-button (click)="addPhotoToGallery()">
62-
<ion-icon name="camera"></ion-icon>
63-
</ion-fab-button>
64-
</ion-fab>
65-
</ion-content>
66-
```
53+
// CHANGE: Add `deletePicture()` method.
54+
public async deletePicture(photo: UserPhoto, position: number) {
55+
// Remove this photo from the Photos reference data array
56+
this.photos.splice(position, 1);
6757

68-
Over in `tab2.page.ts`, import `ActionSheetController` and add it to the constructor:
58+
// Update photos array cache by overwriting the existing photo array
59+
Preferences.set({
60+
key: this.PHOTO_STORAGE,
61+
value: JSON.stringify(this.photos),
62+
});
6963

70-
```tsx
71-
import { Component } from '@angular/core';
72-
import { PhotoService } from '../services/photo.service';
73-
// CHANGE: Add import.
74-
import { ActionSheetController } from '@ionic/angular';
64+
// Delete photo file from filesystem
65+
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
7566

76-
@Component({
77-
selector: 'app-tab2',
78-
templateUrl: 'tab2.page.html',
79-
styleUrls: ['tab2.page.scss'],
80-
standalone: false,
81-
})
82-
export class Tab2Page {
83-
// CHANGE: Update constructor to include `actionSheetController`.
84-
constructor(public photoService: PhotoService, public actionSheetController: ActionSheetController) {}
67+
await Filesystem.deleteFile({
68+
path: filename,
69+
directory: Directory.Data,
70+
});
71+
}
72+
}
8573

86-
// other code
74+
export interface UserPhoto {
75+
filepath: string;
76+
webviewPath?: string;
8777
}
8878
```
8979

90-
Add `UserPhoto` to the import statement.
80+
Next, in `tab2.page.ts`, implement the `showActionSheet()` method. We're adding two options: "Delete", which calls `PhotoService.deletePicture()`, and "Cancel". The cancel button will automatically closes the action sheet when assigned the "cancel" role.
9181

92-
```tsx
82+
```ts
9383
import { Component } from '@angular/core';
94-
// CHANGE: Update import.
95-
import { PhotoService, UserPhoto } from '../services/photo.service';
84+
import { PhotoService } from '../services/photo.service';
85+
// CHANGE: Add import.
9686
import { ActionSheetController } from '@ionic/angular';
9787

9888
@Component({
@@ -102,29 +92,12 @@ import { ActionSheetController } from '@ionic/angular';
10292
standalone: false,
10393
})
10494
export class Tab2Page {
95+
// CHANGE: Update constructor.
10596
constructor(public photoService: PhotoService, public actionSheetController: ActionSheetController) {}
10697

107-
// other code
108-
}
109-
```
110-
111-
Next, implement the `showActionSheet()` function. We add two options: `Delete` that calls PhotoService’s `deletePicture()` function (to be added next) and `Cancel`, which when given the role of “cancel” will automatically close the action sheet:
112-
113-
```tsx
114-
import { Component } from '@angular/core';
115-
import { PhotoService, UserPhoto } from '../services/photo.service';
116-
import { ActionSheetController } from '@ionic/angular';
117-
118-
@Component({
119-
selector: 'app-tab2',
120-
templateUrl: 'tab2.page.html',
121-
styleUrls: ['tab2.page.scss'],
122-
standalone: false,
123-
})
124-
export class Tab2Page {
12598
// Same old code from before.
12699

127-
// CHANGE: Add `showActionSheet` function.
100+
// CHANGE: Add `showActionSheet` method.
128101
public async showActionSheet(photo: UserPhoto, position: number) {
129102
const actionSheet = await this.actionSheetController.create({
130103
header: 'Photos',
@@ -152,64 +125,39 @@ export class Tab2Page {
152125
}
153126
```
154127

155-
Save both of the files we just edited. The Photo Gallery app will reload automatically, and now when we tap on one of the photos in the gallery, the action sheet displays. Tapping “Delete” doesn’t do anything yet, so head back into your code editor.
156-
157-
In `src/app/services/photo.service.ts`, add the `deletePicture()` function:
158-
159-
```tsx
160-
import { Injectable } from '@angular/core';
161-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
162-
import { Filesystem, Directory } from '@capacitor/filesystem';
163-
import { Preferences } from '@capacitor/preferences';
164-
import { Platform } from '@ionic/angular';
165-
import { Capacitor } from '@capacitor/core';
166-
167-
@Injectable({
168-
providedIn: 'root',
169-
})
170-
export class PhotoService {
171-
// Same old code from before.
172-
173-
// Save picture to file on device
174-
private async savePicture(photo: Photo) {
175-
// Same old code from before.
176-
}
177-
178-
// CHANGE: Add the `deletePicture` function.
179-
public async deletePicture(photo: UserPhoto, position: number) {
180-
// Remove this photo from the Photos reference data array
181-
this.photos.splice(position, 1);
128+
Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog.
182129

183-
// Update photos array cache by overwriting the existing photo array
184-
Preferences.set({
185-
key: this.PHOTO_STORAGE,
186-
value: JSON.stringify(this.photos),
187-
});
188-
189-
// Delete photo file from filesystem
190-
const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
191-
192-
await Filesystem.deleteFile({
193-
path: filename,
194-
directory: Directory.Data,
195-
});
196-
}
130+
```html
131+
<ion-header [translucent]="true">
132+
<ion-toolbar>
133+
<ion-title> Photo Gallery </ion-title>
134+
</ion-toolbar>
135+
</ion-header>
197136

198-
private async readAsBase64(photo: Photo) {
199-
// Same old code from before.
200-
}
137+
<ion-content [fullscreen]="true">
138+
<ion-header collapse="condense">
139+
<ion-toolbar>
140+
<ion-title size="large">Photo Gallery</ion-title>
141+
</ion-toolbar>
142+
</ion-header>
201143

202-
// Same old code from before.
203-
}
144+
<ion-grid>
145+
<ion-row>
146+
<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
147+
<!-- CHANGE: Add a click event listener to each image. -->
148+
<ion-img [src]="photo.webviewPath" (click)="showActionSheet(photo, position)"></ion-img>
149+
</ion-col>
150+
</ion-row>
151+
</ion-grid>
204152

205-
export interface UserPhoto {
206-
filepath: string;
207-
webviewPath?: string;
208-
}
153+
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
154+
<ion-fab-button (click)="addPhotoToGallery()">
155+
<ion-icon name="camera"></ion-icon>
156+
</ion-fab-button>
157+
</ion-fab>
158+
</ion-content>
209159
```
210160

211-
The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
212-
213-
Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪
161+
Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪
214162

215163
In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices.

0 commit comments

Comments
 (0)