Skip to content

Commit 688a36b

Browse files
brandyscarneybrandyscarney
committed
Merge branch 'main' into docs/cdn-updates
2 parents 8784e36 + 9673530 commit 688a36b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+6649
-1957
lines changed

‎docs/angular/your-first-app.md‎

Lines changed: 84 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ sidebar_label: Build Your First App
44
---
55

66
<head>
7-
<title>Build Your First Ionic Mobile App: Angular Development Tutorial</title>
7+
<title>Build Your First Ionic Mobile App with Angular | Ionic Capacitor Camera</title>
88
<meta
99
name="description"
10-
content="Ionic's single codebase builds for any platform using just HTML, CSS, & JavaScript. Develop your first mobile app with our step-by-step Angular tutorial."
10+
content="This Angular tutorial teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. Learn to run your first Ionic app with Angular."
1111
/>
1212
</head>
1313

@@ -34,11 +34,11 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
3434

3535
Highlights include:
3636

37-
- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
37+
- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
3838
- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
39-
- 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.
39+
- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
4040

41-
Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng).
41+
Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-angular) referenced in this guide on GitHub.
4242

4343
## Download Required Tools
4444

@@ -47,9 +47,8 @@ Download and install these right away to ensure an optimal Ionic development exp
4747
- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
4848
- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
4949
- **Command-line interface/terminal (CLI)**:
50-
- **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
51-
CLI, running in Administrator mode.
52-
- **Mac/Linux** users, virtually any terminal will work.
50+
- **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.
51+
- **Mac/Linux** users: virtually any terminal will work.
5352

5453
## Install Ionic Tooling
5554

@@ -71,10 +70,10 @@ Consider setting up npm to operate globally without elevated permissions. See [R
7170

7271
## Create an App
7372

74-
Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality:
73+
Next, create an Ionic Angular app that uses the "Tabs" starter template and adds Capacitor for native functionality:
7574

7675
```shell
77-
ionic start photo-gallery tabs --type=angular --capacitor
76+
ionic start photo-gallery tabs --type=angular
7877
```
7978

8079
:::note
@@ -99,7 +98,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
9998

10099
### PWA Elements
101100

102-
Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/ionic-pwa-elements).
101+
Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
103102

104103
It's a separate dependency, so install it next:
105104

@@ -109,11 +108,18 @@ npm install @ionic/pwa-elements
109108

110109
Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
111110

112-
```tsx
111+
```ts
112+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
113+
import { AppModule } from './app/app.module';
114+
// CHANGE: Add the following import
113115
import { defineCustomElements } from '@ionic/pwa-elements/loader';
114116

115-
// Call the element loader before the bootstrapModule/bootstrapApplication call
117+
// CHANGE: Call the element loader before the `bootstrapModule` call
116118
defineCustomElements(window);
119+
120+
platformBrowserDynamic()
121+
.bootstrapModule(AppModule)
122+
.catch((err) => console.log(err));
117123
```
118124

119125
That’s it! Now for the fun part - let’s see the app in action.
@@ -128,55 +134,105 @@ ionic serve
128134

129135
And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
130136

131-
## Photo Gallery!!!
137+
## Photo Gallery
132138

133-
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
139+
There are three tabs. Click on the "Tab2" tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
134140

135141
![Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.](/img/guides/first-app-cap-ng/email-photogallery.gif 'Live Reload Feature in Ionic App')
136142

137-
Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
143+
Open `/src/app/tab2/tab2.page.html`. We see:
138144

139145
```html
140-
<ion-header>
146+
<ion-header [translucent]="true">
141147
<ion-toolbar>
142-
<ion-title>Tab 2</ion-title>
148+
<ion-title> Tab 2 </ion-title>
143149
</ion-toolbar>
144150
</ion-header>
145151

146-
<ion-content>
152+
<ion-content [fullscreen]="true">
147153
<ion-header collapse="condense">
148154
<ion-toolbar>
149155
<ion-title size="large">Tab 2</ion-title>
150156
</ion-toolbar>
151157
</ion-header>
158+
159+
<app-explore-container name="Tab 2 page"></app-explore-container>
152160
</ion-content>
153161
```
154162

155-
`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both `ion-title` elements to:
163+
`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to:
156164

157165
```html
158-
<ion-title>Photo Gallery</ion-title>
166+
<ion-header [translucent]="true">
167+
<ion-toolbar>
168+
<!-- CHANGE: Update title -->
169+
<ion-title> Photo Gallery </ion-title>
170+
</ion-toolbar>
171+
</ion-header>
172+
173+
<ion-content [fullscreen]="true">
174+
<ion-header collapse="condense">
175+
<ion-toolbar>
176+
<!-- CHANGE: Update title -->
177+
<ion-title size="large">Photo Gallery</ion-title>
178+
</ion-toolbar>
179+
</ion-header>
180+
181+
<app-explore-container name="Tab 2 page"></app-explore-container>
182+
</ion-content>
159183
```
160184

161-
We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon.
185+
We put the visual aspects of our app into `<ion-content>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
162186

163187
```html
188+
<ion-header [translucent]="true">
189+
<ion-toolbar>
190+
<ion-title>Photo Gallery</ion-title>
191+
</ion-toolbar>
192+
</ion-header>
193+
164194
<ion-content>
195+
<ion-header collapse="condense">
196+
<ion-toolbar>
197+
<ion-title size="large">Photo Gallery</ion-title>
198+
</ion-toolbar>
199+
</ion-header>
200+
201+
<!-- CHANGE: Add the floating action button -->
165202
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
166203
<ion-fab-button>
167204
<ion-icon name="camera"></ion-icon>
168205
</ion-fab-button>
169206
</ion-fab>
207+
208+
<!-- CHANGE: Remove or comment out `app-explore-container` -->
209+
<!-- <app-explore-container name="Tab 2 page"></app-explore-container> -->
170210
</ion-content>
171211
```
172212

173-
Next, open `src/app/tabs/tabs.page.html`. Change the label to “Photos” and the icon name to “images”:
213+
Next, open `src/app/tabs/tabs.page.html`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
174214

175215
```html
176-
<ion-tab-button tab="tab2">
177-
<ion-icon name="images"></ion-icon>
178-
<ion-label>Photos</ion-label>
179-
</ion-tab-button>
216+
<ion-tabs>
217+
<ion-tab-bar slot="bottom">
218+
<ion-tab-button tab="tab1" href="/tabs/tab1">
219+
<ion-icon aria-hidden="true" name="triangle"></ion-icon>
220+
<ion-label>Tab 1</ion-label>
221+
</ion-tab-button>
222+
223+
<ion-tab-button tab="tab2" href="/tabs/tab2">
224+
<!-- CHANGE: Update icon -->
225+
<ion-icon aria-hidden="true" name="images"></ion-icon>
226+
<!-- CHANGE: Update label -->
227+
<ion-label>Photos</ion-label>
228+
</ion-tab-button>
229+
230+
<ion-tab-button tab="tab3" href="/tabs/tab3">
231+
<ion-icon aria-hidden="true" name="square"></ion-icon>
232+
<ion-label>Tab 3</ion-label>
233+
</ion-tab-button>
234+
</ion-tab-bar>
235+
</ion-tabs>
180236
```
181237

182-
Save all changes to see them automatically applied in the browser. That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.
238+
That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.

0 commit comments

Comments
 (0)