CF

Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular

19h 48m 52s
English
Paid

Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular is a 242-lesson 19 hours 48 minutes self-paced course by Udemy. Ionic is one of the most exciting technologies you can learn at the moment - it enables you to use one codebase (written in HTML, JS and CSS) to build and ship apps as normal (progressive) web apps as well as real native mobile apps for…

Course facts

Lessons
242
Duration
19 hours 48 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

Ionic is one of the most exciting technologies you can learn at the moment - it enables you to use one codebase (written in HTML, JS and CSS) to build and ship apps as normal (progressive) web apps as well as real native mobile apps for iOS and Android. This course teaches you the latest version of Ionic from scratch with no prior knowledge about it assumed.

Angular (formerly Angular 2) allows you to create awesome web applications powered by TypeScript / JavaScript. Wouldn't it be great to use that Angular knowledge to build web applications that can be compiled into native mobile apps, running on any iOS or Android device? And also publish them as progressive web apps at the same time.

The Ionic framework allows you to do just that! Use your existing Angular, HTML, JS and CSS knowledge and build your native mobile app with that! Ionic offers a lot of beautiful components (which you'll learn about in this course) that can be used to compose native-like user interfaces.

Capacitor (another tool provided by the Ionic team) will handle the rest as it's used to then build a native mobile app for iOS/ Android based on your code. This allows you to focus on the things you know and release your application on all possible devices (desktop and mobile) without having to learn thousands of different languages! Indeed, with Ionic, you can use one codebase to ship three different apps (iOS, Android, web).

No wonder that hybrid frameworks like Ionic are extremely popular and in high demand!

My name is Maximilian Schwarzmüller and I'm a freelance web developer as well as creator of many 5-star rated courses here on Udemy - including my "Angular - The Complete Guide" course, the bestselling Angular course on Udemy!

I love creating awesome web applications and it simply is amazing to now use that knowledge and build native mobile apps with it, too!

This course takes your from zero to published app, taking a very practice-orientated route. You'll a realistic app (where users can create and book events) throughout the course, learning about the basics of Ionic, its rich component library, how to fetch and handle user input, how to store data and access native device features and much more!

You'll dive into all important Ionic components as well as concepts like navigation (tabs, sidemenus), user input, native device features (e.g. camera), storage, http, authentication!

And since building apps is only part of the fun, you'll of course also learn how to run your apps either in the browser, on an emulator or on your own device!

What exactly are you going to learn then?

  • A brief refresher on Angular

  • How to set up your Ionic projects

  • The basics about Ionic - How navigation works, how your project is structured and you use its rich component library

  • How to use the many beautiful components Ionic ships with

  • How to use different kinds of navigation concepts: "Back"-Button-Navigation, tabs and sidemenus

  • How to show modals, alerts, toasts and many, many more useful UI components

  • How to test the app in the browser, on emulators or real devices

  • How to fetch and handle user input through inputs, textfields, dropdowns, dialogs etc.

  • How to authenticate users and access web servers to store + load data

  • How to access the local device storage and native device features like the camera or geolocation

  • So much more ... like styling and theming your app

  • Finally, you'll learn how to configure your app and publish it to the App Store or Google Play Store (or as a progressive web app)

Requirements:
  • Angular fundamentals are required, though a brief refresher is also provided in the course
  • Basic HTML, JS and CSS knowledge is required
  • NO advanced Angular knowledge is required
Who this course is for:
  • This course is for students who want to use their Angular knowledge to build native mobile apps & web apps with one codebase
  • This course is for everyone interested in diving into the development of native mobile apps for iOS and Android

What you'll learn:

  • Build native apps and progressive web apps from one and the same codebase
  • Build native apps for iOS and Android, using Angular and the powerful features Ionic offers
  • Dive deeper into Ionic to learn more about core and advanced features
  • Test iOS and Android apps on real devices and publish those apps to the app stores of the two platforms

Who teaches Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 242 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction
All Course Lessons (242)
#Lesson TitleDurationAccess
1
Course Introduction Demo
02:28
2
What Is Ionic?
07:45
3
A Closer Look at the Ionic Platform
04:29
4
What is Angular?
04:00
5
Our First Ionic App!
13:37
6
The History of Ionic
04:03
7
Ionic 4+ vs Ionic 3
03:07
8
How to Build Native Mobile Apps with Ionic
03:46
9
Course Outline
06:24
10
How To Get The Most Out Of The Course
03:03
11
Module Introduction
00:33
12
What is Angular?
02:43
13
Angular SPAs & Ionic
03:10
14
Understanding Components
01:38
15
Installing Angular with the CLI
04:30
16
Installing the IDE
05:00
17
Understanding the Folder Structure
08:15
18
The App Component
07:05
19
Creating Our First Component
04:06
20
Cross Component Communication with Property Binding
05:24
21
Understanding Directives & String Interpolation
04:06
22
Handling User Input
04:09
23
Understanding Event Binding
02:14
24
Local References
01:50
25
Understanding Two-Way-Binding
05:57
26
Passing Data Around with Custom Events
03:59
27
Implementing Routing
07:11
28
Setting Up Services
03:16
29
Using Services with Dependency Injection
02:49
30
Working with Angular Lifecycle Hooks
03:26
31
Adding a Person with Services
02:45
32
Navigating between Components
02:04
33
Removing Items Upon a Click
03:09
34
"Push"ing Data Around with Subjects
05:35
35
Sending Http Requests
10:04
36
Showing a Placeholder Whilst Waiting for a Response
02:06
37
Wrap Up
01:18
38
Module Introduction
01:21
39
Core App Building Blocks
04:27
40
Under the Hood of Ionic Components
06:48
41
Setting Up a Non-Angular Ionic Project
03:05
42
Where to Learn all about Ionic Components
02:30
43
Using Basic Ionic Components
05:12
44
More Basic Components
03:24
45
Component Categories
02:28
46
Using the Ionic Grid
04:52
47
Adding Icons & Using Slots
06:15
48
Using CSS Utility Attributes
03:43
49
Using Ionic Elements like "Normal" HTML Elements
04:13
50
Validating User Input
02:47
51
Creating Ionic Elements Programmatically
04:58
52
Finishing Up the Base JavaScript Logic
03:40
53
Finalizing the Layout
01:32
54
Using Controller Components
06:29
55
Why Angular?
05:30
56
Module Introduction
01:45
57
Why Use Angular?
02:40
58
Creating a New Ionic Angular Project
05:50
59
Analyzing the Created Project
05:55
60
How Angular & Ionic Work Together
03:54
61
Adding & Loading a New Page
07:45
62
Using Angular Features on Ionic Components
05:29
63
Setting Up Angular Routes
04:07
64
Managing State with Services
06:22
65
Extracting and Displaying Route Param Data
08:35
66
Navigating Between Pages
05:33
67
Deleting a Recipe
04:35
68
Injecting Ionic Controllers
03:32
69
Angular Components vs Ionic Components
05:50
70
Wrap Up
00:38
71
Module Introduction
01:00
72
General Information
01:29
73
Creating an Android App
12:34
74
Creating an iOS App
09:11
75
Wrap Up
01:04
76
Module Introduction
00:45
77
Error Messages & console.log()
04:03
78
Using the Browser DevTools & Breakpoints
02:31
79
Debugging the UI & Performance
02:54
80
Debugging Android Apps
04:17
81
Debugging iOS Apps
04:17
82
Wrap Up
00:41
83
Module Introduction
01:42
84
How Routing Work In An Ionic + Angular App
04:38
85
Ionic Page Caching & Extra Lifecycle Hooks
09:21
86
Planning the Course Project
04:07
87
Creating Our App Pages
07:45
88
Adjusting Our Main Routing Configuration
02:00
89
Understanding Ionic Tabs
01:30
90
Adding Tabs to the App
15:23
91
Preparing Data & Services for the Project
05:54
92
Outputting "Places"
08:13
93
Adding Forward Navigation
06:22
94
Going Back with NavController
07:02
95
Navigating via Toolbar Buttons
03:14
96
Extracting the ID of Loaded Places
05:35
97
Adding a SideDrawer
07:01
98
Opening + Closing the SideDrawer
04:47
99
Adding Links & Switching Pages
04:16
100
Adding the Auth Service
03:29
101
Adding an Auth Guard
07:48
102
Opening a Modal
06:27
103
Closing the Modal & Passing Data
07:22
104
Wrap Up
01:25
105
Module Introduction
01:53
106
Attributes & Slots
06:10
107
Ionic Grid Basics
08:36
108
Controlling Grid Column Sizes
03:45
109
Controlling Grid Alignment
05:30
110
Responsive Grid Sizing
05:11
111
Grid Summary
02:12
112
ion-list vs ion-grid
03:07
113
ion-label & ion-item
07:30
114
ion-text
02:40
115
Swipeable List Items
11:09
116
Swipeable Bookings
10:13
117
Understanding Virtual Scrolling
03:51
118
Implementing Virtual Scrolling
05:24
119
Adding Image Elements
02:46
120
Segmented Buttons
05:48
121
Adding a Spinner
04:18
122
Using the Loading Controller
02:37
123
Using the ActionSheet Controller
06:51
124
Wrap Up
01:43
125
Module Introduction
01:13
126
How Styling & Theming Works in Ionic Apps
06:45
127
Docs & Utility Attributes
01:14
128
Setting Global Theme Variables
03:29
129
Setting Global Styles
01:19
130
Setting All Colors at Once
02:36
131
Setting Platform-Specific Styles
03:59
132
Styling Core Components with Variables
08:14
133
Adding Custom CSS Rules
10:02
134
Component-specific CSS Variables
04:33
135
Wrap Up
00:41
136
Module Introduction
01:33
137
User Input Requirements
01:21
138
Setting Up a Form Template
05:46
139
Adding a Template-driven Form
07:38
140
Handling Validation
06:03
141
Switching Between Auth Modes
02:36
142
Finishing the Auth Form
02:29
143
Starting Work on a New Offer Form
03:55
144
Finishing the Offer Form Template
04:23
145
Creating a Reactive Form
05:22
146
Syncing the Form to the Template
04:01
147
Finishing the New Offer Form
04:02
148
Edit Form Challenge
00:53
149
Adding the Edit Offer Form
05:37
150
Starting with the Booking Form
04:34
151
Working on the Book Place Template
06:00
152
Configuring the Date Controls
11:45
153
Validating & Submitting the Form
07:46
154
Wrap Up
01:27
155
Module Introduction
01:06
156
What is State?
04:02
157
Adding New Places
12:15
158
Using RxJS Subjects for State Management
09:00
159
Passing Data via Subjects & Subscriptions
12:25
160
UI State in Action
08:11
161
Updating Places
08:41
162
UI State with Bookable Places
07:02
163
Booking Places
16:06
164
Fixing a Bug
00:26
165
Canceling Bookings
04:55
166
Finishing Touches
04:37
167
Module Introduction
00:47
168
How To Connect to a Backend
02:14
169
Setting Up Firebase
02:12
170
Sending Data via Http
07:13
171
Using Response Data
03:37
172
Fetching & Displaying Data
14:51
173
Updating Places
06:39
174
Fetching Data in Multiple Places
03:16
175
Loading Data in a Single Place
07:00
176
Updating Places Correctly
03:53
177
Error Handling
03:28
178
Fetching Single Places
06:19
179
Adding a Booking
06:47
180
Fetching Bookings By User
10:08
181
Deleting Bookings
05:12
182
Wrap Up
00:57
183
Module Introduction
01:30
184
API Setup
03:33
185
Adding a LocationPicker Component
06:52
186
Opening the Map Modal
04:00
187
Adding the Google Maps SDK
08:45
188
Rendering a Map
06:05
189
Picking Locations via a Click on the Map
03:42
190
Finding the Address for a Place
08:48
191
Fetching a Static Image URL
07:20
192
Displaying a Place Preview
05:13
193
Changing the Selection
01:02
194
Removing the Click Listener
02:11
195
Submitting the Location
08:15
196
Outputting Address & Map
03:24
197
Re-using the Maps Modal
08:37
198
Module Introduction
00:58
199
Understanding Capacitor & Cordova
04:13
200
Using the Docs
00:57
201
Using Capacitor Plugins
06:40
202
Getting the User Location
09:38
203
Testing the Location Feature
06:18
204
Starting With the Image Picker
04:27
205
Taking Pictures
10:12
206
Detecting the Platform Correctly
05:01
207
Adding a Filepicker Fallback
04:44
208
Getting the Picked Image
03:01
209
Converting the Image String to a File
05:14
210
Storing the Image in the Form
03:31
211
Using PWA Elements
04:07
212
Improving the ImagePicker Component
04:47
213
Adding Server-side Image Uploading Code
05:05
214
Adding Image Upload
07:31
215
Wrap Up
01:07
216
Module Introduction
00:52
217
How Authentication Works
03:01
218
Adding User Signup
10:06
219
Refactoring the Authentication Code
06:34
220
Adding User Login
06:24
221
Managing the User with a Subject
06:42
222
Storing the Token in Memory
04:56
223
Using the ID Observable Correctly
04:43
224
More userId Usage
04:58
225
Fixing the Subscription
00:50
226
Using the userId Everywhere
05:57
227
Storing Auth Data in Device Storag
04:23
228
Adding Autologin
06:49
229
Using Autologin
04:16
230
Adding a Reactive Logout System
07:53
231
Adding Autologout
08:01
232
Requiring the Auth Token on the Backend
06:23
233
Sending the Auth Token to the Backend
07:56
234
More Token Usage
04:13
235
Wrap Up
01:36
236
Module Introduction
01:07
237
Preparing App Configs
07:53
238
Custom Icons & Splash Screens
08:54
239
Android Deployment
03:55
240
iOS Deployment
03:34
241
Web Development
05:46
242
Course Roundup
01:38
Unlock unlimited learning

Get instant access to all 241 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular?

More courses by Udemy

Frequently asked questions

What are the prerequisites for this course?
This course does not assume any prior knowledge of Ionic or Angular, making it suitable for beginners. However, a basic understanding of HTML, JavaScript, and CSS is recommended, as these are the technologies used to build applications in the course.
What kind of applications will I build in this course?
Throughout the course, you will build applications that can be deployed as progressive web apps and real native mobile apps for iOS and Android. The course covers building a foundational Ionic app and explores various components and features such as user input handling, routing, and HTTP requests.
Who is the target audience for this course?
The course is designed for developers who want to learn how to build cross-platform applications using a single codebase. It is ideal for those interested in mobile app development for iOS, Android, and web platforms using Ionic and Angular.
How does this course compare in scope to other Ionic courses?
This course offers a comprehensive introduction to Ionic 4, teaching students how to use Ionic and Angular to build applications from scratch. It covers the latest features and differences between Ionic 4+ and earlier versions, providing a solid foundation for both beginners and those familiar with previous versions of Ionic.
What specific tools or platforms will I learn to use?
You will learn to use Angular, including its CLI, and work with Ionic components. The course also covers using services with dependency injection, Angular lifecycle hooks, and the Ionic Grid. You will use an IDE for development and learn to navigate the folder structure of an Ionic project.
What topics are not covered in this course?
The course does not cover advanced backend development or server-side programming. It focuses on frontend development with Ionic and Angular, so topics like database integration, server-side APIs, or advanced deployment strategies are not included.
How much time should I expect to commit to this course?
Given that the course consists of 242 lessons, it requires a significant time commitment. Although the exact total runtime is not specified, students should be prepared to dedicate ample time to work through each lesson, practice exercises, and fully understand the material presented.