260+ Ionic Framework Resources

260+ Ionic Framework Resources

posted in: Uncategorized | 47

There are many posts and articles on the Ionic Framework but sometimes it is difficult to locate exactly what you need. This list is a an attempt to create a comprehensive list of tutorials that cover as many topics as possible. I will update this list as I discover new posts and as new posts are suggested.

Don’t see what you’re looking for? Feel free to leave a comment and I’ll see if I can find something for you.

Looking for Ionic v2? Check out my Ionic Resources List for version 2.

Ionic Basics

  1. Hello World: Your First Ionic Framework App
  2. Hello Backend: Your Second Ionic Framework App
  3. Hello Modules: Your Third Ionic Framework App
  4. Hello Master Detail: Your Fourth Ionic Framework App
  5. Structure of an Ionic App
  6. Creating Views with Ionic
  7. Controllers in Ionic/Angular
  8. Make HTTP Requests In Android And iOS With Ionic Framework
  9. Ionic: Using Factories and Web Services for Dynamic Data
  10. SOAP Web Services in Angular and Ionic
  11. Modules in Ionic/Angular
  12. Promise-Based Architecture in an Ionic App
  13. Using The UI-Router To Navigate In Ionic Framework
  14. Saving Data With Ionic Framework
  15. Organising Code in an Ionic Application for Beginners
  16. Validation in Ionic Framework Apps with ngMessages
  17. Build Your First Mobile App With The Ionic Framework
  18. How To Organize The Files In Your Ionic Project
  19. How to Create Complex Layouts in Ionic
  20. Debugging Ionic Apps using Chrome Developer Tools
  21. The Definitive Ionic Starter Guide
  22. Ionic Framework | Using Touch Gestures
  23. Ionic Framework | Working With Forms And Validation
  24. Understanding Ionic View LifeCycle
  25. Monitoring Online and Offline States in an Ionic Application
  26. How To Animate Your Ionic App With Animate.css And ngAnimate
  27. AngularJS Form Validation In Your Ionic Framework App
  28. How to Create Animations with CSS in Ionic
  29. Discover the Power of Directives: Bringing an Ionic App to Life — Part 2
  30. Understanding Filters in Ionic
  31. NEWValidate Forms with Ionic Framework: Step by Step Guide!

Installation and Setup

  1. Ionic – Setup on OSx
  2. Ionic – How to setup on Windows
  3. Installing ngCordova in an Ionic Application
  4. Install Android, Cordova, and Ionic Framework in Ubuntu

Ionic Components

  1. Understanding Ionic’s Side Menu
  2. Understanding Tabs In Ionic Framework
  3. Understanding the Ionic Framework Action Sheet
  4. Understanding Ionic’s Infinite Scroll
  5. Understanding Pull to Refresh
  6. Make List Items Swipeable In Ionic Framework
  7. Using Slide Boxes and Tabs in Ionic Framework Apps
  8. Ionic Framework | Using Grid System

Ionic App Patterns

  1. Ionic: Master Detail Pattern
  2. Internationalization of an Ionic App: Multilanguage Support
  3. Internationalization and Localization with Ionic Framework and Angular Translate
  4. Add Pull to Refresh with Toast Message in Your Ionic App
  5. Creating a Feed in Ionic
  6. Make A Gallery-Like Image Grid Using Ionic Framework
  7. Making Tinder-Style Swipe Cards With Ionic Framework
  8. Swipeable Cards with the Ionic Framework
  9. How to Create a Nested Tab View in Ionic
  10. Creating an Attractive Login Screen in Ionic with Flexbox
  11. NEWBuild Multi Language App with Ionic Framework

Authentication

  1. Cookie-based Authentication in AngularJS
  2. Handle User Sign-In With Ionic Framework
  3. How To Handle User Authentication With AngularJS Inside Your Ionic App
  4. Simple login example with ionic and AngularJS
  5. How To Handle User Authentication With AngularJS Inside Your Ionic App
  6. Adding Social Login with Firebase
  7. User Authentication with Ionic and Parse, Part 1: Email Login
  8. NEWEmail Authentication with Ionic and Firebase: Full tutorial

