Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | droidcontlv |
View: | 106 times |
Download: | 2 times |
Building Mobile HTML5 AppsWith Angular.JS + Ionic Framework
Uri Shaked, DroidCon Tel-Aviv
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…)
Cross Platform Apps Overview
○ Native Apps / Non JS Frameworks
○ JS Frameworks (e.g. titanium)
○ Cordova / PhoneGap
○ HTML5 Apps
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
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...
Ionic Framework
○ Built on top of Cordova, Angular.JS
○ Mobile-app Focused
○ Provides CSS Components, Javascript
Controllers and CLI wrapper around
Cordova
Does this really work?
○ Yes, I have built an Android app with Ionic:
http://bit.ly/RuedaAndroid
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
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.
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 androidThat’s all!
Let’s add a Sidebar
○ Sidebar Controller:http://ionicframework.com/docs/api/directive/ionSideMenus/
○ Hamburger Button:http://ionicframework.com/docs/api/directive/menuToggle/
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.
Remote Debugging with Chrome
○ Connect your device
○ Go to chrome://inspect
○ Find your app instance, and click inspect
○ Kittens will mate
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
That's all Folks!
I hope that you had fun and learned
something new :-)