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
130
PHPUnit
landish
0
91
Some Modern Tools for Developers
landish
0
120
Introduction to GIT
landish
0
48
Other Decks in Programming
See All in Programming
Open source software: how to live long and go far
gaelvaroquaux
0
620
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Formの複雑さに立ち向かう
bmthd
1
720
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Side Projects
sachag
452
42k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Being A Developer After 40
akosma
89
590k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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!