240+ Ionic Framework Resources


240+ 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.

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. NEWUnderstanding Filters in Ionic

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
App Camp - Become a mobile developer (from your living room)

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


  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


  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


  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. NEWBuilding Real-Time, Multi-Platform Mobile Applications: Examples Using Ionic Framework and Firebase

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. NEWUsing 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

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. NEWContinuous 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

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. NEWIonic- Using Local Notifications


  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. NEWHow to create a calculator application with Ionic framework by using Ionic Creator for UI
  39. NEWBring Your Ionic App to Life: Getting Started with D3.js
  40. NEWHow To Create And Display A PDF File In Your Ionic App
  41. NEWCreate Your First Windows 10 Universal Apps With Ionic Framework (Walkthrough)

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. NEWIonic 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.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s