App Development with Ionic from Scratch

Learn pages and navigation in Ionic by generating new pages and moving between them, and explore apps with side menu or bottom bar navigation to apply to your app.

Create new pages in an Ionic app using the Ionic Generate Page tool, producing a component page like past tasks, and wire it into routing via the app routing module.

Navigate between pages in an Ionic app using HTML router links and Angular's router navigate, wire a new task route, and trigger transitions with an Ionic button.

Learn to pass data between pages in Ionic with Angular routing, using query parameters and route parameters to send a priority value to the new task page.

Explain how the Angular router evaluates routes from the app routing module through the tabs module to the new task route, using first match wind strategy and path matching.

Explore transitions in routing within Ionic apps by building tab navigation, moving routes into the tabs routing module, and wiring a past tasks page into the tab view.

Learn to set up a side menu in Ionic by generating a new page, adding it to app routing and the side menu, and restoring the menu button.

Implement back navigation in Ionic by using the nav controller to pop the top of the navigation stack and return to the upcoming tasks page, with an ion back button.

Explore the Ionic component library and learn to add buttons, lists, and forms, while understanding how Ionic's components mirror native UI.

Explore the ionic component library and how components adapt to iOS and Android. Learn to read the docs, copy usage snippets, and experiment with properties and slots.

Display content in a list using the ion list and ion item, bind a past tasks array to the template with a for-like loop, and render task titles dynamically.

Learn to implement pull-down refresh in Ionic apps using the ion refresher component, simulate loading with a timeout, and signal completion so the refresher hides.

Extend the Ionic list by displaying a completed date under each title using an h3 wrapper and gray text, then enable slide-to-action with a delete option.

Collect data from users by building a new task form in Ionic, using a reactive form group to capture a title and submit, logging the data to the console.

Add inputs to a to-do form with Ionic, including a date picker and a priority dropdown, wired to the form group with controls and placeholders for clarity.

Validate forms in Ionic using Angular reactive forms to require non-empty titles, enforce minimum length, and prevent past due dates by disabling the add task button until validation passes.

Learn to add icons in Ionic via the iron icon component, explore the docs icon library, and apply clock and checkmark icons for task states using outline variants.

Explore how apps interact with data and learn three ways to use data: local storage APIs and a database, with a note to skip the databases video if not needed.

Explore how the service layer's data service acts as a bridge between UI components and data sources, enabling a seamless switch from database to API without changing components.

Create a data service in ionic to manage task data with an in-memory model. Inject the service into components to expose a tasks getter and support adding tasks.

Explore Ionic storage to persist data in the browser for a to-do list, using create, get, and set, and compare browser storage with more permanent options.

Learn to fetch and post data in an Ionic app using angular's HttpClient, replacing local storage with API calls, including get and post workflows for a to-do list.

Explore native APIs in Ionic without native code, focusing on less common features beyond camera and photos, GPS, facial recognition, and how the capacitor tool fits the Ionic toolset.

Learn how Ionic plugins let a web-based Angular app access native device APIs via Capacitor, installing a plugin npm package and running Capacitor sync to add iOS and Android support.

Compare capacitor and cordova to explain how each deploys a web app into a native app with access to native APIs in Ionic development, and how plugins differ.

Install the capacitor dialog plugin for Ionic, then implement a native confirm dialog to delete a task, using async handling and platform nuances across web, Android, and iOS.

Discover how to configure Ionic plugins that require user permission using the geolocation plugin, including iOS info.plist keys and Android manifest changes.

Prepare your Ionic app for production by adding icons, a splash screen, and a theme with colors; consider multi-language support later.

Learn to add icons to an Ionic app by using Cordova Rez to generate iOS and Android icons from a resources directory, including adaptive icons for Android.

Learn how to integrate and control a splash screen in Ionic apps using Capacitor, handle Android and iOS behavior, and optionally switch to a launch screen per Apple guidelines.

Update app name and identifiers for iOS and Android by editing capacitor config, iOS display name and bundle ID, and Android app IDs, Gradle files, and strings resources.

Change the Ionic app theme by editing the colors in the theme variables file, including primary, secondary, tertiary, success, and warning, with shade and tint for interactive states.

Learn how to enable and test dark mode in Ionic apps, using color variables and a prefers-color-scheme media query to keep text and backgrounds legible.

Learn to implement multi-language support in an Ionic app by creating i18n json files, configuring NGX Translate with a custom HTTP loader, and auto-detecting device language to switch languages.

Learn to implement Ionic animations with the Ionic animations library and animation controller to animate a checkmark when completing a to-do item, including keyframes and duration.

Learn how Ionic App Flow automates builds, enables live updates, and previews web deployments from GitHub. Deploy to production, share previews, and wire automation for future builds.