Testing

  1. Writing Your First Unit Test with the Ionic Framework
  2. Unit Testing Your Ionic Framework App
  3. Optimize your Ionic Testing with Wallaby.js, Bard.js, and WebStorm
  4. End2end Testing Ionic collection-repeat with Protractor
  5. Ionic Framework & Protractor Tests
  6. Introduction to Automated Testing & Frameworks
  7. Unit Tests With Jasmine & Karma
  8. End-To-End Tests With Jasmine & Protractor
  9. End-to-end testing an Ionic application with Appium and Protractor

Performance

  1. How to Make High Performance PhoneGap Apps
  2. Improving the performance of your Ionic application
  3. Ultimate AngularJS and Ionic performance cheat sheet

Backend as a Service (Firebase)

  1. Sign Into Firebase With Facebook Using Ionic Framework
  2. Syncing Data With Firebase Using Ionic Framework
  3. Create a Password Management App Using Ionic Framework and Firebase
  4. Creating a Firebase Powered End to End Ionic Application
  5. Upload Camera Images To Firebase Using Ionic Framework
  6. Build a Real Time Hybrid App with Ionic & Firebase
  7. Email and Facebook Authentication with Ionic and Firebase
  8. Implementing the Master Detail Pattern in Ionic with Firebase
  9. Create a Real Time Chat App with Ionic and Firebase
  10. Building Real-Time, Multi-Platform Mobile Applications: Examples Using Ionic Framework and Firebase
  11. NEWHow to build a shopping app with Ionic Firebase
  12. NEWHow to CRUD data in Firebase using Ionic Framework

Backend as a Service (IBM MobileFirst)

  1. Working with IBM MobileFirst and the Ionic Framework
  2. Using MobileFirst HTTP Adapters with an Ionic Application
  3. Using MobileFirst SQL Adapters with an Ionic Application
  4. Using Remote Logging with Ionic and IBM MobileFirst
  5. Working with IBM MobileFirst and Ionic – Bootstrapping
  6. Developing Ionic Apps with MobileFirst 7.1
  7. Using Ionic Creator with MobileFirst 7.1

Backend as a Service (other)

  1. Use Parse Core In Your Ionic Framework Mobile Apps
  2. Syncing Data With Dropbox Using Ionic Framework
  3. Build a Hybrid Application with the Ionic Framework and Azure Mobile Services, Part 1: Configuring the Project
  4. Build a Hybrid Application with the Ionic Framework and Azure Mobile Services, Part 2: Creating the User Interface
  5. Build a Hybrid Application with the Ionic Framework and Azure Mobile Services, Part 3: Wiring Up The Backend
  6. Sync Data Using PouchDB In Your Ionic Framework App
  7. How To Use PouchDB + SQLite For Local Storage In Your Ionic App
  8. Using Couchbase in Your Ionic Framework Application Part 1
  9. Build a Hybrid Application with the Ionic Framework and Windows Azure Mobile Services
  10. NEWBuilding an Ionic Todo App with Backend and Database using Backand
  11. NEWCross-Platform Apps with Ionic and Stamplay
  12. NEWSend Emails In Ionic Framework Via The Rackspace Mailgun API
  13. NEWHow to use Exis to Create a Chat App in Ionic

Ionic Tooling

  1. Using the Ionic Framework with Grunt and PhoneGap Build
  2. Minifying Your App’s Source Code
  3. Debugging AngularJS Apps from the Console
  4. Use The Ionic CLI To Integrate Crosswalk Into Your Project
  5. Ionic adds a new State feature
  6. Automatically Add JS/CSS Files to Your Ionic Projects
  7. Ionic – The Ionicbox and How To Use It
  8. Ionic – Using Android x86 Virtual Machine Instead of Emulator
  9. Production ready apps with Ionic Framework
  10. How to Minify an Ionic Application for Production
  11. Getting Started with the Ionic Command Line Interface (CLI)
  12. The Difference Between Building with PhoneGap and PhoneGap Build
  13. How to Minify an Ionic Application using Gulp and Cordova Hooks
  14. Inspect Your Ionic App With ng-inspector
  15. Mobile Hybrid Apps with VS Code and Ionic
  16. How To Debug The White Screen Of Death In Your Ionic App
  17. Using Visual Studio Code with Ionic
  18. Debugging Your Apache Cordova iOS App With Safari
  19. StrongLoop, Ionic, and IBM Bluemix
  20. Adding localization to your Ionic application with IBM Bluemix
  21. Continuous Integration with Ionic Framework using Visual Studio Online – From Check In to Device

