hybrid apps with angular & ionic framework

Hybrid Apps with Angular & Ionic Framework

<cihad-horuzoglu>

Cihad Horuzoğlu

@cihadhoruzoglu

Front-end & Mobile Developer at CicekSepeti.com

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 development

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● Direct access to native APIs with Cordova

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● 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

What is Angular JS?

Superheroic JavaScript MVW Framework.

Angular Provides; Directives, Filters, Two way data binding, Services, DI & Testability

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

template name

$ ionic start yourProject sidemenu

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.

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