This document discusses hybrid mobile apps that can be built using Angular and the Ionic framework. Hybrid apps allow developers to build apps that can run on multiple platforms using web technologies like HTML, CSS, and JavaScript. The Ionic framework builds on Apache Cordova to provide access to native device capabilities and solve issues with supporting multiple screen resolutions. Developers can use Angular for features like data binding and services, and Ionic adds capabilities specific to building mobile apps like routing and UI components optimized for touch. The document provides instructions for setting up Ionic and Cordova and creating a basic sidemenu template project to get started developing hybrid mobile apps.

1. Hybrid Apps with Angular &
Ionic Framework
<cihad-horuzoglu>

2. Cihad Horuzoğlu
Front-end & Mobile Developer
at CicekSepeti.com
@cihadhoruzoglu
http://cihadhoruzoglu.com

3. Do you need a mobile app?

4. More Platforms, More Problems

5. Native Apps
● Platform specific
● Respective development tools
● Best performance
● Time consuming
● Expensive development

6. Want to support all major platforms
even mobile web?

7. You need cool web technologies..

8. Hybrid Apps
● Platform independent (iOS, Android etc.)
● HTML5, CSS3 & JS
● Limited performance
● Quick development
● Direct access to native APIs with Cordova

9. Apache Cordova is a platform for building native
mobile applications using HTML, CSS and
JavaScript

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. What is Angular JS?

12. Superheroic JavaScript MVW Framework.
Angular Provides; Directives, Filters, Two way data binding,
Services, DI & Testability

13. What is Ionic?

14. An open source framework for developing
hybrid mobile apps with Angular, Sass and
Cordova

17. Ionic solves multiple device
resolution issues

25. Routing in Ionic

26. ion-content with ion-list

27. also you need a good friend..

28. Chrome Developer Tools

30. Install Ionic & Cordova Globally
$ npm install -g ionic cordova

31. Ionic Templates

32. $ ionic start yourProject sidemenu
template name
Clone demo project
project name & folder

33. Add Platform, Build & Emulate
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
$ ionic serve

34. Let’s build..

35. Q & A

36. Thank you.
Image source: ionicframework.com <cihad-horuzoglu />