Ionic Training

Ionic Introduction

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.

What are the requirements?

  • Computer running Windows, Mac, or Linux (Mac needed to package iOS apps)
  • Knowledge of HTML, CSS, and JavaScript
  • Knowledge of AngularJS advantageous but not essential
  • Some familiarity with command line interfaces advantageous

What am I going to get from this course?

  • Over 43 lectures and 5 hours of content!
  • Develop complete mobile apps in HTML5
  • Use the Ionic CSS and JavaScript Components
  • Use Cordova plugins to access native APIs (e.g. Camera)
  • Build and run your apps in Android and iOS

What is the target audience?

  • Web developers that want to build mobile apps

Course Contents

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

 

 

info@bigdatatraining.in

http://www.bigdatatraining.in/contact/

Call – +91 97899 68765 / 044 – 42645495

Ionic Training