Skip to content

Commit 0d6b604

Browse files
thetaPCthetaPC
committed
docs(angular): update imports
1 parent a45f26e commit 0d6b604

File tree

10 files changed

+135
-85
lines changed

10 files changed

+135
-85
lines changed

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,8 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi
2525

2626
```ts
2727
import { Injectable } from '@angular/core';
28-
// CHANGE: Add the following imports
29-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
30-
import { Filesystem, Directory } from '@capacitor/filesystem';
31-
import { Preferences } from '@capacitor/preferences';
28+
// CHANGE: Add the following import
29+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
3230

3331
@Injectable({
3432
providedIn: 'root',
@@ -40,9 +38,7 @@ Next, define a new class method, `addNewToGallery()`, that will contain the core
4038

4139
```ts
4240
import { Injectable } from '@angular/core';
43-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
44-
import { Filesystem, Directory } from '@capacitor/filesystem';
45-
import { Preferences } from '@capacitor/preferences';
41+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
4642

4743
@Injectable({
4844
providedIn: 'root',
@@ -172,9 +168,7 @@ public async addNewToGallery() {
172168

173169
```ts
174170
import { Injectable } from '@angular/core';
175-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
176-
import { Filesystem, Directory } from '@capacitor/filesystem';
177-
import { Preferences } from '@capacitor/preferences';
171+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
178172

179173
@Injectable({
180174
providedIn: 'root',

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,9 @@ We’re now able to take multiple photos and display them in a photo gallery on
1818
Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `PhotoService` class. We pass in the `photo` object, which represents the newly captured device photo:
1919

2020
```ts
21-
import { Injectable } from '@angular/core';
22-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
23-
import { Filesystem, Directory } from '@capacitor/filesystem';
24-
import { Preferences } from '@capacitor/preferences';
21+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
22+
// CHANGE: Add import
23+
import type { Photo } from '@capacitor/camera';
2524

2625
@Injectable({
2726
providedIn: 'root',
@@ -97,9 +96,10 @@ For now, create a new helper method, `convertBlobToBase64()`, to implement the n
9796

9897
```ts
9998
import { Injectable } from '@angular/core';
100-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
99+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
100+
import type { Photo } from '@capacitor/camera';
101+
// CHANGE: Add import
101102
import { Filesystem, Directory } from '@capacitor/filesystem';
102-
import { Preferences } from '@capacitor/preferences';
103103

104104
@Injectable({
105105
providedIn: 'root',
@@ -153,9 +153,9 @@ export interface UserPhoto {
153153

154154
```ts
155155
import { Injectable } from '@angular/core';
156-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
156+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
157+
import type { Photo } from '@capacitor/camera';
157158
import { Filesystem, Directory } from '@capacitor/filesystem';
158-
import { Preferences } from '@capacitor/preferences';
159159

160160
@Injectable({
161161
providedIn: 'root',

‎docs/angular/your-first-app/4-loading-photos.md‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,44 @@ export class PhotoService {
3333
Next, at the end of the `addNewToGallery()` method, add a call to `Preferences.set()` to save the `photos` array. By adding it here, the `photos` array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
3434

3535
```ts
36-
public async addNewToGallery() {
37-
// Take a photo
38-
const capturedPhoto = await Camera.getPhoto({
39-
resultType: CameraResultType.Uri,
40-
source: CameraSource.Camera,
41-
quality: 100,
42-
});
43-
44-
const savedImageFile = await this.savePicture(capturedPhoto);
45-
46-
this.photos.unshift(savedImageFile);
47-
48-
// CHANGE: Add method to cache all photo data for future retrieval
49-
Preferences.set({
50-
key: this.PHOTO_STORAGE,
51-
value: JSON.stringify(this.photos),
52-
});
36+
import { Injectable } from '@angular/core';
37+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
38+
import type { Photo } from '@capacitor/camera';
39+
// CHANGE: Add import
40+
import { Filesystem, Directory } from '@capacitor/filesystem';
41+
42+
@Injectable({
43+
providedIn: 'root',
44+
})
45+
export class PhotoService {
46+
// ...existing code...
47+
48+
// CHANGE: Update `addNewToGallery()` method
49+
public async addNewToGallery() {
50+
// Take a photo
51+
const capturedPhoto = await Camera.getPhoto({
52+
resultType: CameraResultType.Uri,
53+
source: CameraSource.Camera,
54+
quality: 100,
55+
});
56+
57+
const savedImageFile = await this.savePicture(capturedPhoto);
58+
59+
this.photos.unshift(savedImageFile);
60+
61+
// CHANGE: Add method to cache all photo data for future retrieval
62+
Preferences.set({
63+
key: this.PHOTO_STORAGE,
64+
value: JSON.stringify(this.photos),
65+
});
66+
}
67+
68+
// ...existing code...
69+
}
70+
71+
export interface UserPhoto {
72+
filepath: string;
73+
webviewPath?: string;
5374
}
5475
```
5576

@@ -99,7 +120,8 @@ export class PhotoService {
99120

100121
```ts
101122
import { Injectable } from '@angular/core';
102-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
123+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
124+
import type { Photo } from '@capacitor/camera';
103125
import { Filesystem, Directory } from '@capacitor/filesystem';
104126
import { Preferences } from '@capacitor/preferences';
105127

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ Add `Platform` to the imports at the top of the file and a new property `platfor
2323

2424
```ts
2525
import { Injectable } from '@angular/core';
26-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
26+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
27+
import type { Photo } from '@capacitor/camera';
2728
import { Filesystem, Directory } from '@capacitor/filesystem';
2829
import { Preferences } from '@capacitor/preferences';
2930
// CHANGE: Add import
@@ -95,7 +96,15 @@ private async savePicture(photo: Photo) {
9596
When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`.
9697

9798
```ts
99+
import { Injectable } from '@angular/core';
100+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
101+
import type { Photo } from '@capacitor/camera';
102+
import { Filesystem, Directory } from '@capacitor/filesystem';
103+
import { Preferences } from '@capacitor/preferences';
104+
// Change: Add import
98105
import { Capacitor } from '@capacitor/core';
106+
107+
// ...existing code...
99108
```
100109

101110
Then update `savePicture()` to look like the following:
@@ -173,10 +182,10 @@ Our Photo Gallery now consists of one codebase that runs on the web, Android, an
173182

174183
```ts
175184
import { Injectable } from '@angular/core';
176-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
185+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
186+
import type { Photo } from '@capacitor/camera';
177187
import { Filesystem, Directory } from '@capacitor/filesystem';
178188
import { Preferences } from '@capacitor/preferences';
179-
import { Platform } from '@ionic/angular';
180189
import { Capacitor } from '@capacitor/core';
181190

182191
@Injectable({

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@ In `photo.service.ts`, add the `deletePhoto()` method. The selected photo is rem
3939

4040
```ts
4141
import { Injectable } from '@angular/core';
42-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
42+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
43+
import type { Photo } from '@capacitor/camera';
4344
import { Filesystem, Directory } from '@capacitor/filesystem';
4445
import { Preferences } from '@capacitor/preferences';
45-
import { Platform } from '@ionic/angular';
4646
import { Capacitor } from '@capacitor/core';
4747

4848
@Injectable({

‎versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,8 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi
2525

2626
```ts
2727
import { Injectable } from '@angular/core';
28-
// CHANGE: Add the following imports
29-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
30-
import { Filesystem, Directory } from '@capacitor/filesystem';
31-
import { Preferences } from '@capacitor/preferences';
28+
// CHANGE: Add the following import
29+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
3230

3331
@Injectable({
3432
providedIn: 'root',
@@ -40,9 +38,7 @@ Next, define a new class method, `addNewToGallery()`, that will contain the core
4038

4139
```ts
4240
import { Injectable } from '@angular/core';
43-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
44-
import { Filesystem, Directory } from '@capacitor/filesystem';
45-
import { Preferences } from '@capacitor/preferences';
41+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
4642

4743
@Injectable({
4844
providedIn: 'root',
@@ -172,9 +168,7 @@ public async addNewToGallery() {
172168

173169
```ts
174170
import { Injectable } from '@angular/core';
175-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
176-
import { Filesystem, Directory } from '@capacitor/filesystem';
177-
import { Preferences } from '@capacitor/preferences';
171+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
178172

179173
@Injectable({
180174
providedIn: 'root',

‎versioned_docs/version-v7/angular/your-first-app/3-saving-photos.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,9 @@ We’re now able to take multiple photos and display them in a photo gallery on
1818
Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `PhotoService` class. We pass in the `photo` object, which represents the newly captured device photo:
1919

2020
```ts
21-
import { Injectable } from '@angular/core';
22-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
23-
import { Filesystem, Directory } from '@capacitor/filesystem';
24-
import { Preferences } from '@capacitor/preferences';
21+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
22+
// CHANGE: Add import
23+
import type { Photo } from '@capacitor/camera';
2524

2625
@Injectable({
2726
providedIn: 'root',
@@ -97,9 +96,10 @@ For now, create a new helper method, `convertBlobToBase64()`, to implement the n
9796

9897
```ts
9998
import { Injectable } from '@angular/core';
100-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
99+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
100+
import type { Photo } from '@capacitor/camera';
101+
// CHANGE: Add import
101102
import { Filesystem, Directory } from '@capacitor/filesystem';
102-
import { Preferences } from '@capacitor/preferences';
103103

104104
@Injectable({
105105
providedIn: 'root',
@@ -153,9 +153,9 @@ export interface UserPhoto {
153153

154154
```ts
155155
import { Injectable } from '@angular/core';
156-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
156+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
157+
import type { Photo } from '@capacitor/camera';
157158
import { Filesystem, Directory } from '@capacitor/filesystem';
158-
import { Preferences } from '@capacitor/preferences';
159159

160160
@Injectable({
161161
providedIn: 'root',

‎versioned_docs/version-v7/angular/your-first-app/4-loading-photos.md‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,44 @@ export class PhotoService {
3333
Next, at the end of the `addNewToGallery()` method, add a call to `Preferences.set()` to save the `photos` array. By adding it here, the `photos` array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
3434

3535
```ts
36-
public async addNewToGallery() {
37-
// Take a photo
38-
const capturedPhoto = await Camera.getPhoto({
39-
resultType: CameraResultType.Uri,
40-
source: CameraSource.Camera,
41-
quality: 100,
42-
});
43-
44-
const savedImageFile = await this.savePicture(capturedPhoto);
45-
46-
this.photos.unshift(savedImageFile);
47-
48-
// CHANGE: Add method to cache all photo data for future retrieval
49-
Preferences.set({
50-
key: this.PHOTO_STORAGE,
51-
value: JSON.stringify(this.photos),
52-
});
36+
import { Injectable } from '@angular/core';
37+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
38+
import type { Photo } from '@capacitor/camera';
39+
// CHANGE: Add import
40+
import { Filesystem, Directory } from '@capacitor/filesystem';
41+
42+
@Injectable({
43+
providedIn: 'root',
44+
})
45+
export class PhotoService {
46+
// ...existing code...
47+
48+
// CHANGE: Update `addNewToGallery()` method
49+
public async addNewToGallery() {
50+
// Take a photo
51+
const capturedPhoto = await Camera.getPhoto({
52+
resultType: CameraResultType.Uri,
53+
source: CameraSource.Camera,
54+
quality: 100,
55+
});
56+
57+
const savedImageFile = await this.savePicture(capturedPhoto);
58+
59+
this.photos.unshift(savedImageFile);
60+
61+
// CHANGE: Add method to cache all photo data for future retrieval
62+
Preferences.set({
63+
key: this.PHOTO_STORAGE,
64+
value: JSON.stringify(this.photos),
65+
});
66+
}
67+
68+
// ...existing code...
69+
}
70+
71+
export interface UserPhoto {
72+
filepath: string;
73+
webviewPath?: string;
5374
}
5475
```
5576

@@ -99,7 +120,8 @@ export class PhotoService {
99120

100121
```ts
101122
import { Injectable } from '@angular/core';
102-
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
123+
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
124+
import type { Photo } from '@capacitor/camera';
103125
import { Filesystem, Directory } from '@capacitor/filesystem';
104126
import { Preferences } from '@capacitor/preferences';
105127

0 commit comments

Comments
 (0)