Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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!