Ionic 4 - Build iOS, Android & Web Apps with Ionic & Angular
4.7 (7,097 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.
32,040 students enrolled

Ionic 4 - 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.7 (7,097 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.
32,040 students enrolled
Last updated 3/2019
English
English [Auto-generated]
Current price: $11.99 Original price: $179.99 Discount: 93% off
30-Day Money-Back Guarantee
This course includes
  • 34.5 hours on-demand video
  • 55 articles
  • 145 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ 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 4 offers

  • Dive deeper into Ionic 4 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 499 lectures 34:45:16
+ Angular Refresher
29 lectures 01:48:05
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:04
Sending Http Requests
10:03
Showing a Placeholder Whilst Waiting for a Response
02:05
Wrap Up
01:17
Useful Resources & Links
00:06
+ Ionic Component Basics
19 lectures 01:11:27
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
02:11
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
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:02
+ Angular + Ionic
17 lectures 01:09:51
Module Introduction
01:44
Why Use Angular?
02:39
Creating a New Ionic Angular Project
05:49
Analyzing the Created Project
05:54
How Angular & Ionic Work Together
03:53
Adding & Loading a New Page
05:36
Using Angular Features on Ionic Components
05:28
Setting Up Angular Routes
03:31
Managing State with Services
06:21
Extracting and Displaying Route Param Data
08:34
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:04
+ Building Native Apps with Capacitor
8 lectures 25:48
Module Introduction
00:59
General Information
01:28
Creating an Android App
12:33
Running the App on a Real Android Device
00:16
Creating an iOS App
09:10
Running the App on a Real iOS Device
00:12
Wrap Up
01:03
Useful Resources & Links
00:06
+ Debugging
9 lectures 19:33
Module Introduction
00:44
Error Messages & console.log()
04:02
Using the Browser DevTools & Breakpoints
02:30
Using VS Code for Debugging
00:07
Debugging the UI & Performance
02:53
Debugging Android Apps
04:16
Debugging iOS Apps
04:16
Wrap Up
00:40
Useful Resources & Links
00:05
+ Navigation & Routing in Ionic Apps
23 lectures 02:02:52
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
05:35
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
Extracting the ID of Loaded Places
05:34
Time for more practicing of navigation techniques!
More Practicing!
1 question
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:02
+ Ionic Components Overview
22 lectures 01:40:10
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
04:41
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:02
+ Styling & Theming Ionic Apps
13 lectures 44:20
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:16
Adding Custom CSS Rules
10:01
Component-specific CSS Variables
04:32
Wrap Up
00:40
Useful Resources & Links
00:10
+ Handling User Input
20 lectures 01:26:54
Module Introduction
01:32
User Input Requirements
01:20
Setting Up a Form Template
05:45
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
Validating & Submitting the Form
07:45
Wrap Up
01:26
Useful Resources & Links
00:02
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

THIS COURSE WAS COMPLETE UPDATED TO IONIC 4

It's now up-to-date with the latest version of Ionic!

---

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