Ionic 3
Course Outline Given Below
- 1. Getting Started
- 2. Mastering the Basics
- 3. Navigation, Pages and Components
- 4. Components - A Closer Look
- 5. App (User Input, Forms and Data Management)
- What is Ionic 3?
- Just to be safe: What is Angular 4?
- Course Requirements
- Creating your First App
- Creating our first Ionic 3 Project and App
- Changing our First App
- Running your App on a Real Device
- The Structure of this Course
- How to get the Most out of this Course
- A different Way of Creating a New Project
- Other available Project Templates
- Understanding the Structure of an Ionic 3 Project
- How an Ionic 3 App Works
- Pages vs Components
- How Navigation works in an Ionic 3 App
- Initializing Navigation in the AppComponent
- ionic generate page XY Problems
- 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
- Configuring Page Transitions
- Understanding the Lifecycle of a Page
- The Page Lifecycle in Action
- How to use the Ionic 3 Documentation
- Styling the App and Setting a Theme
- Using Utility Attributes
- 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
- Bonus: How to create a re-orderable List
- Ionic 3.0.0 and the Grid
- Understanding the Grid System
- More than (click) – Using Gestures
- Creating and Using Custom Components
- Time to Practice – Components – Problem
- Time to Practice – Components – Solution
- 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 3 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
- 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 3 (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
- Ionic 3 and Http
- Sending a PUT Request with the Auth Token
- More about Tokens
- Sending a GET Request to load Data
- Polishing the App (Adding a Spinner and Error Handling)
- Fixing the Error Handler
- Storing and Fetching Recipes
- Fixing Errors
- Seeing the App run on a Real Device