Please enable Javascript to correctly display the contents on Dot Net Tricks!


Ionic : Build Hybrid Mobile Apps

Reviews | 150 Learners Course Agenda
The Hybrid Mobile Apps Development course is primarily designed for UI Developer(s)/Web Developer(s) who want to learn how to create cross platform mobile apps using Ionic, Cordova and AngularJS. In this course, you will learn how to use AngularJS and Ionic for creating widgets, data listing, spinners etc. and creating mobile apps using mobile camera, audio, video and database and finally publish it on Google Store, Apple Store.


: Advanced Training Program
: UI Developer(s)/Web Developer(s)
: Webstorm, Ionic Lab
Delivery method(s)
: Instructor-led Classroom/Online Training
: 45 Hours
: English




  • About the course
  • Course Curriculum
  • Assessment
  • Projects
  • F&Q's

About the course

The Hybrid Mobile Apps Development course is primarily designed for UI Developer(s)/Web Developer(s) who want to learn how to create cross platform mobile apps using Ionic, Cordova and AngularJS. In this course, you will learn how to use AngularJS and Ionic for creating widgets, data listing, spinners etc. and creating mobile apps using mobile camera, audio, video and database and finally publish it on Google Store, Apple Store.

Course objectives

At the completion of this course, attendees will be able to;

  1. Explore most popular JavaScript MVW Framework.
  2. Understand AngularJS basic and advanced in-depth concepts.
  3. Create custom directives, filters and different types of scopes in directive.
  4. Create and consume REST API.
  5. Learn Mobile apps development options and advantages of Hybrid mobile apps.
  6. Explore Ionic HTML, CSS and JS components, gestures, and tools for building highly interactive mobile apps.
  7. Understand cordova basic and advanced in-depth concepts.
  8. Access mobile native features like camera, contacts, calendar etc..
  9. Publish mobile app on Google Store, Apple Store.

Who can do this course?

All professionals who are keen to develop cross platform mobile apps for Android, iOS and Windows OS should go for this course.


Anyone who wants to learn Hybrid Mobile apps development should have a basic programming and HTML/HTML5 knowledge.


JS Frameworks and SPA

  1. Understanding JS libs and frameworks
  2. Advantages of JS libs and frameworks
  3. Introduction to SPA
  4. SPA vs. MPA
  5. Most Popular SPA
  6. Advantages of SPA
  7. SPA with jQuery, Backbone.JS, Knockout.JS and Ember.JS

Introduction to AngularJS

  1. Understanding AngularJS
  2. JavaScript VS jQuery VS AngularJS
  3. Advantage of AngularJS
  4. AngularJS VS others JS Frameworks
  5. Browsers Support

Model, View and Controller

  1. Understanding MVC
  2. Creating Models or ViewModels
  3. Creating Controller and View

AngularJS Bootstrap Process

  1. Angular Initialization Process
  2. Automatic Bootstrap
  3. Manual Bootstrap

AngularJS Fundamentals

  1. Modules
  2. Scopes - $scope and $rootScope
  3. Expressions
  4. Built-In Directives - ng-app, ng-controller, ng-bind, ng-model, ng-init, ng-options, ng-if, ng-show, ng-hide, ng-repeat, ng-switch
  5. Built-In Filters - Currency, Date, Number, OrderBy, Lowercase, Uppercase, Filter

Scopes & Controllers

  1. Creating Child Controller
  2. Scope Inheritance
  3. $watch, $digest and $apply

Custom Directives and Filters

  1. Types of Directives - Shared, Inherit & Isolate
  2. Custom Directives
  3. Custom Filters


  1. AngularJS Events
  2. Static Events Binding
  3. Dynamic Events Binding
  4. Events Handling

Data Binding

  1. Understanding Data Binding
  2. Types of Data Binding
  3. Issues with Two-Way Data Binding
  4. Choosing Appropriate Data Binding

Dependency Injection

  1. Understanding Dependency Injection
  2. Methods to inject Dependency
  3. Implementing Dependency Injection

Templates & Routing

  1. Understanding Templates
  2. Types of Templates
  3. Understanding Routing
  4. Angular UI Routing
  5. Defining Routes
  6. Route Evaluation


  1. Understanding Services
  2. Types of Services
  3. Choosing Services - Factory, Service, Provider, Value & Constant
  4. Creating Services
  5. Data sharing using Services

Angular Forms and Controls

  1. Angular forms VS HTML forms
  2. Angular form input controls
  3. Angular form events
  4. Angular form validation
  5. Angular form and controls properties
  6. Applying CSS based on error messages
  7. Creating Cascading Dropdown List

Data Storage

  1. Web Storage - Local Storage and Session Storage
  2. Cookies


Introduction to Hybrid Mobile Apps

  1. Understanding Hybrid Mobile Apps Development
  2. Why to choose Hybrid Mobile Apps Development
  3. Ways to develop Hybrid Mobile Apps
  4. Future of Hybrid Mobile Apps Development
  5. Advantages of Hybrid Mobile Apps

Introduction to Ionic

  1. Understanding Ionic
  2. Ionic - What, Why & When
  3. Ionic Advantages
  4. Browsers Support

Ionic and Webstorm

  1. Installing Ionic
  2. Configuring Ionic
  3. Ionic Starter Templates
  4. Creating a project
  5. Running app in browser
  6. Running app in Emulator
  7. Running app in mobile device

Ionic CLI

  1. Understanding Ionic CLI
  2. Configuring Ionic with Ionic CLI
  3. Starter Templates
  4. Creating Project
  5. Building and Running app

