Section 1: Getting Started

Course Introduction
What Is Ionic?
A Closer Look at the Ionic Platform
What is Angular?
Our First Ionic App!
The History of Ionic
Ionic 4+ vs Ionic 3
How to Build Native Mobile Apps with Ionic
Course Outline
How To Get The Most Out Of The Course

Section 2: Angular Refresher

Module Introduction
What is Angular?
Angular SPAs & Ionic
Understanding Components
Installing Angular with the CLI
Installing the IDE
Understanding the Folder Structure
The App Component
Creating Our First Component
Cross Component Communication with Property Binding
Understanding Directives & String Interpolation
Handling User Input
Understanding Event Binding
Local References
Understanding Two-Way-Binding
Passing Data Around with Custom Events
Implementing Routing
Setting Up Services
Using Services with Dependency Injection
Working with Angular Lifecycle Hooks
Adding a Person with Services
Navigating between Components
Removing Items Upon a Click
"Push" ing Data Around with Subjects
Sending HTTP Requests
Showing a Placeholder Whilst Waiting for a Response
Wrap Up

Section 3: Iconic Component Basics

Module Introduction
Core App Building Blocks
Under the Hood of Ionic Components
Setting Up a Non-Angular Ionic Project
Where to Learn all about Ionic Components
Using Basic Ionic Components
More Basic Components
Component Categories
Using the Ionic Grid
Adding Icons & Using Slots
Using CSS Utility Attributes
Using Ionic Elements like "Normal" HTML Elements
Validating User Input
Creating Ionic Elements Programmatically
Finishing Up the Base JavaScript Logic
Finalizing the Layout
Using Controller Components
Why Angular?

Section 4: Angular + Iconic

Module Introduction
Why Use Angular?
Creating a New Ionic Angular Project
Analyzing the Created Project
How Angular & Ionic Work Together
Adding & Loading a New Page
Using Angular Features on Ionic Components
Setting Up Angular Routes
Managing State with Services
Extracting and Displaying Route Param Data
Navigating Between Pages
Deleting a Recipe
Injecting Ionic Controllers
Angular Components vs Ionic Components
Wrap Up

Section 5: Building Native Apps with Capacitor

Module Introduction
General Information
Creating an Android App
Creating an iOS App
Wrap Up

Section 6: Debugging

Module Introduction
Error Messages & console.log()
Using the Browser DevTools & Breakpoints
Debugging the UI & Performance
Debugging Android Apps
Debugging iOS Apps
Wrap Up

Section 7: Navigation & Routing in Iconic Apps

Module Introduction
How Routing Work In An Ionic + Angular App
Ionic Page Caching & Extra Lifecycle Hooks
Planning the Course Project
Creating Our App Pages
Adjusting Our Main Routing Configuration
Understanding Ionic Tabs
Adding Tabs to the App
Preparing Data & Services for the Project
Outputting "Places"
Adding Forward Navigation
Going Back with NavController
Navigating via Toolbar Buttons
Extracting the ID of Loaded Places
Adding a SideDrawer
Opening + Closing the SideDrawer
Adding Links & Switching Pages
Adding the Auth Service
Adding an Auth Guard
Opening a Modal
Closing the Modal & Passing Data
Wrap Up

Section 8: Iconic Components Overview

Module Introduction
Attributes & Slots
Ionic Grid Basics
Controlling Grid Column Sizes
Controlling Grid Alignment
Responsive Grid Sizing
Grid Summary
ion-list vs ion-grid
ion-label & ion-item
ion-text
Swipeable List Items
Swipeable Bookings
Understanding Virtual Scrolling
Implementing Virtual Scrolling
Adding Image Elements
Segmented Buttons
Adding a Spinner
Using the Loading Controller
Using the ActionSheet Controller
Wrap Up

Section 9: Styling & Theming Ionic Apps

