What is Ionic?

Ionic is a free and open source advanced HTML5 framework library of HTML, CSS, and JavaScript components used to build highly interactive web applications. It is easy to learn - you just need to know HTML, CSS, and JavaScript - and allows your apps to display and work seamlessly on all devices.

Greens Technologies, Ionic 2 training teaches attendees how to create Ionic projects for different platforms, add interactivity, and use Angular 2 to create navigation. Attendees also learn how to test their applications and to use best practices.

Ionic training course Objectives

This course will provide you with all the knowledge necessary to start developing your own apps using Ionic, by taking a hands-on “by example” approach. It will walk you through the creation of two complete apps, as well as provide many more smaller examples illustrating various Ionic features and development practices.

Included with this course you get access to the source code for each example and for each step, as well as access to personalised help from the instructor.

• Create an ionic project using CLI
• Add different platforms (iOS, Android) to target for compiled applications
• Create interactive interfaces
• Use Angular 2 routes in application to create navigation
• Test application in the browser and the emulator or real device
• Deploy an app to ionic server
• Learn best practices

Ionic training course syllabus

1. Ionic – Powered by AngularJS

• Understanding the separation of concerns
• AngularJS components
• AngularJS directives
• AngularJS services
• AngularJS resources

2. Welcome to Ionic

• Mobile Hybrid Architecture
• What is Apache Cordova?
• What is Ionic?
• Software setup
• Install Node.js
• Install Git
• Install Bower
• Install Gulp
• Install Sublime Text
• Install Cordova and Ionic CLI
• The platform guide
• Hello Ionic
• The browser developer tools setup
• Google Chrome
• Mozilla Firefox
• The Ionic project structure
• The config.xml file
• The www folder
• Scaffolding the tabs template
• Scaffolding the side menu template
• generator-ionic
• Installing generator-ionic

3. Ionic CSS Components and Navigation

• Ionic CSS components
• The Ionic grid system
• The page structure
• Buttons
• Lists
• Cards
• Ionicons
• Form elements
• Integrating Ionic CSS components with AngularJS
• The Ionic router
• A simple two-page app

4. Ionic and SCSS

• What is Sass?
• Setting up SCSS in our Ionic project
• The manual setup
• The Ionic CLI task
• Working with Ionic SCSS
• Basic swatch
• Understanding the Ionic SCSS setup
• Using variables and mixins
• The SCSS workflow
• Building a swatch

5. Ionic Directives and Services

• Ionic directives and services
• The Ionic Platform service
• registerBackButtonAction
• The on method
• Headers and footers
• Content
• ion-content
• ion-scroll
• ion-refresher
• ion-infinite-scroll
• $ionicScrollDelegate
• Navigation
• ion-view
• Ionic view events
• ion-nav-bar
• ion-nav-buttons
• $ionicNavBarDelegate
• $ionicHistory
• Tabs and side menu
• Ionic loading
• The Action Sheet service
• Popover and Popup services
• $ionicPopup
• The ion-list and ion-item directives
• Gesture directives and services
• Utilities

6. Building a sample App

• An introduction to the sample application
• The architecture of the app
• The server architecture
• The server-side API documentation
• The client architecture
• Code on GitHub
• A demo of the sample app
• The development flow
• Setting up the server
• Building the application
• Step 1 – Scaffolding the side menu template
• Step 2 – Refactoring the template
• Refactoring the menu
• Refactoring the module name
• Adding a run method and modifying routes
• Refactoring templates
• Step 3 – Building authentication, localStorage, and the REST API factory
• The Ionic loading factory
• The localStorage factory
• The Authentication factory
• The REST API factory
• Step 4 – Creating controllers for each route and integrating with the factory
• The application controller
• The browse controller
• The book controller
• The cart controller
• The purchase controller
• Step 5 – Creating templates and integrating with the controller data
• The Login template
• The Browse template
• The Product item template
• The Shopping Cart template
• The Purchase template

7. Cordova and ngCordova

• Setting up a platform-specific SDK
• The Android setup
• The iOS setup
• Testing the setup
• Testing for Android
• Testing for iOS
• Getting started with Cordova plugins
• The Ionic plugin API
• Add a plugin
• Remove a plugin
• List added plugins
• Search plugins
• The Cordova whitelist plugin
• ngCordova
• Setting up ngCordova
• Legend
• $cordovaToast
• $cordovaDialogs
• $cordovaFlashlight
• $cordovaLocalNotification
• $cordovaGeolocation

8. Building a Messaging App

• The Ionic Chat app
• Firebase
• Setting up a Firebase account
• AngularFire
• The application architecture
• Authentication
• The application flow
• Previewing the app
• Data structure
• Cordova plugins
• Code on GitHub
• Developing the application
• Scaffolding and setting up the app
• Installing the required Cordova plugins
• Getting the Google API key
• Setting up routes and route authentication
• Setting up services/factories
• Setting up a map directive
• Setting up controllers
• Setting up templates
• Setting up SCSS
• Testing the application

9. Releasing the Ionic App

• Preparing the app for distribution
• Setting up icons and splash screens
• Updating the config.xml file
• The PhoneGap service
• Generating installers using the Cordova CLI
• Android installer
• iOS installer
• The Ionic package
• Uploading the project to Ionic cloud
• Generating the required keys