Ionic Training Course

Curriculum

1 Introduction
Learning Objective:
By the end of this module you will learn about hybrid mobile application development and how Ionic works in this space.

• Introduction to Hybrid Mobile Application Development
• Introduction to IONIC

2 Basics of IONIC
Learning Objective:
By the end of this module you will learn how to setup and run an ionic application. You will explore the features of ionic CLI and cordova.

• Installing IONIC
• Creating the first IONIC application
• Understanding the Project Structure
• IONIC Command Line Interface
• Packaging for Android and IOS

Hands-on:
Create ionic project using cli and execute on web and mobile using emulators.

3 Modules, Pages and Providers
Learning Objective:
By the end of this module you will learn how to apply angular concepts in ionic application.

• Introduction to NgModule and app.module.ts 
• Understanding the declarations, imports, entryComponents and providers array
• A quick look at the HomePage html, scss and ts files    
• Understanding the component class, data members and member functions
• Two way Data Binding
• ngIf and ngFor
• Creating a provider     
• Dependency Injection

Hands-on:
Create components of Restaurants projects which use angular templating and DI features

4 Ionic UI Components
Learning Objective:
By the end of this module you will learn about the ionic UI components and API and their application in ionic development.

• Buttons, Badges, Icons and FAB's
• Cards, Lists, Grid
• Toolbar, Tabs, Segments, Slides, Gestures
• Menu, Modals, Popover, Loading, Toast, Alerts, Actionsheets
• Input, Searchbar, Select, Toggle

Hands-on:
Enrich Angular component templates with ionic UI components and manage the UI components with their respective API. Create components that display list of restaurants using list based view and grid based view using cards to represent individual list items. Use interactive components like buttons, menus, modals, alerts. Create awesome looking UI using badges, icons, FABs.

5 Navigation and Data
Learning Objective:
By the end of this module you will learn how to implement navigation, enable communication between navigation components. Using remote APIs using angular http client.

• Creating a new Page
• Navigating to the new Page using NavController
• Passing data between the pages using NavParams
• Sharing the data between pages using Providers
• API calls : GET and POST request
• NavGuards and Navigation Lifecycle Events: ionViewCanEnter, ionViewCanLeave, ionViewDidLoad, ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, ionViewDidLeave, ionViewWillUnload

Hands-on:
Create navigation that enables users to move around the app and also interact with remote API to fetch and save the data. Protect pages with navguards and use lifecycle events to top user logic into ionic component/page life cycle.

6 Native
Learning Objective:
By the end of this module you will learn to consume device native features using ionic native.

• Accessing Device Camera
• Accessing user geolocation
• Native Storage
• Vibration
• Video Player

Hands-on:
Create component that captures restaurant information using camera, saving information of device for offline access using native storage, and find the device geolocation. Create a preview component which plays the videos of the restaurant.

7 Theming
Learning Objective:
By the end of this module you will learn how to customize ionic theme by updating ionic SASS variables.

• Using colors in IONIC
• Custom colors
• SaaS variables
• Platform specific styles

Hands-on:
Plan a color palette and apply the changes to ionic theme by overriding the predefined SASS variables.