Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Ionic Framework
Search
landish
September 18, 2015
Programming
0
81
Introduction to Ionic Framework
landish
September 18, 2015
Tweet
Share
More Decks by landish
See All by landish
Anatomy Of The Web
landish
1
160
Markdown
landish
0
120
PHPUnit
landish
0
85
Some Modern Tools for Developers
landish
0
95
Introduction to GIT
landish
0
43
Other Decks in Programming
See All in Programming
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
160
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
180
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.1k
Goのmultiple errorsについて (2024年4月版)
syumai
1
330
Elm Form Validation
bkuhlmann
0
510
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
320
try! Swift Tokyo 初参加報告LT
hinakko2
0
210
What We Can Learn From OSS
inouehi
0
420
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
170
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
340
Featured
See All Featured
Debugging Ruby Performance
tmm1
70
11k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Building Applications with DynamoDB
mza
88
5.6k
Statistics for Hackers
jakevdp
789
220k
How to Ace a Technical Interview
jacobian
272
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Practical Orchestrator
shlominoach
181
9.7k
Typedesign – Prime Four
hannesfritz
36
2.1k
Unsuck your backbone
ammeep
662
57k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Transcript
None
IONIC Advanced HTML5 Hybrid Mobile App Framework On top of
AngularJS and ngCordova
WTF IS NGCORDOVA? CORDOVA WITH THE POWER OF ANGULARJS (
63+ extensions )
OK, BUT WTF IS CORDOVA? Apache Cordova is a platform
for building native mobile applications using HTML, CSS and JavaScript.
NGCORDOVA FEATURES OAUTH CAMERA TOUCH ID PUSH NOTIFICATIONS GEOLOCATION PROGRESS
INDICATOR
IONIC FEATURES • Performance - no jQuery • Native Focused
• Beautiful Design • Powerful CLI - I mean, really powerful ;)
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
BUT, FIRST… npm install -g cordova ionic INSTALL IONIC
IONIC RESOURCES • CSS Components • Javascript API • Custom
Icons • HTML5 Input Types
CSS COMPONENTS • Header, Footer, Content • Forms • Lists,
Cards • Tabs, Buttons • Grid • More …
JAVASCRIPT API • Action Sheet • Gestures and Events •
Sidebar Menu, Slider • Pull to Refresh, Infinite Scroll • Modal, Popup, Loading • More …
HTML5 INPUT TYPES • Email • Tel • Search •
Number • Date / Month • Password • Url ?
CUSTOM ICONS (700+) Just visit http://ionicons.com/
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)
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
THAT’S IT!