Hybrid Mobile Apps | Ionic & AngularJS

<Hmidi Hamdi>

+Hybrid Apps with AngularJS and Ionic

Framework

Hmidi HamdiWeb & Mobile DevlopperSoftware Engeneering @ ISSATSoFounder & Member @ IGC JSA @ JCertif Tunisia

Do you need Mobile Apps ?

More Plateforms ! More Problems

Native Apps

● Plateform specific ● Respective Devloppment Tools● Best Performance● Time Consuming● Expensive Devloppement

want to support all major plateforms even mobile web

You need cool web technologies

Hybrid Apps

● All Plateforms(iOS, Android, Windows Phone)● HTML5, CSS3 and JS● Limited Performance● Quick devlopment● Direct Access to Native APIs with Cordova.

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

PlateformsAndroid

Blackberry

FirefoxOS

iOS

Tizen

WebOS

Windows Phone 7

Windows Phone 8

PluginsBattery Status

Camera

Contacts

Device Orientation

Dialogs

File Transfer

Geolocation

Media Capture

Network Information

Splashscreen

Statusbar

Vibration

What is Angular JS

JavaScript MVW FrameworkFeatures : Directives, Filters, Two-way data

binding, Services, DI and Testability

What is Ionic

An Open source framework for developing hybrid mobile apps with Angular, Sass and

cordova

Best Friend with Angular

● UI Components are Angular Directives● Ready to work with your App

Ionicons

Lists

Complex Lits● Ng Directive● Show by swiping

Tabs

Side Menu

Slide Box

Action Sheet

Ionic Routing

Start, Build, Run and emulate

Android Building

● Install JDK .● Install Android SDK. ● Add Android SDK tools and plateform-tool to

Path variables.● Install Node JS.● Install Git.● Install Appache Ant.

Install Ionic & Cordova Globally

$ npm install -g cordova ionic

Ionic Templates

$ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu

Clone Demo Project

$ ionic start AppName TemplateName

Add Platform, Build & Emulate

$ ionic platform add ios $ ionic build ios $ ionic emulate ios $ ionic serve --lab

Let’s Build

Q/A

Thank You !!!