1. AngularJS on Mobile with
the Ionic Framework
NG-Vegas, 7 May 2015
Troy Miles

2. Or web to mobile app in 7
steps

3. Troy Miles
35+ years of development experience
Last 8 years for Kelley Blue Book in So Cal
@therockncoder
rockncoder@gmail.com

4. The web is cool now…
Libraries: jQuery, Underscore,
Frameworks: Angular, Ember, Backbone
Testing: Jasmine, Mocha, QUnit
Workflows: Gulp, Grunt
Packaging: Node/NPM, Bower

5. but, mobile looks cool too
Billions of smart phones, nearly everyone has one
The latest phones have amazing features
Android + iOS = 96.3% of the market

6. The dark side of mobile
New Languages: Objective-C/Swift, Java
Lots of frameworks to learn + more keep coming
Creating a UI is better but still painful on Android
Not cross platform

7. Why do I need Ionic?
AngularJS will run on
Cordova
But the results are not
something users will
love
It won’t look like Android
or iOS

8. Our web app
Contacts program
Angular v1.3
Bootstrap v3.3
Simple browser app without gulp/grunt

9. The steps

10. 1 - Choose an Ionic UI
blank
tab
sidemenu
(pick a color theme too)

11. 2 - Copy your base code
Copy your services
Copy your controllers

12. 3 - Switch to ui-router
Ionic uses ui-router, not ng-route
We will use LCD of functionality, aka routes not states

13. 4 - Add Ionic views
Most pages will be wrapped inside of Ionic Views
May also need to Ionic Lists

14. 5 - Take advantage of
device capabilities
Location
Camera
Audio
Etc.

15. 6 - Add Resources
Android + iOS = dozens of different icons & splash
pages
Ionic’s CLI can generate these for you

16. 7 - Deploy to the stores
Package it yourself
Use the Ionic Build Service

17. Going further
Convert a real app
Use a single code base
Implement Unit Testing

18. Resources
http://ionicframework.com/
https://angularjs.org/
http://cordova.apache.org/
http://www.idc.com/getdoc.jsp?
containerId=prUS25450615

19. Resources
Slides:
http://www.slideshare.net/rockncoder/angularjs-on-mobile-
with-the-ionic-framework
Code:
https://github.com/Rockncoder/contacts-ng
https://github.com/Rockncoder/contacts-cordova
https://github.com/Rockncoder/contacts

20. Summary
Ionic is built on top of angular and cordova
Going from web to mobile is straight forward
Mobile envy is over for Angular developers