Ionic Backend Services (ionic.io)

  1. An early look at Ionic Push
  2. Push It Real Good with Ionic
  3. Easy Ionic Push Notifications With Ionic.io In 15 Minutes
  4. How To Debug The White Screen Of Death In Your Ionic App
  5. Getting Visual Studio Cordova Tooling Working With The Ionic Framework
  6. Testing Ionic Push Webhooks with IBM Bluemix
  7. Ionic View in 4 steps
  8. Sending Out Android Push Notification with Ionic.io to Your Users
  9. NEWThe Complete Ionic Push Notifications Guide

Ionic Ions

  1. Ionic showWhen directive
  2. showWhenState: Conditional Elements In Ionic by State
  3. Dividing a List Automatically in Ionic Framework
  4. Preload images in Ionic using $ImageCacheFactory
  5. Adding Frosted Glass Effect to your Ionic Framework App
  6. Shrinking Headers Like Facebook With the Ionic Framework
  7. Must-have plugins for Ionic Framework
Mobile Development for Web Developers

ngCordova/Cordova Plugins

  1. Using Custom URL Schemes In Your Ionic Framework App
  2. OAuth with Ionic and ngCordova
  3. Print Data To Paper Or PDF Using Ionic Framework
  4. Create A Todo List Mobile App Using Ionic Framework
  5. Get Available Free Disk Space Using Apache Cordova
  6. Using The Native Device Calendar In Ionic Framework
  7. Make Your Own Facebook Mobile App With Ionic Framework
  8. Prompt User To Rate Ionic Framework Mobile App
  9. Add ‘Rate my App’ in your ionic app to increase the number of ratings in the app store
  10. Use Native Device Dialogs In Ionic Framework Mobile Apps
  11. Deploy Ionic Framework App With Pre-Filled SQLite DB
  12. Access The Native Device Clipboard In Ionic Framework
  13. Upload Files To A Remote Server Using Ionic Framework
  14. Open Dynamic Links Using The Cordova InAppBrowser
  15. Create, Delete, And Search Contacts In Ionic Framework
  16. Playing Audio In Your Android And iOS Ionic Framework App
  17. Use SQLite Instead of Local Storage In Ionic Framework
  18. Find The Application Version In Your Ionic Framework App
  19. Implement Social Media Sharing With Ionic Framework
  20. Implement Google Maps Using Ionic Framework
  21. Displaying the Twitter Feed within Your Ionic App
  22. Use The Android And iOS Camera With Ionic Framework
  23. Show Native Toast Notifications Using Ionic Framework
  24. Implement A Barcode Scanner Using Ionic Framework
  25. Manage Files In Android And iOS Using Ionic Framework
  26. Handling Apache Cordova Events With Ionic Framework
  27. Making iOS In-App Purchases With Ionic Framework
  28. Making Android In-App Purchases With Ionic Framework
  29. Create an RSS Reader Using AngularJS and Ionic Framework
  30. Add A Splash Screen To An Ionic Framework Project
  31. Polish Your App Launch with Cordova Splashscreen Plugin
  32. Send Email from Android and iOS with Ionic Framework
  33. Using An Oauth 2.0 Service With Ionic Framework
  34. Launch External URLs with Ionic Framework
  35. Using Google Analytics With IonicFramework
  36. Using Admob With IonicFramework
  37. Check Network Connection With Ionic Framework
  38. Placing Phone Calls In Hybrid Apps
  39. How To Make A HealthKit App With Ionic and ngCordoa
  40. Using Local Notifications In Your Ionic Framework App
  41. Adding Gamecenter Support to your Ionic App
  42. Making a Signature Drawpad with Ionic
  43. Making a Lock Pattern Login with Ionic and AngularJS
  44. Support iOS touchID in your ionic app
  45. Creating a Realtime Image Sharing App With Ionic and Socket.io
  46. Store Camera Photos Permanently Using PhoneGap, Ionic & ngCordova
  47. Chaining multiple Cordova File Transfers with ngCordova
  48. Selecting multiple images in a PhoneGap/Cordova app
  49. Create A File Browser Using Ionic Framework
  50. Whitelist External Resources For Use In Ionic Framework
  51. Modify The Badge Number Of An Ionic Framework App
  52. Useful Cordova Plugins For Your Ionic Application & Examples
  53. Using A Pin Dialog In Your Ionic Framework Mobile App
  54. Monitor Device Battery Status Using Ionic Framework
  55. Build an iOS app with Push Notifications using Ionic Framework
  56. The Complete Guide To Images With Ionic
  57. Add Touch ID Authentication To Your Ionic Framework App
  58. Using Cordova File Transfer Plugin With Ionic Framework
  59. Changing & Locking Screen Orientation In Ionic Application
  60. Using Google AdMob in Your Android Ionic Application
  61. Handling Native View Animations With Ionic Framework
  62. Using Cordova Geoloacation API with Google Maps in Ionic Framework
  63. Integrating the Calendar into your Ionic App
  64. Support iBeacons In Your Ionic Framework Mobile App
  65. How To Add Sound Effects To Your Ionic App With Native Audio
  66. How To Set Up Quick Actions With 3D Touch For Your Ionic App
  67. Ionic- Using Local Notifications
  68. NEWCheck network information change with Ionic framework
  69. NEWAdding AdMob to Ionic framework application step by step
  70. NEWSpeaking with Cordova – Text To Speech and Voice Recognition using the Ionic Framework

