Android developer? Let me show you what HTML5 can do for you. We will learn how to leverage the power of HTML5, Cordova (a.k.a. phonegap) and AngularJS combined with a set of high-quality widgets especially built for mobile apps to create the next generation of multi-platform mobile apps with ease. As presented in DroidCon Tel Aviv 2014 by: Uri Shaked, GDG Tel Aviv http://il.droidcon.com

1. Building Mobile
HTML5 Apps
With Angular.JS + Ionic Framework
Uri Shaked, DroidCon Tel-Aviv

2. About the Speaker
Hi, my name is Uri!
Some facts about me:
○ Angular.JS GDE
○ I dance Salsa
○ Teach Web Technologies Course @ Technion
○ Working for WatchDox
○ Love building (and breaking) stuff
○ Creator of angular-moment (and more…)

3. Cross Platform Apps Overview
○ Native Apps / Non JS Frameworks
○ JS Frameworks (e.g. titanium)
○ Cordova / PhoneGap
○ HTML5 Apps

4. Angular.JS
○ Popular MV* Framework by Google
○ Large community, Enterprise adoption
○ Extend HTML capabilities with Directives
and two-way Data-Binding
○ Dependency Injection, Application
Architecture and Easy-to-Test code

5. Apache Cordova
○ Open Source hybrid HTML5 app platform,
originally known as “PhoneGap”
○ Large ecosystem with many plugins
○ Supports Android, iOS, Windows Mobile,
Blackberry, Tizen, Firefox OS...

6. Ionic Framework
○ Built on top of Cordova, Angular.JS
○ Mobile-app Focused
○ Provides CSS Components, Javascript
Controllers and CLI wrapper around
Cordova

7. Does this really work?
○ Yes, I have built an Android app with Ionic:
http://bit.ly/RuedaAndroid

8. What do we get?
○ Tabbed controllers
○ Complete navigation history
○ Gestures: Pull to Refresh & Swipe to delete
○ Sidebar Directive
○ Lists & Form Controls
○ Ionicons - Over 500 ready-to-use icons

9. System Configuration
Install Java, Android SDK and Ant, and add
them all to your PATH.
Important: Make sure you add both tools
and platform-tools from the Android
SDK to your PATH.

10. It’s show time!
○ npm install -g ionic cordova
○ ionic start droidcon
○ cd droidcon
○ ionic platform android
○ (start genymotion or connect your device)
○ ionic run android
That’s all!

11. Let’s add a Sidebar
○ Sidebar Controller:
http://ionicframework.com/docs/api/directive/ionSideMenus/
○ Hamburger Button:
http://ionicframework.com/docs/api/directive/menuToggle/

12. Debugging locally with Chrome
Simply run the following command:
ionic serve
It will fire up a web server on port 8100 with
livereload enabled, and open your browser
automatically.

13. Remote Debugging with Chrome
○ Connect your device
○ Go to chrome://inspect
○ Find your app instance, and click inspect
○ Kittens will mate

14. Plugin’ to Camera
○ Run the following command:
cordova plugin add org.apache.cordova.camera
○ Then call the method navigator.
camera.getPicture()
○ Even better: use ngCordova

15. That's all Folks!
I hope that you had fun and learned
something new :-)