Files
awesome-awesomeness/html/ionic.html
2024-04-20 19:22:54 +02:00

410 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<h1 id="awesome-ionic-awesome">Awesome Ionic <a
href="https://github.com/sindresorhus/awesome"><img
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
alt="Awesome" /></a></h1>
<p>An “awesome” list of the Ionic resources</p>
<h3 id="ionic">Ionic</h3>
<blockquote>
<p>“Ionic is the beautiful, open source front-end SDK for developing
hybrid mobile apps with web technologies.”</p>
</blockquote>
<h5 id="current-ionic-version">Current Ionic version:</h5>
<p><a href="https://badge.fury.io/js/ionic-framework"><img
src="https://badge.fury.io/js/ionic-framework.svg"
alt="npm version" /></a></p>
<h4 id="official-resources">Official Resources</h4>
<ul>
<li><a href="http://ionicframework.com/">Site</a></li>
<li><a href="http://blog.ionic.io/">Blog</a></li>
<li><a href="http://ionicframework.com/docs/v2/">Documentation</a></li>
<li><a href="http://ionicframework.com/docs/v2/getting-started/">Getting
Started Guide</a></li>
<li><a href="https://github.com/driftyco/ionic-native/">Ionic
Native</a></li>
<li><a href="http://forum.ionicframework.com/">Community Forum</a></li>
<li><a
href="http://webchat.freenode.net/?randomnick=1&amp;channels=%23ionic&amp;uio=d4">Ionic
IRC</a></li>
<li><a
href="https://www.youtube.com/channel/UChYheBnVeCfhCmqZfCUdJQw">Ionic
Youtube Channel</a></li>
<li><a href="http://showcase.ionicframework.com/">Showcase</a></li>
<li><a href="https://github.com/driftyco/ionic/">GitHub Repo</a></li>
</ul>
<h4 id="ionic-fundamentals">Ionic Fundamentals</h4>
<ul>
<li><a
href="http://www.joshmorony.com/beginners-guide-to-getting-started-with-ionic-2/">Beginners
Guide to Getting Started with Ionic</a></li>
<li><a
href="http://www.joshmorony.com/ionic-2-first-look-series-your-first-ionic-2-app-explained/">Ionic
First Look Series: Your First Ionic App Explained</a></li>
<li><a
href="http://www.joshmorony.com/how-to-convert-an-ionic-1-application-to-ionic-2/">How
to Convert an Ionic 1 Application to Ionic</a></li>
<li><a
href="http://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/">A
Simple Guide to Navigation in Ionic</a></li>
<li><a
href="http://blog.ionic.io/10-minutes-with-ionic-2-adding-pages-and-navigation/">10
Minutes with Ionic: Adding Pages and Navigation</a></li>
<li><a
href="http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/">10
Minutes with Ionic: Calling an API</a></li>
<li><a
href="http://www.gajotres.net/ionic-2-how-to-update-your-application-project-and-cli/">How
To Update Your Application Project and CLI</a></li>
<li><a
href="http://www.joshmorony.com/how-to-create-a-data-model-in-ionic-2/">How
to Create a Data Model in Ionic</a></li>
<li><a
href="http://mhartington.io/post/ionic2-external-libraries/">Ionic and
External Libraries</a></li>
<li><a
href="http://www.joshmorony.com/understanding-zones-and-change-detection-in-ionic-2-angular-2/">Understanding
Zones and Change Detection in Ionic &amp; Angular 2</a></li>
<li><a
href="http://mcgivery.com/understanding-ionic-2-pipe/">Understanding
Ionic: Pipe</a></li>
<li><a
href="http://www.joshmorony.com/how-to-manipulate-data-in-ionic-2-part-1/">How
to Manipulate Data in Ionic: Part 1</a></li>
<li><a
href="http://www.joshmorony.com/how-to-manipulate-data-in-ionic-2-part-2/">How
to Manipulate Data in Ionic: Part 2</a></li>
<li><a href="https://www.youtube.com/watch?v=A-4CLa05tp0">Filtering,
Mapping, and Reducing Arrays in Ionic</a></li>
<li><a
href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13">Build
a basic mobile app with Ionic 4</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42">Read
SMS in Ionic 4 apps</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45">Geolocation,
geocoding and reverse geocoding in Ionic 4</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/implement-google-vision-in-ionic-4/43">Google
Vision in Ionic 4 apps</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50">RTL
(right-to-left) layout in Ionic 4 apps</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/implement-ionic-4-firebase-push/34">Push
notifications in Ionic 4 apps</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/implement-google-vision-in-ionic-4/43">Google
Vision in Ionic 4 apps</a> <img src="v4.png" /></li>
</ul>
<h4 id="theming">Theming</h4>
<ul>
<li><a
href="http://www.joshmorony.com/a-guide-to-styling-an-ionic-2-application/">A
Guide to Styling an Ionic Application</a></li>
<li><a
href="http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html">Best
practice when adding FontAwesome to an ionic2 app</a></li>
<li><a
href="http://www.joshmorony.com/a-list-of-common-css-utility-attributes-in-ionic-2/">A
List of Common CSS Utility Attributes in Ionic</a></li>
<li><a href="https://devdactic.com/5-animation-packages-ionic/">5
Animation Packages You Can Immediately Use Inside Your Ionic
App</a></li>
</ul>
<h4 id="components">Components</h4>
<ul>
<li><a
href="http://www.joshmorony.com/ionic-2-how-to-create-a-sliding-delete-button-for-lists/">How
to Create a Sliding Delete Button for Lists</a></li>
<li><a
href="http://www.joshmorony.com/creating-a-sliding-introduction-component-in-ionic-2/">Creating
a Sliding Introduction Component in Ionic</a></li>
<li><a
href="http://www.joshmorony.com/how-to-create-a-custom-loading-component-in-ionic-2/">How
to Create a Custom Loading Component in Ionic</a></li>
<li><a
href="http://www.joshmorony.com/build-a-simple-progress-bar-component-in-ionic-2/">Build
a Simple Progress Bar Component in Ionic</a></li>
<li><a
href="http://www.joshmorony.com/create-a-news-feed-with-360-degree-photo-viewing-in-ionic-2/">Create
a News Feed with 360-Degree Photo Viewing in Ionic</a></li>
<li><a
href="https://www.joshmorony.com/build-a-tap-to-reveal-component-in-ionic-2/">Build
a Tap to Reveal Component in Ionic</a></li>
</ul>
<h4 id="authentication">Authentication</h4>
<ul>
<li><a
href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24">Twitter
Login in Ionic 4 App using Firebase</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25">Facebook
Login in Ionic 4 App using Firebase</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39">Google
Login in Ionic 4 App using Firebase</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37">Anonymous
Login in Ionic 4 App using Firebase</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38">Basic
Email Login in Ionic 4 App using Firebase</a> <img src="v4.png" /></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/03/add-touch-id-authentication-ionic-2-mobile-app/">Add
Touch ID Authentication To An Ionic Mobile App</a></li>
<li><a
href="http://www.gajotres.net/ionic-2-succesfull-oauth-social-login-with-firebase/">Successful
OAuth Social Login with Firebase</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/01/using-an-oauth-2-0-service-within-an-ionic-2-mobile-app/">Using
An Oauth 2.0 Service Within An Ionic Mobile App</a></li>
<li><a href="http://blog.ionic.io/ionic-2-and-auth0/">Ionic and
Auth0</a></li>
<li><a
href="http://www.gajotres.net/ionic-2-handling-a-simple-user-authorization/">Handling
a Simple User Authorization</a></li>
<li><a
href="https://auth0.com/authenticate/ionic2/wordpress">Authenticate
Ionic with WordPress</a></li>
</ul>
<h4 id="unit-testing">Unit Testing</h4>
<ul>
<li><a href="http://lathonez.github.io/2017/ionic-2-unit-testing/">Ionic
Unit Testing</a></li>
<li><a
href="http://www.joshmorony.com/how-to-unit-test-an-ionic-2-application/">How
to Unit Test an Ionic Application</a></li>
<li><a
href="https://www.joshmorony.com/test-driven-development-in-ionic-2-an-introduction-to-tdd/">Test
Driven Development in Ionic: An Introduction to TDD</a></li>
</ul>
<h4 id="ionic-native-cordova-plugins">Ionic Native / Cordova
Plugins</h4>
<ul>
<li><a
href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48">Playing
music in Ionic 4 apps</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15">How
to implement health plugin - Pedometer in Ionic 4</a> <img
src="v4.png" /></li>
<li><a
href="http://www.joshmorony.com/using-cordova-plugins-in-ionic-2-with-ionic-native/">Using
Cordova Plugins in Ionic with Ionic Native</a></li>
<li><a
href="http://www.gajotres.net/ionic-2-how-to-use-cordova-plugins/">How
to Work With Cordova Plugins</a></li>
<li><a
href="http://blog.ionic.io/10-minutes-with-ionic-2-using-the-camera-with-ionic-native/">10
Minutes with Ionic: Using the Camera with Ionic Native</a></li>
<li><a
href="http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/">How
to Use Google Maps &amp; Geolocation</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/01/determine-network-availability-in-an-ionic-2-mobile-app/">Determine
Network Availability</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/02/monetize-google-admob-ionic-2-mobile-app/">Monetize
With Google Admob In An Ionic Mobile App</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/01/show-native-toast-notifications-in-an-ionic-2-mobile-app/">Show
Native Toast Notifications In An Ionic Mobile App</a></li>
<li><a
href="http://www.gajotres.net/ionic-2-having-fun-with-cordova-geolocation-plugin/">Having
Fun With Cordova Geolocation Plugin</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2015/12/use-sqlite-in-ionic-2-instead-of-local-storage/">Use
SQLite In Ionic Instead Of Local Storage</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/01/launch-websites-with-ionic-2-using-the-inappbrowser/">Launch
Websites With Ionic Using The InAppBrowser</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/02/add-barcode-scanning-functionality-to-your-ionic-2-app/">Add
Barcode Scanning Functionality To Your Ionic App</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/03/use-google-analytics-in-an-ionic-2-android-and-ios-app/">Use
Google Analytics In An Ionic Android And iOS App</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/02/share-things-on-social-media-via-an-ionic-2-mobile-app/">Share
Things On Social Media Via An Ionic Mobile App</a></li>
<li><a
href="http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-ionic-2/">How
To Use PouchDB + SQLite For Local Storage In Ionic</a></li>
<li><a
href="http://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/">Adding
Background Geolocation to an Ionic Application</a></li>
<li><a
href="http://www.joshmorony.com/getting-familiar-with-local-notifications-in-ionic-2/">Getting
Familiar with Local Notifications in Ionic</a></li>
<li><a
href="http://www.joshmorony.com/create-a-nearby-places-list-with-google-maps-in-ionic-2-part-1/">Create
a Nearby Places List with Google Maps in Ionic Part 1</a></li>
<li><a
href="http://www.joshmorony.com/create-a-nearby-places-list-with-google-maps-in-ionic-2-part-2/">Create
a Nearby Places List with Google Maps in Ionic Part 2</a></li>
</ul>
<h4 id="payment-gateway-integrations">Payment Gateway Integrations</h4>
<ul>
<li><a
href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17">Ionic
4 Stripe Payment Integration</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16">Ionic
4 PayPal Payment Integration</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21">Ionic
4 Apple Pay Payment Integration</a> <img src="v4.png" /></li>
<li><a
href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20">Ionic
4 Razorpay Payment Integration</a> <img src="v4.png" /></li>
</ul>
<h4 id="backend-as-a-service">Backend as a Service</h4>
<ul>
<li><a
href="http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/">10
Minutes with Ionic: Calling an API</a></li>
<li><a
href="http://www.joshmorony.com/using-http-to-fetch-remote-data-from-a-server-in-ionic-2/">Using
Http to Fetch Remote Data from a Server in Ionic</a></li>
<li><a
href="http://www.gajotres.net/ionic-2-making-rest-http-requests-like-a-pro/">Making
REST HTTP Requests Like a Pro</a></li>
<li><a
href="http://www.nikola-breznjak.com/blog/ionic2/posting-data-from-ionic-2-app/">Posting
data from Ionic app to a PHP server</a></li>
<li><a
href="https://www.thepolyglotdeveloper.com/2016/01/make-http-requests-in-an-ionic-2-android-and-ios-app/">Make
HTTP Requests In An Ionic Android And iOS App</a></li>
<li><a
href="http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angularjs-ionic2">Integrating
Firebase with AngularFire2 into AngularJS &amp; Ionic2</a></li>
</ul>
<h4 id="i18n-l10n">i18n &amp; l10n</h4>
<ul>
<li><a
href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11">Internationalize
and Localize Your Ionic 4 App</a> <img src="v4.png" /></li>
<li><a
href="http://www.gajotres.net/ionic-2-internationalize-and-localize-your-app-with-angular-2/">Internationalize
and Localize Your App With Angular 2</a></li>
<li><a href="https://github.com/fkirc/attranslate">attranslate</a> -
Semi-automated translation of JSON and other resource files</li>
</ul>
<h4 id="tools">Tools</h4>
<ul>
<li><a
href="https://marketplace.visualstudio.com/items?itemName=jgw9617.ionic2-vscode">Ionic2-vscode</a></li>
<li><a href="https://github.com/akz92/vim-ionic2">Vim-ionic2</a></li>
<li><a
href="https://github.com/moduslabs/ionic/tree/master/packages/ionic-vetur">Ionic
Vetur Intellisense</a> - Vetur support for Ionic Components for tag and
attribute autocompletion</li>
</ul>
<h4 id="video-tutorials">Video Tutorials</h4>
<ul>
<li><a href="https://www.udemy.com/ionic-2-quickstart/">Ionic
Quickstart</a></li>
<li><a
href="http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/">Build
a Todo App from Scratch with Ionic</a></li>
<li><a
href="http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/">Ionic:
How to Use Google Maps &amp; Geolocation</a></li>
<li><a
href="http://courses.devdactic.com/courses/ionic-2-in-one-hour?product_id=104238">Ionic
in One Hour</a></li>
<li><a href="https://www.youtube.com/watch?v=BKFQKywl_GM">Build a Custom
Flash Card Component in Ionic</a></li>
<li><a href="https://www.youtube.com/watch?v=sXFmkdhOEVc">Hacking CSS in
Ionic</a></li>
<li><a
href="https://www.youtube.com/watch?v=JcEGTektejA&amp;list=PLYxzS__5yYQng-XnJhB21Jc7NW1OIaqct">Learn
Ionic 3 From Scratch</a></li>
</ul>
<h4 id="books">Books</h4>
<ul>
<li><a
href="https://www.joshmorony.com/building-mobile-apps-with-ionic-2/">Building
Mobile Apps with Ionic</a></li>
<li><a
href="https://www.packtpub.com/web-development/ionic-2-blueprints">Ionic
Blueprints</a></li>
<li><a
href="https://www.packtpub.com/application-development/hybrid-mobile-development-ionic">Hybrid
Mobile Development with Ionic</a></li>
</ul>
<h4 id="open-source-projects">Open Source Projects</h4>
<ul>
<li><a href="https://github.com/driftyco/ionic-conference-app">Ionic
Conference App</a></li>
<li><a
href="https://github.com/ccoenraets/ionic2-realty">IonicRealty</a></li>
<li><a href="https://github.com/ionic2blueprints/firebase-chat">Ionic
Firebase Chat App</a></li>
<li><a
href="https://github.com/ionic2blueprints/ionic2-marketcloud">Ionic
Ecommerce App</a></li>
<li><a href="https://github.com/ionic2blueprints/conference-app">Ionic
Conference App based on Lanyrd API</a></li>
<li><a
href="https://github.com/ionic2blueprints/ionic2-stockmarket">Ionic
Stock Tracking App</a></li>
<li><a href="https://github.com/ionic2blueprints/ionic2-wp-client">Ionic
Wordpress Client</a></li>
<li><a href="https://github.com/ionic2blueprints/media-player">Ionic
Media Player</a></li>
<li><a href="https://github.com/ionic2blueprints/social-app">Ionic
Social App</a></li>
<li><a href="https://github.com/thenaim/ionic-whatsapp-clone">Ionic 5
WhatsApp clone</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/thenaim/ion-tk-social-network">Ionic 5
Social Network Starter</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/aggarwalankush/ionic2-push-base">Ionic
Push Notification</a></li>
<li><a href="https://github.com/aggarwalankush/ionic2-mosum">Ionic
Weather app</a></li>
<li><a href="https://github.com/smartapant/ionic2-reddit-reader">Ionic
Reddit Reader</a></li>
<li><a href="https://github.com/yannbf/ionic2-components">Ionic Advanced
Components</a></li>
<li><a href="https://github.com/brenopolanski/aiEyes">Ionic aiEyes -
Azure Computer Vision API</a></li>
<li><a href="https://github.com/rkalis/ionic-soundboard">Ionic
Soundboard</a></li>
<li><a href="https://github.com/SKempin/ionic-country-explorer">Ionic
Country Explorer</a></li>
<li><a href="https://github.com/enappd/ionic-4-push">Firebase push
notifications in Ionic 4</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/Ionic-4-sms-receive">Receive SMS
automatically in Ionic 4</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/ionic-4-music">Playing music in
Ionic 4</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/ionic4-stripe">Ionic 4 Stripe
Payment Integration</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/ionic4-paypal">Ionic 4 PayPal
Payment Integration</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/ionic4-applepay">Ionic 4 Apple
Pay Payment Integration</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/ionic4-razorpay">Ionic 4 Razorpay
Payment Integration</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/Ionic-4-Twitter-auth">Ionic 4
Twitter login with Firebase</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/ionic4-facebookAuth">Ionic 4
Facebook login with Firebase</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/Ionic-4-google-auth">Ionic 4
Google login with Firebase</a> <img src="v4.png" /> [NEW]</li>
<li><a href="https://github.com/enappd/ionic4-i18n">Translation in Ionic
4 - Internationalization and localization</a> <img src="v4.png" />
[NEW]</li>
<li><a
href="https://store.enappd.com/product/free-chat-themes-ionic4/">Ionic 4
Free chat themes</a> <img src="v4.png" /> [NEW]</li>
</ul>
<h4 id="contribute">Contribute</h4>
<p>Contributions welcome! Read the <a
href="CONTRIBUTING.md">contribution guidelines</a> first.</p>
<h4 id="license">License</h4>
<p><a href="http://creativecommons.org/publicdomain/zero/1.0/"><img
src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
alt="CC0" /></a></p>