Miscellaneous

  1. Adding Background Images To Ionic Framework Apps
  2. Create A Complex Calculator App Using Ionic Framework
  3. Embed Video In Your iOS And Android Ionic Framework App
  4. Add Pin Code Unlock To Your IonicFramework App
  5. Trigger Pull To Refresh In Ionic Framework Apps
  6. Learning the Ionic Framework as a Sencha Touch Developer
  7. Animations For Your Ionic App with Move.js
  8. Building an Ionic hybrid mobile app with TypeScript
  9. Ionic SocketIO Chat
  10. Switching from native iOS to Ionic: Why Hybrid doesn’t suck (anymore)
  11. Using the Web Audio API for precision audio in Ionic
  12. Using Device Grade in Ionic Framework Apps
  13. Tracking and notifying geolocation status with Ionic
  14. How To Add A Search Bar In The Header On Ionic
  15. How To Create An Advanced Ionic Gallery with Image Zooming
  16. How To Easily Use The Twitter REST Api With AngularJS
  17. Using the Web Audio API for precision audio in Ionic
  18. The Best Looking Ionic Framework Themes
  19. Using Google Maps With Ionic Framework
  20. A Comprehensive List Of Ionic Starter Apps
  21. Integrating Google Maps with an Ionic Application
  22. Using Views Events To Create JavaScript Pure Ionic Splash Screen
  23. Ionic Framework | Get Page Height & Width
  24. Material Design for Ionic
  25. Using Charts In Your Ionic Framework Mobile App
  26. Ionic Framework | Handling Android Back Button Like a Pro
  27. Working around Ionic’s cached views
  28. 15 Great Inspirational UI Theme Designs For Ionic Framework
  29. Intro to ECMAScript 6 and Angular 2 for Ionic Developers
  30. Why is The .dot Notation Important in Ionic Framework?
  31. Building a Simple Spotify Player with Ionic
  32. Modular AngularJS and Ionic architecture: a first step towards AngularJS 2
  33. How To Use LokiJS For Local Storage In Your Ionic App
  34. Use Font Awesome Glyph Icons With Ionic Framework
  35. 4 Ways to Make Your Ionic App Feel Native
  36. Build a WhatsApp clone with Meteor and Ionic – Meteor Platform version
  37. Modifying CSS Library Defaults in Ionic
  38. How to create a calculator application with Ionic framework by using Ionic Creator for UI
  39. Bring Your Ionic App to Life: Getting Started with D3.js
  40. How To Create And Display A PDF File In Your Ionic App
  41. Create Your First Windows 10 Universal Apps With Ionic Framework (Walkthrough)
  42. NEWPosting data from Ionic app to a PHP server
  43. NEWCreate a Weather and News Reader App with Ionic and Drupal

