Download - Ionic framework one day training
![Page 1: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/1.jpg)
Ionic FrameworkOne Day Training17 January 2015 - Irvine, CA Troy Miles
![Page 2: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/2.jpg)
Agenda
JavaScript
AngularJS
PhoneGap/Cordova
Plugins
The Ionic Framework
Debugging
ui router
YP.com
Google Maps
Making Coffee!
![Page 3: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/3.jpg)
Your clients
Want good looking, well performing mobile apps
They normally don’t care how you create them
It is usually your choice of tools to use to give the clients the results they want
![Page 4: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/4.jpg)
JavaScript
![Page 5: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/5.jpg)
Quick History of JavaScriptInitial version built in 10 days by Brendan Eich
Original name was LiveScript
Greatly influenced by a language called Scheme
Changed to please Sun Microsystems
Converted into a curly brace language
Renamed JavaScript
![Page 6: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/6.jpg)
Why JavaScript Sucks?
Its use of global variables
It has strange scoping rules
It thinks it is smarter than you
![Page 7: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/7.jpg)
Why writing good JS is hard?
Most programmers don’t bother to learn it
It is changed not embraced
The page load has protected you
![Page 8: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/8.jpg)
Why JS is beautiful?
It is a functional language, close to Lisp and Scheme than Java or C
First class functions
Dynamic objects
Loose typing
and more…
![Page 9: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/9.jpg)
Keywords
JavaScript has surprisingly few keywords
break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instance, new return, switch, this, throw, try, typeof, var, while, with
![Page 10: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/10.jpg)
Keywords not used
class, enum, export, extends, import, super, implements, interface, let, package, private, protected, public, static, yield
![Page 11: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/11.jpg)
Using keywords in variablesCan’t be used as variables or parameters
But can be used as properties
Legal uses:
a.import = “test”;
a[“import”] = “test”;
a = {import: “test”};
![Page 12: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/12.jpg)
Why the weirdness?
When the Internet was young, pages were badly coded
Both the DOM and JS interpreter tried to correct bad code
The results were less than stellar
![Page 13: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/13.jpg)
Coercion
Attempts to force two variables to be the same type
Unfortunately the results are illogical
Always use === and !==
Never use == or !=
![Page 14: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/14.jpg)
Hoisting
JavaScript is function scoped
Variables have a two step creation process: declaration and assignment
variables are always declared at the beginning of a function
![Page 15: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/15.jpg)
Function Power!
Functions are first class objects
Functions can be treated like any other object
They can make you code dynamic
![Page 16: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/16.jpg)
Anonymous function
Functions don’t need to have a name
Can help minimize global space pollution
ex.
function() {/* code goes here */ }
![Page 17: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/17.jpg)
Immediate functionsFunctions are normally executed only when called
It is possible to create a function executes itself
ex.
function superFunction(){ /* code goes here */ }();
![Page 18: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/18.jpg)
Immediately Invoked Function Expression (IIFE)
Has no name
Immediately executed
Used to create a namespaces
Use in many JS libraries
![Page 19: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/19.jpg)
IIFE (continued)
(function() { /* Nothing inside of the function can be seen on on the outside, unless we want it to */ }());
![Page 20: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/20.jpg)
Object Literals
A pair of curly braces surrounding name/value pairs
Can appear anywhere an expression can
The property’s name can be ANY string
Quotes only need when the name is not a legal variable name
![Page 21: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/21.jpg)
Object Literals
var empty = {};
var name = { “first-name”: “Alan”, “last-name”: “Turing”};
![Page 22: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/22.jpg)
Arrays vs. ObjectsArrays are not true arrays
Sort of a special kind of object literal
Both can mix types
Not the same
Arrays inherit from Array.prototype
Objects inherit from Object.prototype
![Page 23: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/23.jpg)
More on objects
JavaScript objects are always dynamic
New properties can always be assigned
There is no class in JavaScript
![Page 24: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/24.jpg)
Closure defined
In computer science, a closure is a function or reference to a function together with a referencing environment—a table storing a reference to each of the non-local variables (also called free variables) of that function.[1]
—Wikipedia
![Page 25: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/25.jpg)
A bit more comprehensible
When an inner function has a longer lifetime than its outer function and retains access to the context in which it was created
![Page 26: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/26.jpg)
Strict Mode
Functional “strict mode” used heavily
Eliminates many JavaScript silent errors
Fixes some JavaScript mistakes
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
![Page 27: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/27.jpg)
AngularJS
![Page 28: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/28.jpg)
AngularJSCreated by Miško Hevery and Adam Abrons in 2009
JavaScript MVC
106 kb production version (minimized, not gzipped)
Declarative programming for UI
Imperative programming for business logic
![Page 29: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/29.jpg)
AngularJS Key FeaturesModel View Controller (MVC)
Data Binding
HTML Templates
Dependency Injection
Deep Linking
Directives
![Page 30: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/30.jpg)
AngularJS <!DOCTYPE html><html ng-app="moduleName"> <head lang="en"> <meta charset="UTF-8"> <title>NG-Skeleton</title></head> <body><div ng-controller="aController"> </div><div ng-controller="anotherController"> </div><!-- if using jQuery it goes here --> <script src="../libs/angular.min.js"></script><!-- other libs and script files --> </body> </html>
![Page 31: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/31.jpg)
ng-app
Declares the boundary of an Angular app
The first ng-app found will be auto-bootstrapped
ng-app can optionally name a module
Can encompass the entire page <html ng-app>
Or only part of it, <div ng-app>
![Page 32: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/32.jpg)
What the Browser Does?
Loads the HTML
Parses it into a Document Object Model or DOM
The angular.js script is loaded and parse
Angular waits for the DOMContentLoaded event
AngularJS’ bootstrap code executed
![Page 33: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/33.jpg)
DOMContentLoaded vs load event
The load event fires once everything has loaded
The DOMContentLoaded event fires once the DOM has been created
DOMContentLoaded doesn’t wait for CSS, images, or iFrames to load
DOMContentLoaded fires well before load
![Page 34: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/34.jpg)
AngularJS’ Bootstrap
Bootstrap looks for the ng-app directive
There can only be one of these
The module specification is optional
The module specification tells the $injector service which defined module to load
![Page 35: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/35.jpg)
Model View Controller
Uses MVC or MVVM or MV* depends on who you ask
The goal is clear separation of concerns
The model is only concerned with data
The view presents the data to the user
The controller applies the business logic
![Page 36: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/36.jpg)
Data Binding
In Angular, binding is built into the framework
Replaces text content of HTML element with the value of the expression
{{ expression }}
<ANY ng-bind=“expression”>…</ANY>
<ANY class=“ng-bind: expression;”>…</ANY>
![Page 37: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/37.jpg)
HTML Templates
Many JavaScript MVC Frameworks use a client-side templating engine
AngularJS doesn’t
Angular uses HTML as its templating engine
No extra markup, no extra libraries
![Page 38: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/38.jpg)
Dependency InjectionA software design pattern that implements inversion of control and allows a program design to follow the dependency inversion principle
Allows a dependency to be passed to an object
Allows code to clearly state dependencies
Leads to code which is easier to debug and test
Makes it possible to minimize apps without breaking them
![Page 39: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/39.jpg)
Dependency InjectionThe DI pattern in AngularJS looks funky due to JavaScript’s shortcomings
The pattern is name of module, dot, name of provider, name of object, an array with the list of dependencies in strings and a function as the last item in the array
tempApp.controller('CurrentCtrl', ['$scope', function ($scope) { $scope.temp = 17; }]);
![Page 40: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/40.jpg)
Deep Linking
Deep Linking enables a website to restore state from a URL
URL and bookmarks are key part of the web
Early Single Page Apps lacked deep linking
They broke SEO and user expectation
![Page 41: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/41.jpg)
Directives
“The coolest feature of AngularJS” - Misko Hervey
Attach behavior to DOM elements
Can nearly turn HTML into a DSL
![Page 42: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/42.jpg)
Plain Old JavaScript ObjectsAngular uses dirty checking to keep the model and view in sync
Dirty checking runs equality checks over the data the view depends, it is a brute force method
Watch expressions are run every time data could change
Watch expression should be fast and idempotent
![Page 43: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/43.jpg)
The methods on the $scope
$watch()
$apply()
$digest()
![Page 44: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/44.jpg)
$watch()
Watches for model mutations
$watch(watched expression/function, handler, …)
Watch expression must be fast and idempotent
![Page 45: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/45.jpg)
$apply()
Called when you are transitioning from non-angular world into angular world
calls $digest
![Page 46: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/46.jpg)
$digest()
A digest is just plain old dirty checking
It works on all browsers and is totally predictable
![Page 47: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/47.jpg)
Digest Loop
Possibility of an endless loop
Will only go 10 deep before exception is thrown
NOT like a game loop
![Page 48: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/48.jpg)
Module
A collection of configuration and run blocks which get applied to the app during bootstrap
Most apps will have one module
Most 3rd party libraries will come with their own
You inject dependent modules into yours
![Page 49: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/49.jpg)
Configuration Blocks
Get executed during the provider registration and configuration phase
Only providers and constants can be injected into configuration blocks
Shortcut methods available for some common configuration blocks
![Page 50: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/50.jpg)
Configuration Shortcuts
value(‘constantName’, 123)
factory(‘factoryName’, function(){return 123;})
directive(‘directiveName’, …)
filter(‘filterName’, …)
![Page 51: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/51.jpg)
Run Blocks
Closest thing Angular has to a main method
Executed after services have been configured
Typically contains code which is hard to unit test
![Page 52: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/52.jpg)
Order of Execution
Configuration blocks
Run blocks
Directive compile functions
Controllers
Directive link functions
![Page 53: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/53.jpg)
$timeout
guaranteed to fire after current digest loop
If you use a setTimeOut, you will also need to do $apply
$timeout does this for you
![Page 54: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/54.jpg)
PhoneGap/Cordova
![Page 55: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/55.jpg)
The Brief History of Cordova
2009: 1st developed at an iPhoneDevCamp event
2009: Developers form a company, Nitobi
2011: Adobe acquires Nitobi
2011: Adobe open sources PhoneGap project to Apache
2012: Apache gives the project the name Cordova
![Page 56: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/56.jpg)
What Cordova isn’t?
A website packaged in an app
A converter which turns JavaScript into native code
![Page 57: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/57.jpg)
How Cordova differs from PhoneGap?
Cordova is an open source product
It serves as the base platform for quite a few commercial implementations
One of those is Adobe’s PhoneGap
Others are IBM Worklight, Motorola Solutions RhoMobile Suite, Intel XDK, plus more.
![Page 58: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/58.jpg)
Cordova CLI
Command Line Interface
Two types of commands, global & project
![Page 59: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/59.jpg)
Global Commands
create - creates a project
help - display help text or help for a specific command
![Page 60: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/60.jpg)
Project Commands
info
platform
plugin
prepare
compile
run
serve
build
emulate
![Page 61: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/61.jpg)
Directory structureconfig.xml - global configuration file
hooks - scripts used to customize Cordova commands
platforms - native application projects
plugins - added plugins go here
www - your app’s code
(merges) - platform specific overrides
![Page 62: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/62.jpg)
Hello Cordova World steps
1. cordova create helloapp com.rnc.helloapp
2. cd helloapp
3. cordova platform add android
4. cordova build android
5. cordova run android or cordova serve
![Page 63: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/63.jpg)
PluginsAs of version 3.0 Cordova is implemented mainly as a collection of plugins surrounding a small core
Plugins are implemented in native code and/or JavaScript
Without plugins your application can’t communicate with the device’s hardware
Over 600 plugins currently available
![Page 64: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/64.jpg)
Installing/Removing Plugins
Find plugins at: http://plugins.cordova.io/
cordova plugin add org.apache.cordova.device
cordova plugin remove org.apache.cordova.device
Two essential plugins are device & console
Plugins not available until after deviceready event
![Page 65: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/65.jpg)
Plugin Anatomy
Documentation: doc/index.md
Native code in src directory
JavaScript in www directory
![Page 66: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/66.jpg)
Using a Plugin
Remember: You must wait for the deviceready event
Read the plugin’s documentation
Implement the functionality according to docs
Best practice: Sniff for the property before use
![Page 67: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/67.jpg)
Debugging First LookTwo browsers have built-in remote debugging
For Android, Chrome is your best friend
menu -> More tools -> Inspect Devices
For iOS, Safari is your best friend
Preferences -> Advanced -> Show develop
For both the device must be connected via USB
![Page 68: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/68.jpg)
Adding Libraries
Most popular open source libraries will also work in a Cordova app
Add the library with the script tag, same as always: <script src=“js/jquery.min.js”></script>
For performance sake, place the minimized library in the www directory, don’t load from web
![Page 69: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/69.jpg)
Simple Ajax Functionality
Cordova apps not bound by HTML same origin policy
But accessible websites must be included on the whitelist
By default access is allowed to all sites, but not recommended for production
![Page 70: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/70.jpg)
Housekeeping
At some point in the app lifecycle, you may wish to update Cordova or one of the plugins
Update Cordova: sudo npm update -g cordova
Update a plugin: remove it and add it back
BE CAREFUL - Newer versions may break your app
![Page 71: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/71.jpg)
Problems with raw Cordova
No user interface
No support for HTML templates
No application framework
![Page 72: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/72.jpg)
The Ionic Framework
![Page 73: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/73.jpg)
The Ionic Framework?Combines Apache Cordova
with Google's AngularJS
along with lots custom JavaScript, HTML, and CSS3
to create purpose built mobile apps
which perform like native ones
and look beautiful
![Page 74: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/74.jpg)
Supported Devices
iOS 6+
Android 4+
Windows Phone 8+ (coming)
FireFox OS (coming)
![Page 75: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/75.jpg)
Drifty Co.
Founded in 2012 by Ben Sperry (CEO) and Max Lynch (CTO)
Based in Madison, WI
Creators of Codiqa, JetStrap, and Ionic
Raised $1 million from Arthur Ventures earlier this year
![Page 76: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/76.jpg)
Are people actually using it?
![Page 77: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/77.jpg)
Mallzee
Replaced their hand built PhoneGap app with Ionic in May
Excellent UI
![Page 78: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/78.jpg)
Songhop
The fastest way to find new music
5 star rated
iPhone only
![Page 79: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/79.jpg)
Keychain
Like Uber for trucks
iOS and Android version
Scrapped prior version built with PhoneGap
![Page 80: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/80.jpg)
SworkitCreated by Ryan Hanna alone
Featured in the Health and Fitness section of the App Store
Downloaded over 3 million times
in the App Store, Google Play and Amazon Store
![Page 81: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/81.jpg)
Modern Web Skills
HTML 5 / CSS 3 / JavaScript
Comfortable with command line tools
AngularJS
Sass (optional)
![Page 82: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/82.jpg)
PrerequisitesJava SDK 6 or 7
Android SDK + Eclipse/Android Studio
Node / NPM
Cordova
Gulp
Ionic
![Page 83: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/83.jpg)
Why do I need Node?
Node apps are built in JavaScript
JavaScript runs on all platforms
Node comes bundled with NPM, Node Package Manager
It makes installing, running, and updating tools easy
Hence Node is a popular way to ship tools
![Page 84: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/84.jpg)
Is there an easier way?
![Page 85: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/85.jpg)
The Ionic BoxInstall VirtualBox, its free and available for most platforms
Install Vagrant, its free too
Install the Ionic Box
See blog post for complete instructions:http://therockncoder.blogspot.com/2014/10/getting-started-building-mobile-apps.html
![Page 86: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/86.jpg)
Ionic and Cordova
Ionic is built on top of Cordova
It also wraps many of its commands
Commands like build, platform, plugin all directly call Cordova
It also adds its own like serve, which makes it easier to run apps in browser
![Page 87: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/87.jpg)
Create ionic app
ionic start myApp <template>
blank
tabs
sideMenu
![Page 88: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/88.jpg)
Ionicons
http://ionicons.com/
Can search from website
Can easily change size
free & open source
![Page 89: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/89.jpg)
ngCordova
Cordova has a lot of available plugins
Plugins give access to the machine functions
ngCordova "Angularizes" plugins for ready use
You are always free to write your own wrapper code
![Page 90: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/90.jpg)
What about tablets?
Ionic supports responsive design
Ionic’s grid with CSS Flexbox support
Side menu can be set auto open on wide displays
![Page 91: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/91.jpg)
Workflow
ionic serve
Google Chrome mobile emulator
iOS Simulator / Android Emulator / Genymotion
iOS / Android device
![Page 92: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/92.jpg)
Crosswalk for Android
Versions of Android before 4.4 use Android’s no named default browser which is slower and less compliant than Chrome
It also means you can’t be exactly sure how your Cordova app will perform on these phones
Crosswalk allows you to specify a version of Chrome to run in your Android Cordova app
![Page 93: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/93.jpg)
Crosswalk
You can see up to a 10x increase in HTML/CSS rendering and JavaScript performance
Your app will grow 10-15 MB in size
![Page 94: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/94.jpg)
Ways to break up an appBy file type
Files are placed into directories by their type: js, html, etc.
May be subdivided further: controllers, directives, etc
By feature
The files which make up a feature are placed into the same directories
![Page 95: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/95.jpg)
Coffee!
An ajax app which uses a third party services from YP.com for data and Google Maps for maps
For those who have taken other classes from me, this app is simply too cool to die
![Page 96: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/96.jpg)
Steps to make coffee
Make a side menu template app
Modify menu markup
Modify routes
Add listings service
Add lists
![Page 97: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/97.jpg)
Steps…
Add detail page
Add map page
Add Google Maps
Add markers to map
Make markers clickable
![Page 98: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/98.jpg)
Resourceshttp://learn.ionicframework.com/
http://ionicframework.com/
https://angularjs.org/
http://www.appiconsizes.com/
http://therockncoder.blogspot.com/
https://twitter.com/therockncoder
![Page 99: Ionic framework one day training](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a4e0611a28aba70e8b471e/html5/thumbnails/99.jpg)
Summary
Cordova is a platform which allows for the building of mobile apps using web technologies
Ionic builds on top of that by providing a good looking performance driven UI and better developer tools
Ionic uses AngularJS as its JavaScript MVC framework