Module Introduction
How Styling & Theming Works in Ionic Apps
Docs & Utility Attributes
Setting Global Theme Variables
Setting Global Styles
Setting All Colors at Once
Setting Platform-Specific Styles
Styling Core Components with Variables
Adding Custom CSS Rules
Component-specific CSS Variables
Wrap Up

Section 10: Handling User Input

Module Introduction
User Input Requirements
Setting Up a Form Template
Adding a Template-driven Form
Handling Validation
Switching Between Auth Modes
Finishing the Auth Form
Starting Work on a New Offer Form
Finishing the Offer Form Template
Creating a Reactive Form
Syncing the Form to the Template
Finishing the New Offer Form
Edit Form Challenge
Adding the Edit Offer Form
Starting with the Booking Form
Working on the Book Place Template
Configuring the Date Controls
Validating & Submitting the Form
Wrap Up

Section 11: Managing State

Module Introduction
What is State?
Adding New Places
Using RxJS Subjects for State Management
Passing Data via Subjects & Subscriptions
UI State in Action
Updating Places
UI State with Bookable Places
Booking Places
Fixing a Bug
Canceling Bookings
Finishing Touches

Section 12: Sending Http Requests

Module Introduction
How To Connect to a Backend
Setting Up Firebase
Sending Data via Http
Using Response Data
Fetching & Displaying Data
Updating Places
Fetching Data in Multiple Places
Loading Data in a Single Place
Updating Places Correctly
Error Handling
Fetching Single Places
Adding a Booking
Fetching Bookings By User
Deleting Bookings
Wrap Up

Section 13: Addding Google Maps

Module Introduction
API Setup
Adding a LocationPicker Component
Opening the Map Modal
Adding the Google Maps SDK
Rendering a Map
Picking Locations via a Click on the Map
Finding the Address for a Place
Fetching a Static Image URL
Displaying a Place Preview
Changing the Selection
Removing the Click Listener
Submitting the Location
Outputting Address & Map
Re-using the Maps Modal

Section 14: Using Native Device Features(Camera & Location)

Module Introduction
Understanding Capacitor & Cordova
Using the Docs
Using Capacitor Plugins
Getting the User Location
Testing the Location Feature
Starting With the Image Picker
Taking Pictures
Detecting the Platform Correctly
Adding a Filepicker Fallback
Getting the Picked Image
Converting the Image String to a File
Storing the Image in the Form
Using PWA Elements
Improving the ImagePicker Component
Adding Server-side Image Uploading Code
Adding Image Upload
Wrap Up

Section 15: Adding Authentication

Module Introduction
How Authentication Works
Adding User Signup
Refactoring the Authentication Code
Adding User Login
Managing the User with a Subject
Storing the Token in Memory
Using the ID Observable Correctly
More userId Usage
Fixing the Subscription
Using the userId Everywhere
Storing Auth Data in Device Storag
Adding Autologin
Using Autologin
Adding a Reactive Logout System
Adding Autologout
Requiring the Auth Token on the Backend
Sending the Auth Token to the Backend
More Token Usage
Wrap Up

Section 16: Publishing the Apps

Module Introduction
Preparing App Configs
Custom Icons & Splash Screens
Android Deployment
iOS Deployment
Web Development

Section 17: [LEGACY] Getting Started

Course Introduction
This Course & Angular 4
What is Ionic 2?
Just to be safe: What is Angular 2?
Course Requirements
Creating our first Ionic 2 Project and App
Changing our First App
The Structure of this Course
How to Get the Most out of this Course

Section 18: Mastering the Basics

Module Introduction
A different Way of Creating a New Project
Understanding the Structure of an Ionic 2 Project
How an Ionic 2 App Works
Pages vs Components
How Navigation works in an Ionic 2 App
Initializing Navigation in the AppComponent
Creating a Page and how to Navigate to it
First Summary
An Alternative Way of Creating Pages
Passing Data between Pages
Popping Pages - Going Back
Time to Practice - Pages & Navigation - Problem
Time to Practice - Pages & Navigation - Solution
Saving Time with helpful Navigation Directives
Understanding the Lifecycle of a Page
The Page Lifecycle in Action
How to use the Ionic 2 Documentation
Styling the App and Setting a Theme
Using Utility Attributes
Module Summary

