Ionic Training

Course Code: MA-07

Duration: 3 Days

Price: SGD 400.00

e-Learning

Learn at your own pace with anytime, anywhere training.

Classroom Schedule

There are no classes currently scheduled

Virtual Schedule

Location Delivered By Language Date Price Action

Request Private Training

Tell us a little about yourself:

Course Description

Ionic Framework is an open source and free platform that allows creating highly interactive, cross-platform mobile apps that can be deployed across different mobile platforms (Android, iOS, Windows) and the web. Understanding Ionic is all that you need to start developing apps without having to learn native coding to build iOS, Windows or Android apps.
KnowledgeHut brings you a comprehensive workshop to learn the Ionic Framework tools and services for developing hybrid mobile apps. The workshop is hands-on so that you may understand the practical aspects of Ionic including the backbone of Ionic, that is AngularJS, and then move onto Ionic fundamentals and services.

The mobile app market is growing like never before and with app developers earning as high as $ 107,000 / year, there is no time like now to join this course and master the framework that will help you land niche jobs.

Objectives

1. Understand hybrid architecture

Kickstart with hybrid architecture to build high-quality cross-platform apps for iOS, Android & web

2. Scaffolding and using Ionic templates

Learn how to scaffold an app with numerous Ionic templates available in the Ionic framework

3. Powering ionic app with navigation controller

Understand how to make an Ionic app more powerful with navigation using a navigation controller

4. Integrating Ionic components, decorators, and services

Learn the new Ionic component architecture, decorators, & services & how to integrate them

5. Customize Ionic app using SCSS

Understand how to theme Ionic applications and customize components of the app using SCSS syntax

6. Interface usage

Use Ionic Native interface to add functionalities such as camera, notifications, geolocation, etc

Audience

There are no restrictions but participants are expected to have basic HTML, CSS and Angular knowledge.

Prerequisites

An individual should be familiar with:

  • Basics of HTML and CSS knowledge
  • Basic programming / JavaScript knowledge
  • Basics of Angular

Content


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.