Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Ionic - Build iOS, Android & Web Apps with Ionic & Angular
Getting Started
Course Introduction (2:27)
What Is Ionic? (7:44)
A Closer Look at the Ionic Platform (4:27)
Join our Online Learning Community
What is Angular? (3:59)
Our First Ionic App! (13:36)
The History of Ionic (4:01)
Ionic 4+ vs Ionic 3 (3:06)
How to Build Native Mobile Apps with Ionic (3:45)
Ionic Alternatives
Course Outline (6:23)
How To Get The Most Out Of The Course (3:00)
The Course Source Code
The Academind Pro Referral Program
Angular Refresher
Module Introduction (0:32)
What is Angular? (2:42)
Angular SPAs & Ionic (3:09)
Understanding Components (1:37)
Installing Angular with the CLI (4:29)
Installing the IDE (4:59)
Understanding the Folder Structure (8:14)
The App Component (7:04)
Creating Our First Component (4:05)
Cross Component Communication with Property Binding (5:23)
Understanding Directives & String Interpolation (4:05)
Handling User Input (4:08)
Understanding Event Binding (2:13)
Local References (1:49)
Understanding Two-Way-Binding (5:56)
Passing Data Around with Custom Events (3:58)
Implementing Routing (7:10)
Setting Up Services (3:15)
Using Services with Dependency Injection (2:48)
Working with Angular Lifecycle Hooks (3:25)
Adding a Person with Services (2:44)
Navigating between Components (2:03)
Removing Items Upon a Click (3:08)
"Push"ing Data Around with Subjects (5:34)
More on RxJS & Observables
Sending Http Requests (10:03)
Showing a Placeholder Whilst Waiting for a Response (2:05)
Wrap Up (1:17)
Useful Resources & Links
Ionic Component Basics
Module Introduction (1:20)
Core App Building Blocks (4:26)
Under the Hood of Ionic Components (6:47)
Setting Up a Non-Angular Ionic Project (3:04)
Where to Learn all about Ionic Components (2:29)
Using Basic Ionic Components (5:11)
More Basic Components (3:23)
Component Categories (2:27)
Using the Ionic Grid (4:51)
Adding Icons & Using Slots (6:14)
Using CSS Utility Attributes (3:42)
Using Ionic Elements like "Normal" HTML Elements (4:12)
Validating User Input (2:46)
Creating Ionic Elements Programmatically (4:57)
Finishing Up the Base JavaScript Logic (3:39)
Finalizing the Layout (1:31)
Using Controller Components (7:48)
Assignment: Component Basics (Problem) (1:42)
Assignment: Component Basics (Solution) (12:28)
Why Angular? (5:29)
Useful Resources & Links
Angular + Ionic
Module Introduction (1:44)
Why Use Angular? (2:39)
Creating a New Ionic Angular Project (5:49)
Analyzing the Created Project (5:53)
How Angular & Ionic Work Together (3:53)
Adding & Loading a New Page (7:44)
Using Angular Features on Ionic Components (5:28)
Setting Up Angular Routes (4:06)
Managing State with Services (6:21)
Extracting and Displaying Route Param Data (8:34)
Navigating Between Pages (5:32)
Deleting a Recipe (4:34)
Injecting Ionic Controllers (3:31)
Angular Components vs Ionic Components (5:49)
Wrap Up (0:37)
Useful Resources & Links
Building Native Apps with Capacitor
Module Introduction (0:59)
General Information (1:28)
Creating an Android App (12:33)
Running the App on a real Android Device
Creating an iOS App (9:10)
Running the App on a Real iOS Device
Wrap Up (1:03)
Useful Resources & Links
Debugging
Module Introduction (0:44)
Error Messages & console.log() (4:02)
Using the Browser DevTools & Breakpoints (2:30)
Using VS Code for Debugging
Debugging the UI & Performance (2:53)
Debugging Android Apps (4:16)
Debugging iOS Apps (4:16)
Wrap Up (0:40)
Useful Resources & Links
Navigation & Routing in Ionic Apps
Module Introduction (1:41)
How Routing Work In An Ionic + Angular App (4:37)
Ionic Page Caching & Extra Lifecycle Hooks (9:20)
Planning the Course Project (4:06)
Creating Our App Pages (7:44)
Adjusting Our Main Routing Configuration (1:59)
Understanding Ionic Tabs (1:29)
Adding Tabs to the App (15:22)
Preparing Data & Services for the Project (5:53)
Outputting "Places" (8:12)
Adding Forward Navigation (6:21)
Going Back with NavController (7:01)
Assignment: Ionic + Angular Navigation (Problem) (1:20)
Assignment: Ionic + Angular Navigation (Solution) (4:15)
Navigating via Toolbar Buttons (3:13)
Extracting the ID of Loaded Places (5:34)
Assignment: More Practicing! (Problem) (0:42)
Assignment: More Practicing! (Solution) (5:33)
Adding a SideDrawer (7:00)
Opening + Closing the SideDrawer (4:46)
Adding Links & Switching Pages (4:15)
Adding the Auth Service (3:28)
Adding an Auth Guard (7:47)
Opening a Modal (6:26)
Closing the Modal & Passing Data (7:21)
Wrap Up (1:24)
Useful Resources & Links
Ionic Components Overview
Module Introduction (1:52)
Attributes & Slots (6:09)
Ionic Grid Basics (8:35)
Controlling Grid Column Sizes (3:44)
Controlling Grid Alignment (5:29)
Responsive Grid Sizing (5:10)
Grid Summary (2:11)
ion-list vs ion-grid (3:06)
ion-label & ion-item (7:29)
ion-text (2:39)
Swipeable List Items (11:08)
Swipeable Bookings (10:12)
Understanding Virtual Scrolling (3:50)
Implementing Virtual Scrolling (5:23)
Adding Image Elements (2:45)
Segmented Buttons (5:47)
Adding a Spinner (4:17)
Using the Loading Controller (2:36)
Using the ActionSheet Controller (6:50)
Wrap Up (1:42)
Useful Resources & Links
Styling & Theming Ionic Apps
Module Introduction (1:12)
How Styling & Theming Works in Ionic Apps (6:44)
Docs & Utility Attributes (1:13)
Setting Global Theme Variables (3:28)
Setting Global Styles (1:18)
Setting All Colors at Once (2:35)
Setting Platform-Specific Styles (3:58)
Styling Core Components with Variables (8:13)
Adding Custom CSS Rules (10:01)
Component-specific CSS Variables (4:32)
Wrap Up (0:40)
Useful Resources & Links
Handling User Input
Module Introduction (1:32)
User Input Requirements (1:20)
Setting Up a Form Template (5:45)
Adding a Template-driven Form (7:37)
Handling Validation (6:02)
Switching Between Auth Modes (2:35)
Finishing the Auth Form (2:28)
Starting Work on a New Offer Form (3:54)
Finishing the Offer Form Template (4:22)
Creating a Reactive Form (5:21)
Syncing the Form to the Template (4:00)
Finishing the New Offer Form (4:01)
Edit Form Challenge (0:52)
Adding the Edit Offer Form (5:36)
Starting with the Booking Form (4:33)
Working on the Book Place Template (5:59)
Configuring the Date Controls (11:44)
Validating & Submitting the Form (8:12)
Wrap Up (1:26)
Useful Resources & Links
Managing State
Module Introduction (1:05)
What is State? (4:01)
Adding New Places (12:14)
Using RxJS Subjects for State Management (8:59)
Passing Data via Subjects & Subscriptions (12:24)
UI State in Action (8:10)
Updating Places (8:40)
UI State with Bookable Places (7:01)
Filtering & Navigation
Booking Places (16:05)
Fixing a Bug (0:25)
Canceling Bookings (4:54)
Finishing Touches (4:36)
Useful Resources & Links
Sending Http Requests
Module Introduction (0:46)
How To Connect to a Backend (2:13)
Setting Up Firebase (2:11)
Sending Data via Http (7:12)
Using Response Data (3:36)
Fetching & Displaying Data (14:50)
Updating Places (6:38)
Fetching Data in Multiple Places (3:15)
Loading Data in a Single Place (6:59)
Updating Places Correctly (3:52)
Error Handling (3:27)
Fetching Single Places (6:18)
Adding a Booking (6:46)
Fetching Bookings By User (10:07)
Deleting Bookings (5:11)
Wrap Up (0:56)
Useful Resources & Links
Adding Google Maps
Module Introduction (1:29)
API Setup (3:32)
Adding a LocationPicker Component (6:51)
Opening the Map Modal (3:59)
Adding the Google Maps SDK (8:44)
Rendering a Map (6:04)
Picking Locations via a Click on the Map (3:41)
Finding the Address for a Place (8:47)
Fetching a Static Image URL (7:19)
Displaying a Place Preview (5:12)
Changing the Selection (1:01)
Removing the Click Listener (2:10)
Submitting the Location (8:14)
Outputting Address & Map (3:23)
Re-using the Maps Modal (8:36)
Useful Resources & Links
Using Native Device Features (Camera & Location)
Module Introduction (0:57)
Understanding Capacitor & Cordova (4:12)
Using the Docs (0:56)
Using Capacitor Plugins (6:39)
Getting the User Location (9:37)
Testing the Location Feature (6:17)
Starting With the Image Picker (4:26)
Taking Pictures (10:11)
Avoid Distorted Pictures
Detecting the Platform Correctly (5:00)
Adding a Filepicker Fallback (4:43)
Getting the Picked Image (3:00)
Converting the Image String to a File (5:13)
Storing the Image in the Form (3:30)
Using PWA Elements (4:06)
Improving the ImagePicker Component (4:46)
MUST READ: Firebase Cloud Functions & Billing
Adding Server-side Image Uploading Code (5:04)
Adding Image Upload (7:30)
Wrap Up (1:06)
Useful Resources & Links
Adding Authentication
Module Introduction (0:51)
How Authentication Works (3:00)
Adding User Signup (10:05)
Refactoring the Authentication Code (6:33)
Adding User Login (6:23)
Managing the User with a Subject (6:41)
Storing the Token in Memory (4:55)
Using the ID Observable Correctly (4:42)
More userId Usage (4:57)
Fixing the Subscription (0:49)
Using the userId Everywhere (5:56)
Storing Auth Data in Device Storag (4:22)
Adding Autologin (6:48)
Using Autologin (4:15)
Adding a Reactive Logout System (7:52)
Adding Autologout (8:00)
Requiring the Auth Token on the Backend (6:22)
Sending the Auth Token to the Backend (7:55)
More Token Usage (4:12)
Optional: Check Auth State When App Resumes
Wrap Up (1:35)
Useful Resources & Links
Publishing the Apps
Module Introduction (1:06)
Preparing App Configs (7:52)
Custom Icons & Splash Screens (8:53)
Android Deployment (3:54)
iOS Deployment (3:33)
Web Development (5:45)
Useful Resources & Links
Course Roundup
Course Roundup (1:37)
Optional: Check Auth State When App Resumes
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock