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