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
89
Introduction to Ionic Framework
landish
September 18, 2015
Tweet
Share
More Decks by landish
See All by landish
Anatomy Of The Web
landish
1
180
Markdown
landish
0
150
PHPUnit
landish
0
98
Some Modern Tools for Developers
landish
0
130
Introduction to GIT
landish
0
54
Other Decks in Programming
See All in Programming
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
130
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
120
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
410
GPUを計算資源として使おう!
primenumber
1
190
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
14
5.2k
Deep Dive into ~/.claude/projects
hiragram
14
9.4k
PipeCDのプラグイン化で目指すところ
warashi
1
290
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
560
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
300
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing for Performance
lara
610
69k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Documentation Writing (for coders)
carmenintech
72
4.9k
Thoughts on Productivity
jonyablonski
69
4.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Navigating Team Friction
lara
187
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
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!