AngularJS on Mobile with the Ionic Framework

AngularJS on Mobile with the Ionic Framework

• 1.
  AngularJS on Mobilewith the Ionic Framework NG-Vegas, 7 May 2015 Troy Miles
• 2.
  Or web tomobile app in 7 steps
• 3.
  Troy Miles 35+ yearsof development experience Last 8 years for Kelley Blue Book in So Cal @therockncoder rockncoder@gmail.com
• 4.
  The web iscool now… Libraries: jQuery, Underscore, Frameworks: Angular, Ember, Backbone Testing: Jasmine, Mocha, QUnit Workflows: Gulp, Grunt Packaging: Node/NPM, Bower
• 5.
  but, mobile lookscool 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 sideof 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 Ineed 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 Contactsprogram Angular v1.3 Bootstrap v3.3 Simple browser app without gulp/grunt
• 9.
  The steps
• 10.
  1 - Choosean Ionic UI blank tab sidemenu (pick a color theme too)
• 11.
  2 - Copyyour base code Copy your services Copy your controllers
• 12.
  3 - Switchto ui-router Ionic uses ui-router, not ng-route We will use LCD of functionality, aka routes not states
• 13.
  4 - AddIonic views Most pages will be wrapped inside of Ionic Views May also need to Ionic Lists
• 14.
  5 - Takeadvantage of device capabilities Location Camera Audio Etc.
• 15.
  6 - AddResources Android + iOS = dozens of different icons & splash pages Ionic’s CLI can generate these for you
• 16.
  7 - Deployto the stores Package it yourself Use the Ionic Build Service
• 17.
  Going further Convert areal 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 builton top of angular and cordova Going from web to mobile is straight forward Mobile envy is over for Angular developers