Ionic Courses

  1. AppCamp (FREE)
  2. Mobile Development for Web Developers ($29/$49)
  3. Ionic Framework 101: A Quickstart to Building Mobile Apps ($50 $45)
  4. Ionic by Doing: Create Mobile Apps with HTML5 and Javascript ($57)
My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.

47 Responses

  1. Wew! I forgot how many posts I had made on Ionic 🙂

  2. Excellent post, thanks for putting it together.

  3. It might be helpful in your list of tools for Ionic: Build mobile Cordova/PhoneGap apps quickly with the tools you love: Yeoman, Gulp, Bower, AngularJS, Ionic & of course Cordova. All in one sexy generator https://github.com/mwaylabs/generator-m

  4. Excellent ! Thanks

  5. thanks a lot for this collection,

  6. Shaun Squires

    Wow thanks for the effort! Great list of Ionic resources

  7. Hey Andrew, thanks for taking the time to curate this list and set it up, awesome! 🙂 As a side-note, I think this type of list would be much more suited to an “awesome list” on Github: https://github.com/sindresorhus/awesome
    If nothing else, it would make contributions and changelogs much easier!

  8. This post is gold!

  9. Good Tutorial for Cordova

  10. Andrew, this is AWESOME!! cant thank you enough for your time and effort to put this together!!! I was having a terrible time trying to get my head around MEAN specially Angular.. I come from php for backend and regular HTML, JS developing. Last year I took a chance with JqueryMobile / Backbone and I loved them together but when I started with Angular, a few weeks back, I got into despair.. really!!!! Thats when I found Ionic and decided to give it a try!! Anyway, thank you sooooooo much, again! Cheers!!!

  11. Thanks for this awesome resource, it has helped me a lot in learning angular and ionic. Especially your beginner tutorials have helped me a lot to get the basics. So yes, thank you again, you rock! 🙂

    btw. have you seen this? http://ionicmaterial.com/, it’s a ‘material design’ style addon for ionic.
    I haven’t tried it yet, I’m going to wait ’till I get the logic in my app all working. but it looks great, maybe it’s something to put in the misc. section.

  12. Thank you for this great resource

  13. Gold mine for ionic & cordova

  14. Rafael Valle

    Thanks you for this post.

  15. dragangaic

    Thank you for sharing links to my blog, I’ve just returned a favor by pointing several of my articles back to you. (gajotres.net)

  16. Thank you ! that’s great

  17. great resource 🙂 Gold!!! Thanks a lot 🙂

  18. Worth bookmark!
    Thanks for bringing all resources under one roof.

  19. Hi Andrew, great post!
    You might consider adding http://www.ionicthemes.com it is a marketplace for high quality Ionic Framework themes and components and also http://www.ionicthemes.com/learn our learn section.
    Thanks a lot!

  20. hyper2kFlorian

    Hi Andrew,
    thank you very much for this post. I am a huge fan of your collection which helped me quite a lot. There is one thing which I am looking for since quite a while, but somehow i am not comfortable with what’s there. Do you have a resource about how to play videos that are stored inside an ionic app on iOS and Android? I know it’s a painful topic due to issues with the html5 video tag, but there must be some state of the art way to do this.

    Thanks a lot!

    • IS there something specific you are looking for? There are lots of general articles about playing videos with the HTML5

      • hyper2kFlorian

        Hi Andrew. Yes, I am specifically looking for a way to implement inline video playback of local stored videos that works for iOS and Android. Do you have an idea which resource i could check for that?
        Thanks for your support.

  21. Thank you so much 🙂

  22. Thank you for this post. Very useful for me that I am Ionic starter.
    Just let you know that 9. “Rate my App” plugin is not working for Android. Rate button is not shown because there is no room for the 3 buttons because they are displayed using horizontal layout instead of vertical like iOS. Apparently the project is no longer maintained because of the lack of support for open issues.

  23. thanks

  24. this post is amazing !!

  25. Gracias desde Honduras¡¡

  26. Customized Clouds

    WOW, what a comprehensive list of cool Ionic stuff, thanks for this!

  27. Great work,,,Thanks alot

  28. thanks and god bless you nic

  29. thank you very much for this! well done!

Leave a Reply