Section 19: Favourite Quotes App(Navigation Pages and Components)

Module Introduction
What we re going to build
Breaking the App into Pieces (Defining the App Structure)
Creating the required Pages
Multiple Stacks of Pages vs One Single Stack
Implementing Tabs Navigation with Multiple Stacks of Pages
Adding Quotes Data to the App
Using the Quotes Data
Using the Ionic List and List Item Components
How to create more complex List Items
Passing the Quotes Data between Pages
Using the Ionic Cards Component
Using the Ionic Grid Buttons and Styling Cards
Adding Custom Styles
Adding Alerts to the Application
Working with Angular 2 Services in the Ionic 2 App
Marking Quotes as Favorites by using a Service
Preparing the Favorite Quotes Page
Diving Deeper into List Items
Preparing a Modal Page
Presenting a Modal
Dismissing Modals
Passing Data to a Modal
Passing Data from a Modal back to the Page
Understanding ViewController Hooks
Receiving Modal Data by Using the ViewController
Updating the Favorite Quotes Page
Adding an Unfavorite Functionality to the App
Revealing extra List Item Options upon Sliding
Changing the overall App Theme
Adding a Sidemenu
How to change the Root Page
Adding a Menu Toggle Button to the Navigation Bar
Preparing the Settings Page
Creating and Using the Settings Service to Store Settings
Adding an Alternative Item Background
App Summary
Module Summary

Section 20: Iconic 2 Components - A Closer Look

Module Introduction
Another Look at the Component Docs
Using and Styling Buttons
Understanding Lists
Understanding List Items and their Content
Configuring Lists
Item Groups and List Headers
Understanding the Grid System
More than (click) - Using Gestures
Creating and Using Custom Components
Time to Practice - Components - Problem
Time to Practice - Components - Solution
Module Summary

Section 21: Running on Iconic 2 App on a Real Device(or an Emulator)

Module Introduction
Where to get started
Building for iOS
Building for Android
Module Summary

Section 22: The Recipe Book App(User Input, Forms and Data Management)

Module Introduction
What we re going to build
Breaking the App into Pieces (Defining the App Structure)
Creating the required Pages
Implementing a Tabs Navigation
Setting the App Theme
Planning the Next Steps
Forms: Template-driven vs Reactive Approach
Understanding Ionic 2 Controls
Creating a Form Template (for Template-Driven Approach)
Registering Controls (Template-Driven)
Submitting the Form (Template-Driven)
Validating the Form (Template-Driven)
Handling Data with a Model for our Ingredients
Managing Data with a Service (Shopping List Service)
Saving Items with the Shopping List Service
Displaying Items from the Shopping List
Removing Item from the Shopping List
Adding a New Recipe Button and Page Transition
Creating a Edit Recipe Form (Reactive Approach)
Creating the Reactive Form
Syncing Form and HTML (Reactive Approach)
Add Ingredients Management to the Form
Creating an Action Sheet
Creating a Dialog (Alert) with an Input Field
Managing Ingredient Controls in a FormArray
Wiring it all up
Removing Ingredient Controls
Using Toasts to Present Short Messages
Adding a Recipe Model and Service
Adding Recipes through a Service
Outputting Recipes
Displaying Recipe Details - Template
Displaying Recipe Details - Styling
Loading the Recipe Detail Page (and passing Data to it)
Loading the Edit Page (and passing Data to it)
Initializing the Edit Form
Updating the Recipe through a Service
Sending Ingredients to the Shopping List
Finishing Steps
Module Summary

Section 23: The Extended Recipe Book App(Auth and HTTP)

