angularjs on mobile with the ionic framework
TRANSCRIPT
![Page 1: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/1.jpg)
AngularJS on Mobile with the Ionic FrameworkNG-Vegas, 7 May 2015 Troy Miles
![Page 2: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/2.jpg)
Or web to mobile app in 7 steps
![Page 3: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/3.jpg)
Troy Miles
35+ years of development experience
Last 8 years for Kelley Blue Book in So Cal
@therockncoder
![Page 4: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/4.jpg)
The web is cool now…
Libraries: jQuery, Underscore,
Frameworks: Angular, Ember, Backbone
Testing: Jasmine, Mocha, QUnit
Workflows: Gulp, Grunt
Packaging: Node/NPM, Bower
![Page 5: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/5.jpg)
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
![Page 6: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/6.jpg)
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
![Page 7: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/7.jpg)
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
![Page 8: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/8.jpg)
Our web app
Contacts program
Angular v1.3
Bootstrap v3.3
Simple browser app without gulp/grunt
![Page 9: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/9.jpg)
The steps
![Page 10: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/10.jpg)
1 - Choose an Ionic UI
blank
tab
sidemenu
(pick a color theme too)
![Page 11: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/11.jpg)
2 - Copy your base code
Copy your services
Copy your controllers
![Page 12: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/12.jpg)
3 - Switch to ui-router
Ionic uses ui-router, not ng-route
We will use LCD of functionality, aka routes not states
![Page 13: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/13.jpg)
4 - Add Ionic views
Most pages will be wrapped inside of Ionic Views
May also need to Ionic Lists
![Page 14: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/14.jpg)
5 - Take advantage of device capabilities
Location
Camera
Audio
Etc.
![Page 15: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/15.jpg)
6 - Add Resources
Android + iOS = dozens of different icons & splash pages
Ionic’s CLI can generate these for you
![Page 16: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/16.jpg)
7 - Deploy to the stores
Package it yourself
Use the Ionic Build Service
![Page 17: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/17.jpg)
Going further
Convert a real app
Use a single code base
Implement Unit Testing
![Page 18: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/18.jpg)
Resources
http://ionicframework.com/
https://angularjs.org/
http://cordova.apache.org/
http://www.idc.com/getdoc.jsp?containerId=prUS25450615
![Page 19: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/19.jpg)
ResourcesSlides:
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
![Page 20: AngularJS on Mobile with the Ionic Framework](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a7882a1a28ab84188b486e/html5/thumbnails/20.jpg)
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