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
83
Introduction to Ionic Framework
landish
September 18, 2015
Tweet
Share
More Decks by landish
See All by landish
Anatomy Of The Web
landish
1
170
Markdown
landish
0
120
PHPUnit
landish
0
88
Some Modern Tools for Developers
landish
0
110
Introduction to GIT
landish
0
46
Other Decks in Programming
See All in Programming
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
API Platform for Laravel
dunglas
1
460
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
2024 컴포즈 정원사
jisungbin
0
150
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
830
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
3
830
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
今インフラ技術をイチから学び直すなら
yuhta28
1
140
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
508
110k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Rails Girls Zürich Keynote
gr2m
93
13k
Designing with Data
zakiwarfel
98
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
The Cult of Friendly URLs
andyhume
76
6k
Bash Introduction
62gerente
608
210k
Become a Pro
speakerdeck
PRO
22
4.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
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!