Skip to content

Commit c3a34a9

Browse files
thetaPCthetaPC
committed
docs(angular): update your first app pages for v7
1 parent a4e4db6 commit c3a34a9

File tree

8 files changed

+950
-263
lines changed

8 files changed

+950
-263
lines changed

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

Lines changed: 75 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ 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

14+
# Your First Ionic App: Angular
15+
1416
The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
1517

1618
Here’s the finished app running on all 3 platforms:
@@ -19,9 +21,9 @@ Here’s the finished app running on all 3 platforms:
1921
width="560"
2022
height="315"
2123
src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
22-
frameborder="0"
24+
frameBorder="0"
2325
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
24-
allowfullscreen
26+
allowFullScreen
2527
></iframe>
2628
2729
:::note
@@ -34,11 +36,11 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
3436

3537
Highlights include:
3638

37-
- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
39+
- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
3840
- 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.
41+
- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
4042

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

4345
## Download Required Tools
4446

@@ -47,9 +49,8 @@ Download and install these right away to ensure an optimal Ionic development exp
4749
- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
4850
- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
4951
- **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.
52+
- **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.
53+
- **Mac/Linux** users: virtually any terminal will work.
5354

5455
## Install Ionic Tooling
5556

@@ -71,12 +72,18 @@ Consider setting up npm to operate globally without elevated permissions. See [R
7172

7273
## Create an App
7374

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

7677
```shell
7778
ionic start photo-gallery tabs --type=angular --capacitor
7879
```
7980

81+
:::note
82+
83+
When prompted to choose between `NgModules` and `Standalone`, opt for `NgModules` as this tutorial follows the `NgModules` approach.
84+
85+
:::
86+
8087
This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
8188

8289
Next, change into the app folder:
@@ -93,7 +100,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
93100

94101
### PWA Elements
95102

96-
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).
103+
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).
97104

98105
It's a separate dependency, so install it next:
99106

@@ -103,11 +110,18 @@ npm install @ionic/pwa-elements
103110

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

106-
```tsx
113+
```ts
114+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
115+
import { AppModule } from './app/app.module';
116+
// CHANGE: Add the following import.
107117
import { defineCustomElements } from '@ionic/pwa-elements/loader';
108118

109-
// Call the element loader before the bootstrapModule/bootstrapApplication call
119+
// CHANGE: Call the element loader before the `bootstrapModule` call.
110120
defineCustomElements(window);
121+
122+
platformBrowserDynamic()
123+
.bootstrapModule(AppModule)
124+
.catch((err) => console.log(err));
111125
```
112126

113127
That’s it! Now for the fun part - let’s see the app in action.
@@ -124,53 +138,87 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
124138

125139
## Photo Gallery!!!
126140

127-
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!
141+
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!
128142

129143
![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')
130144

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

133147
```html
134-
<ion-header>
148+
<ion-header [translucent]="true">
135149
<ion-toolbar>
136-
<ion-title>Tab 2</ion-title>
150+
<ion-title> Tab 2 </ion-title>
137151
</ion-toolbar>
138152
</ion-header>
139153

140-
<ion-content>
154+
<ion-content [fullscreen]="true">
141155
<ion-header collapse="condense">
142156
<ion-toolbar>
143157
<ion-title size="large">Tab 2</ion-title>
144158
</ion-toolbar>
145159
</ion-header>
160+
161+
<app-explore-container name="Tab 2 page"></app-explore-container>
146162
</ion-content>
147163
```
148164

149-
`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:
165+
`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:
150166

151167
```html
152168
<ion-title>Photo Gallery</ion-title>
153169
```
154170

155-
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.
171+
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.
156172

157173
```html
174+
<ion-header [translucent]="true">
175+
<ion-toolbar>
176+
<ion-title>Photo Gallery</ion-title>
177+
</ion-toolbar>
178+
</ion-header>
179+
158180
<ion-content>
181+
<ion-header collapse="condense">
182+
<ion-toolbar>
183+
<ion-title size="large">Photo Gallery</ion-title>
184+
</ion-toolbar>
185+
</ion-header>
186+
187+
<!-- CHANGE: Add the floating action button. -->
159188
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
160189
<ion-fab-button>
161190
<ion-icon name="camera"></ion-icon>
162191
</ion-fab-button>
163192
</ion-fab>
193+
194+
<!-- CHANGE: Remove or comment out `app-explore-container`. -->
195+
<!-- <app-explore-container name="Tab 2 page"></app-explore-container> -->
164196
</ion-content>
165197
```
166198

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

169201
```html
170-
<ion-tab-button tab="tab2">
171-
<ion-icon name="images"></ion-icon>
172-
<ion-label>Photos</ion-label>
173-
</ion-tab-button>
202+
<ion-tabs>
203+
<ion-tab-bar slot="bottom">
204+
<ion-tab-button tab="tab1" href="/tabs/tab1">
205+
<ion-icon aria-hidden="true" name="triangle"></ion-icon>
206+
<ion-label>Tab 1</ion-label>
207+
</ion-tab-button>
208+
209+
<ion-tab-button tab="tab2" href="/tabs/tab2">
210+
<!-- CHANGE: Update icon. -->
211+
<ion-icon aria-hidden="true" name="images"></ion-icon>
212+
<!-- CHANGE: Update label. -->
213+
<ion-label>Photos</ion-label>
214+
</ion-tab-button>
215+
216+
<ion-tab-button tab="tab3" href="/tabs/tab3">
217+
<ion-icon aria-hidden="true" name="square"></ion-icon>
218+
<ion-label>Tab 3</ion-label>
219+
</ion-tab-button>
220+
</ion-tab-bar>
221+
</ion-tabs>
174222
```
175223

176-
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.
224+
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)