Module Introduction
What we re going to build
Which New Features We re Going to Add
Generating the Required Pages
Adding a Sidemenu
Creating the Signup Page (and Form)
Creating the Signin Page
How Authentication Works in an Ionic 2 (Mobile) App
Setting up Firebase (as a Development Backend)
Implementing the Signup Process
Showing a Loader (Spinner) and Error Alert
Implementing the Signin Process
Refining the Signin Page
Managing the User State
Logging Users Out & Fixing a Bug
How Firebase stores the Token
Adding a Popover Component
Fetching the Token
Sending a PUT Request with the Auth Token
Sending a GET Request to load Data
Polishing the App (Adding a Spinner and Error Handling)
Storing and Fetching Recipes
Fixing Errors
Seeing the App run on a Real Device
Module Summary

Section 24: Awesome Places App(Native Device Features Storage)

Module Introduction
What we ll build
Generating the required Pages
Creating Models for Location and Places
Implementing Navigation
Filling the New Place Page with Life (incl. Template-Driven Form)
Adding Google Maps to the App
Configuring our Maps
Allowing the User to Place a Marker on the Map
Passing the Chosen Location back to the Page
Displaying the Chosen Location
Using a Native Device Feature: Geolocation to Locate the User
Polishing the Auto-Locate-Feature
Using a Native Device Feature: The Camera
Displaying the Picture
Managing Data with the PlacesService
Configuring the Single Place Page
Reflecting on our App
Using a Native Device Feature: The File System (to manage Files)
Using the Device Storage: Setting and Getting Data
Deleting stored Data and Files
Fixing the Fetching of Data
Fixing the Storage Issues
Extra: How to Debug
Module Summary

Section 25: Publishing Your App

Module Introduction
Deployment Considerations
Using Custom Icons & Splashscreens
Configuring the App
Build Preparations & Building for Production
Publishing the App in the Google Play Store
Publishing the App in the Apple AppStore
Module Summary

Section 26: Course Roundup

Course Roundup

Section 27: Bonus:Iconic 2 Tips & Tricks

Changing the Back Button Text
Changing Application-Wide Settings
Find out which Platform You re Running On
Find out which Screen Orientation You re Running On

Section 28: Angular Recap

Module Introduction
What is Angular 2?
Understanding the Project Structure and how the App Starts
Understanding Components & Templates
Understanding Databinding
Understanding Directives
Custom Property and Event Binding
Using Services & Dependency Injection
More on Angular 2
Module Summary

Section 29: Updating to Iconic 3 & Iconic Native 3

Ionic 3 Update Overview
Updating the Awesome Places App to Ionic 3 & Ionic Native 3

Popular Searches

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

Online

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

certificate availability

Who it is for

What you will learn

The syllabus

Section 1: Getting Started

Section 2: Angular Refresher

Section 3: Iconic Component Basics

Section 4: Angular + Iconic

Section 5: Building Native Apps with Capacitor

Section 6: Debugging

Section 7: Navigation & Routing in Iconic Apps

Section 8: Iconic Components Overview

Section 9: Styling & Theming Ionic Apps

Section 10: Handling User Input

Section 11: Managing State

Section 12: Sending Http Requests

Section 13: Addding Google Maps

Section 14: Using Native Device Features(Camera & Location)

Section 15: Adding Authentication

Section 16: Publishing the Apps

Section 17: [LEGACY] Getting Started

Section 18: Mastering the Basics

Section 19: Favourite Quotes App(Navigation Pages and Components)

Section 20: Iconic 2 Components - A Closer Look

Section 21: Running on Iconic 2 App on a Real Device(or an Emulator)

Section 22: The Recipe Book App(User Input, Forms and Data Management)

Section 23: The Extended Recipe Book App(Auth and HTTP)

Section 24: Awesome Places App(Native Device Features Storage)

Section 25: Publishing Your App

Section 26: Course Roundup

Section 27: Bonus:Iconic 2 Tips & Tricks

Section 28: Angular Recap

Section 29: Updating to Iconic 3 & Iconic Native 3

Articles

Popular Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Thank You!

Download the Careers360 App on your Android phone