Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

IONIC Advanced HTML5 Hybrid Mobile App Framework On top of AngularJS and ngCordova

Slide 3

Slide 3 text

WTF IS NGCORDOVA? CORDOVA WITH THE POWER OF ANGULARJS ( 63+ extensions )

Slide 4

Slide 4 text

OK, BUT WTF IS CORDOVA? Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript.

Slide 5

Slide 5 text

NGCORDOVA FEATURES OAUTH CAMERA TOUCH ID PUSH NOTIFICATIONS GEOLOCATION PROGRESS INDICATOR

Slide 6

Slide 6 text

IONIC FEATURES • Performance - no jQuery • Native Focused • Beautiful Design • Powerful CLI - I mean, really powerful ;)

Slide 7

Slide 7 text

IONIC CLI COMMANDS • ionic start [appName] tabs (—no-cordova) • ionic serve (—livereload & —lab) • ionic platform [ios android] • ionic run/emulate • ionic resources (splash screen generator) • ionic setup sass • ionic upload • ionic help - the most important

Slide 8

Slide 8 text

BUT, FIRST… npm install -g cordova ionic INSTALL IONIC

Slide 9

Slide 9 text

IONIC RESOURCES • CSS Components • Javascript API • Custom Icons • HTML5 Input Types

Slide 10

Slide 10 text

CSS COMPONENTS • Header, Footer, Content • Forms • Lists, Cards • Tabs, Buttons • Grid • More …

Slide 11

Slide 11 text

JAVASCRIPT API • Action Sheet • Gestures and Events • Sidebar Menu, Slider • Pull to Refresh, Infinite Scroll • Modal, Popup, Loading • More …

Slide 12

Slide 12 text

HTML5 INPUT TYPES • Email • Tel • Search • Number • Date / Month • Password • Url ?

Slide 13

Slide 13 text

CUSTOM ICONS (700+) Just visit http://ionicons.com/

Slide 14

Slide 14 text

IONIC SERVICES - IONIC.IO • Creator - http://creator.ionic.io • View - http://view.ionic.io • Playground - http://play.ionic.io • Market - http://market.ionic.io/ (coming soon)

Slide 15

Slide 15 text

IONIC DIRECTORY STRUCTURE • /hooks - (ng)Cordova custom commands • /platforms - IOS, Android • /plugins - ngCordova plugins • /resources - Icon & Splash images • /scss - SASS stylesheet files • /www - ROOT directory • /www/lib - Bower packages

Slide 16

Slide 16 text

THAT’S IT!