Ionic 5 - Build iOS, Android & Web Apps with Ionic & Angular
4.6 (11,772 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
50,142 students enrolled

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

Build Native iOS & Android as well as Progressive Web Apps with Angular, Capacitor and the Ionic Framework.
Bestseller
4.6 (11,758 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
50,121 students enrolled
Last updated 4/2020
English
English, French [Auto-generated], 5 more
  • German [Auto-generated]
  • Indonesian [Auto-generated]
  • Italian [Auto-generated]
  • Portuguese [Auto-generated]
  • Spanish [Auto-generated]
Current price: $125.99 Original price: $179.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 20 hours on-demand video
  • 42 articles
  • 143 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 284 lectures 20:21:20
+ Getting Started
13 lectures 53:23

Welcome to this course! Let me introduce myself and give you a first overview of the course content!

Preview 02:27

What is Ionic? That's an important question and in this lecture, I'll explain in detail what Ionic is all about and why it's amazing!

Preview 07:44

Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!

Join our Online Learning Community
00:21

Let's take a closer look at all the pieces that actually make up Ionic and let's see how it all works together.

Preview 04:28

This course is about Ionic + Angular, so let's also make sure we're all on the same page when it comes to Angular. What is that about?

Preview 03:59

Time to get started! Let's create our first Ionic app and see how it works!

Preview 13:36

Ionic is not that old but it already has an interesting history - time to explore it!

Preview 04:02

There was a major version change in Ionic: Between Ionic 3 and 4, the whole framework changed. Let's explore why and why we're now in a way better future!

Preview 03:06

Ionic can be used to build cross-platform apps. You can build web apps and native mobile apps. In this lecture, we'll explore the latter.

Preview 03:45

There are alternatives to Ionic - this lectures gives you more resources on that.

Comparing Ionic to Alternatives
00:08

We got a good idea of what Ionic is about, so let's now explore what exactly is in the course! Here's a detailed overview.

Preview 06:23

Your success matters to me! Here's how to get the most out of the course resources!

Preview 03:02
The Course Source Code
00:22
+ Angular Refresher
29 lectures 01:48:00
Module Introduction
00:32
What is Angular?
02:42
Angular SPAs & Ionic
03:09
Understanding Components
01:37
Installing Angular with the CLI
04:29
Installing the IDE
04:59
Understanding the Folder Structure
08:14
The App Component
07:04
Creating Our First Component
04:05
Cross Component Communication with Property Binding
05:23
Understanding Directives & String Interpolation
04:05
Handling User Input
04:08
Understanding Event Binding
02:13
Local References
01:49
Understanding Two-Way-Binding
05:56
Passing Data Around with Custom Events
03:58
Implementing Routing
07:10
Setting Up Services
03:15
Using Services with Dependency Injection
02:48
Working with Angular Lifecycle Hooks
03:25
Adding a Person with Services
02:44
Navigating between Components
02:03
Removing Items Upon a Click
03:08
"Push"ing Data Around with Subjects
05:34
More on RxJS & Observables
00:03
Sending Http Requests
10:03
Showing a Placeholder Whilst Waiting for a Response
02:05
Wrap Up
01:17
Useful Resources & Links
00:02
+ Ionic Component Basics
20 lectures 01:13:02
Module Introduction
01:20
Core App Building Blocks
04:26
Under the Hood of Ionic Components
06:47
Setting Up a Non-Angular Ionic Project
03:04
Where to Learn all about Ionic Components
02:29
Using Basic Ionic Components
05:11
More Basic Components
03:23
Component Categories
02:27
Using the Ionic Grid
04:51
Adding Icons & Using Slots
06:14
Using CSS Utility Attributes
03:42
Using Ionic Elements like "Normal" HTML Elements
04:12
Validating User Input
02:46
Creating Ionic Elements Programmatically
04:57
Finishing Up the Base JavaScript Logic
03:39
Finalizing the Layout
01:31
Use the right Ionic Import
00:05
Using Controller Components
06:28
Let's practice working with these Ionic components.
Practicing Ionic Components
1 question
Why Angular?
05:29
Useful Resources & Links
00:01
+ Angular + Ionic
20 lectures 01:13:59
Module Introduction
01:44
Why Use Angular?
02:39
Creating a New Ionic Angular Project
05:49
Important: CSS Utility Attributes
00:17
Analyzing the Created Project
05:54
How Angular & Ionic Work Together
03:53
Important: Extra Routing Modules
00:24
Adding & Loading a New Page
07:44
Using Angular Features on Ionic Components
05:28
Setting Up Angular Routes
04:06
Managing State with Services
06:21
Extracting and Displaying Route Param Data
08:34
A Potential Bug (+ Fix)
00:45
Navigating Between Pages
05:32
Deleting a Recipe
04:34
There's a Bug!
00:15
Injecting Ionic Controllers
03:31
Angular Components vs Ionic Components
05:49
Wrap Up
00:37
Useful Resources & Links
00:02
+ Building Native Apps with Capacitor
8 lectures 25:44
Module Introduction
00:59
General Information
01:28
Creating an Android App
12:33
Running the App on a Real Android Device
00:15
Creating an iOS App
09:10
Running the App on a Real iOS Device
00:12
Wrap Up
01:03
Useful Resources & Links
00:03
+ Debugging
9 lectures 19:30
Module Introduction
00:44
Error Messages & console.log()
04:02
Using the Browser DevTools & Breakpoints
02:30
Using VS Code for Debugging
00:06
Debugging the UI & Performance
02:53
Debugging Android Apps
04:16
Debugging iOS Apps
04:16
Wrap Up
00:40
Useful Resources & Links
00:03
+ Navigation & Routing in Ionic Apps
26 lectures 02:06:59
Module Introduction
01:41
How Routing Work In An Ionic + Angular App
04:37
Ionic Page Caching & Extra Lifecycle Hooks
09:20
Planning the Course Project
04:06
Creating Our App Pages
07:44
MUST READ: Ionic 5 and Routing / Lazy Loading
01:23
Adjusting Our Main Routing Configuration
01:59
Understanding Ionic Tabs
01:29
Adding Tabs to the App
15:22
Preparing Data & Services for the Project
05:53
Outputting "Places"
08:12
Adding Forward Navigation
06:21
Going Back with NavController
07:01
Time to practice the navigation techniques taught thus far!
Practicing Ionic + Angular
1 question
Navigating via Toolbar Buttons
03:13
A Bug with Ionic
00:30
Extracting the ID of Loaded Places
05:34
Time for more practicing of navigation techniques!
More Practicing!
1 question
Optional: Assignment Solution Code
00:05
Adding a SideDrawer
07:00
Opening + Closing the SideDrawer
04:46
Adding Links & Switching Pages
04:15
Adding the Auth Service
03:28
Adding an Auth Guard
07:47
Opening a Modal
06:26
Closing the Modal & Passing Data
07:21
Wrap Up
01:24
Useful Resources & Links
00:01
+ Ionic Components Overview
22 lectures 01:41:15
Module Introduction
01:52
Attributes & Slots
06:09
Ionic Grid Basics
08:35
Controlling Grid Column Sizes
03:44
Controlling Grid Alignment
05:29
Responsive Grid Sizing
05:10
Grid Summary
02:11
ion-list vs ion-grid
03:06
ion-label & ion-item
07:29
ion-text
02:39
Swipeable List Items
11:08
Swipeable Bookings
10:12
Understanding Virtual Scrolling
03:50
Implementing Virtual Scrolling
05:23
Virtual Scrolling Bugs
00:20
Adding Image Elements
02:45
Segmented Buttons
05:47
Adding a Spinner
04:17
Using the Loading Controller
02:36
Using the ActionSheet Controller
06:50
Wrap Up
01:42
Useful Resources & Links
00:01
+ Styling & Theming Ionic Apps
13 lectures 44:14
Module Introduction
01:12
How Styling & Theming Works in Ionic Apps
06:44
Docs & Utility Attributes
01:13
Setting Global Theme Variables
03:28
Setting Global Styles
01:18
Setting All Colors at Once
02:35
Setting Platform-Specific Styles
03:58
Styling Core Components with Variables
08:13
Missing iOS Icons
00:15
Adding Custom CSS Rules
10:01
Component-specific CSS Variables
04:32
Wrap Up
00:40
Useful Resources & Links
00:05
+ Handling User Input
22 lectures 01:27:42
Module Introduction
01:32
User Input Requirements
01:20
Setting Up a Form Template
05:45
Angular 8 & @ViewChild()
00:14
Adding a Template-driven Form
07:37
Handling Validation
06:02
Switching Between Auth Modes
02:35
Finishing the Auth Form
02:28
Starting Work on a New Offer Form
03:54
Finishing the Offer Form Template
04:22
Creating a Reactive Form
05:21
Syncing the Form to the Template
04:00
Finishing the New Offer Form
04:01
Edit Form Challenge
00:52
Adding the Edit Offer Form
05:36
Starting with the Booking Form
04:33
Working on the Book Place Template
05:59
Configuring the Date Controls
11:44
Avoid Errors
00:08
Validating & Submitting the Form
08:12
Wrap Up
01:26
Useful Resources & Links
00:01
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
Description

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)

Does this sound great?

I can't wait to welcome you in this course!

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