Ionic Framework One Day Training

January 17, 2015

Instructor, Troy Miles
Please install all of the following before the class
o Detailed instructions
http://therockncoder.blogspot.com/2014/10/getting-started-building-mobile-apps.html
o Genymotion
https://shop.genymotion.com/index.php?controller=order-opc
o Oracle VirtualBox
https://www.virtualbox.org/wiki/Downloads
o Vagrant
https://www.vagrantup.com/downloads.html
o The Ionic Box
http://ionicframework.com/blog/ionic-vagrant-android/
https://github.com/driftyco/ionic-box
o JetBrains WebStorm
https://www.jetbrains.com/webstorm/download/
o Google Chrome
https://www.google.com/chrome/browser/

Class Agenda

Introduction to the Ionic Framework

o Ways to build a mobile app
o Why Ionic?
Quick Reviews
o JavaScript
o AngularJS
o Ways of defining an angular controller
o Mobile UI design
Getting started with Vagrant
o Connecting to the VM
o Executing commands on the VM
o Understanding the shadow directory
The Ionic Command Line Interface - CLI
o start
o serve
o platform / plugin
o build / run / emulate
Hello Ionic
o Creating the app
o Understanding the project directories and files
o Running the app
o Ionic's theme colors
Chrome's Mobile Development Features
o Emulation
o CORS
o Debugging

App Navigation
o ui router not ng-route
o preserving state
o navigating via <a> and JavaScript
o specifying controller and context
Ionic Components
o Types of Components
o Delegate service
o Containers
o Buttons
o Cards
o Forms
o Input / Toggle / Checkbox / Radio buttons
o Ranger sliders
o Select
Headers / Footers
o default colors
o adding buttons
o sub headers
o search box
Icons
o icon basics
o changing position
o changing size
Lists
o Simple list
o List dividers
o Complex Lists
o Deleting items
o Reordering items
o Pull to refresh
o Continuous scrolling
Plugins
o Default plugins
o ngCordova
Open source libraries
o ng-maps
Tablets
o Understanding responsive design
o sidemenu
o grids
Firebase
o Firebase introductions
o Creating a firebase service
o Saving ratings
Coffee coffee!
o Overview
o Navigation
o YP API
o Lists
o Details page
o Google maps
o Ratings
Summary