Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hybrid Apps with Angular & 
Ionic Framework 
<cihad-horuzoglu>
Cihad Horuzoğlu 
Front-end & Mobile Developer 
at CicekSepeti.com 
@cihadhoruzoglu 
http://cihadhoruzoglu.com
Do you need a mobile app?
More Platforms, More Problems
Native Apps 
● Platform specific 
● Respective development tools 
● Best performance 
● Time consuming 
● Expensive develo...
Want to support all major platforms 
even mobile web?
You need cool web technologies..
Hybrid Apps 
● Platform independent (iOS, Android etc.) 
● HTML5, CSS3 & JS 
● Limited performance 
● Quick development 
●...
Apache Cordova is a platform for building native 
mobile applications using HTML, CSS and 
JavaScript
● Battery Status 
● Camera 
● Contacts 
● Device 
● Device Orientation 
● Dialogs 
● File Transfer 
● Geolocation 
● Globa...
What is Angular JS?
Superheroic JavaScript MVW Framework. 
Angular Provides; Directives, Filters, Two way data binding, 
Services, DI & Testab...
What is Ionic?
An open source framework for developing 
hybrid mobile apps with Angular, Sass and 
Cordova
Ionic solves multiple device 
resolution issues
Routing in Ionic
ion-content with ion-list
also you need a good friend..
Chrome Developer Tools
Install Ionic & Cordova Globally 
$ npm install -g ionic cordova
Ionic Templates
$ ionic start yourProject sidemenu 
template name 
Clone demo project 
project name & folder
Add Platform, Build & Emulate 
$ ionic platform add ios 
$ ionic build ios 
$ ionic emulate ios 
$ ionic serve
Let’s build..
Q & A
Thank you. 
Image source: ionicframework.com <cihad-horuzoglu />
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
Upcoming SlideShare
Loading in …5
×

Hybrid Apps with Angular & Ionic Framework

Presentation from Istanbul Coders

Source code: https://github.com/cihadhoruzoglu/foursquareVenueSearch

Workshop video: http://youtu.be/llohkBGhH8Y

Hybrid Apps with Angular & Ionic Framework

  1. 1. Hybrid Apps with Angular & Ionic Framework <cihad-horuzoglu>
  2. 2. Cihad Horuzoğlu Front-end & Mobile Developer at CicekSepeti.com @cihadhoruzoglu http://cihadhoruzoglu.com
  3. 3. Do you need a mobile app?
  4. 4. More Platforms, More Problems
  5. 5. Native Apps ● Platform specific ● Respective development tools ● Best performance ● Time consuming ● Expensive development
  6. 6. Want to support all major platforms even mobile web?
  7. 7. You need cool web technologies..
  8. 8. Hybrid Apps ● Platform independent (iOS, Android etc.) ● HTML5, CSS3 & JS ● Limited performance ● Quick development ● Direct access to native APIs with Cordova
  9. 9. Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript
  10. 10. ● Battery Status ● Camera ● Contacts ● Device ● Device Orientation ● Dialogs ● File Transfer ● Geolocation ● Globalization ● In-App Browser ● Media Capture ● Network Information ● Splashscreen ● Statusbar ● Vibration Platforms ● Amazon Fire OS ● Android ● Bada ● Blackberry ● FirefoxOS ● iOS ● Mac OS X ● Qt ● Tizen ● Ubuntu ● WebOS ● Windows (desktop) ● Windows Phone 7 ● Windows Phone 8 ● Browser Plugins
  11. 11. What is Angular JS?
  12. 12. Superheroic JavaScript MVW Framework. Angular Provides; Directives, Filters, Two way data binding, Services, DI & Testability
  13. 13. What is Ionic?
  14. 14. An open source framework for developing hybrid mobile apps with Angular, Sass and Cordova
  15. 15. Ionic solves multiple device resolution issues
  16. 16. Routing in Ionic
  17. 17. ion-content with ion-list
  18. 18. also you need a good friend..
  19. 19. Chrome Developer Tools
  20. 20. Install Ionic & Cordova Globally $ npm install -g ionic cordova
  21. 21. Ionic Templates
  22. 22. $ ionic start yourProject sidemenu template name Clone demo project project name & folder
  23. 23. Add Platform, Build & Emulate $ ionic platform add ios $ ionic build ios $ ionic emulate ios $ ionic serve
  24. 24. Let’s build..
  25. 25. Q & A
  26. 26. Thank you. Image source: ionicframework.com <cihad-horuzoglu />

×