Ionic Creator

  1. Understanding Ionic Creator
  2. Using Ionic Creator
  3. Creating project
  4. Downloading project

Ionic View

  1. Understanding Ionic View
  2. Using Ionic View to testing App
  3. Ionic View Advantages

Ionic Lab

  1. Installing and Configuring Ionic Lab
  2. Ionic Lab to create, build and deploy mobile App
  3. Ionic Lab Advantages

Ionic Components

  1. Understanding Ionic Grid System
  2. CSS components
  3. JavaScript Components
  4. Typography
  5. Header
  6. Footer
  7. Content
  8. Cards
  9. Buttons
  10. List
  11. Forms
  12. Inputs
  13. Gestures and Events
  14. Tabs
  15. Modals
  16. Popups
  17. Navigation
  18. Side Menu
  19. Spinners

Navigation and Routing

  1. Understanding Routing
  2. Introduction to Angular UI Router
  3. Adding Routing for Tabs
  4. Adding Routing for Side Menu
  5. Route Parameters
  6. Adding Navigation Animation
  7. Adding a Back Button

Database Operations

  1. Database Operations with REST service
  2. Data Listing, Paging and Sorting


Introduction to ngCordova

  1. Understanding ngCordova
  2. ngCordova Advantages
  3. Installing and setup ngCordova

ngCordova Plugins

  1. ngCordova Camera
  2. ngCordova Device
  3. ngCordova Contacts
  4. ngCordova DatePicker
  5. ngCordova Network
  6. ngCordova GeoLocation

PhoneGap Build

Introduction to PhoneGap Build

  1. Understanding PhoneGap Build
  2. PhoneGap Build - What, Why & When
  3. PhoneGap Build Advantages
  4. PhoneGap Build to compile Ionic App
  5. Downloading Mobile App from PhoneGap Build
  6. Testing App in real devices


Introduction to Github

  1. Understanding Github
  2. Creating Github Repository
  3. Uploading code to Github repository
  4. Performing operations on repository

Mobile Apps Development

Developing Mobile App Architecture

  1. Designing App Architecture
  2. Developing REST Service using Web API
  3. Developing Customer CRUD Operations


  1. Understanding Interceptors
  2. Need of Interceptors


  1. Implementing Token based Authentication
  2. Managing User session
  3. Implementing Authorization

Developing Category, Product Operations

  1. Developing Category CRUD Operations
  2. Developing Product CRUD Operations

Product Listing

  1. Displaying Products to Users
  2. Applying Paging and Sorting

Shopping Cart

  1. Products Searching
  2. Products Filtering
  3. Adding Products to Shopping Cart
  4. Removing Products to Shopping Cart

Payment Gateway

  1. Understanding Payment gateway Process
  2. Integrating Payment Gateway
  3. Listing Successful Transactions
  4. Listing Failed Transactions


  1. Deploying using Github
  2. App deployment on Google store
  3. App deployment on Apple store

Mock-up Tests and Assignments

Dot Net Tricks's mock-up tests and assignments help the professionals to work on real-world projects and to get an edge in their careers and make their lives better. This training program includes 4 mock-up tests and 2 assignments.

Mockup-Tests objective

  1. Help you to monitor your learning progress.
  2. Help you to evaluate yourself.
  3. Help you to crack your technical interview first round with objective questions.

Assignments objective

  1. Gain confidence to work on ASP.NET MVC project with latest technologies.
  2. Help you to evaluate your development skills.
  3. Prepare yourself for real-application development.

Hybrid Mobile App Development: Online Shopping Site

Desciption: You will learn how to develop an online shopping site mobile app. The mobile app will show the list of products to User/Customer. A user can purchase products and see the previous order history. Here, admin will be responsible for adding products, categories and approving customer order. The mobile app will use Ionic and AngularJS recommended architecture with extensible approach. We would be using payment gateway to do online payment and finally publishing it on Webserver.

Project Architecture: The primary goal of this architecture is to share as much code as possible across the web application and further reuse existing code for mobile apps development if necessary. This architecture will help you to develop web application with the recommended design patterns and practices.

What you will learn through project?

  1. How to create shopping cart.
  2. How to integarate payment gateway.
  3. How to validate data at clientside and server side.
  4. How to create REST API.
  5. How to test app using Mobile Emulators.
  6. How to debug app using Webstorm.
  7. How to secure you application based on user roles.
  8. How to publish your App on App store (Google and Apple).

Frequently Asked Questions

Q1. Do you provide any course material?

Yes we do. All relevant course material and exercises you will be get through our mentors.

Q2. Do you provide any class video?

Yes we do. You will get the recorded sessions of your own online training classes, so that you can revise your class when you want.

Q3. What If I miss my online training class?

All online training classes are recorded. You will get the recorded sessions so that you can watch the online classes when you want. Also, you can join other class to do your missing classes.

Q4. What If I miss my classroom training class?

You can join other on going classroom batch classes to do your missing classes.

Q5. Do you prepare me for the job interview?

Yes, we do. We will discuss all possible technical interview questions and answers during the training program so that you can prepare yourself for interview.

Q6. Do you provide hands-on real application development?

Yes, we do provide you to do hands-on real application development.

Q7. Whom do I contact, if I have more queries?

You can give us a CALL at +91 113 303 4100 OR email us at


+91 11 330 34100


Shailendra Chauhan
Author, Architect, Corporate Trainer and Microsoft MVP

Professional Speaks