Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/alxwndr/ionic-framework-resources

🎓 📚 💙 A free collaborative list of awesome Ionic Framework resources
https://github.com/alxwndr/ionic-framework-resources

angular firebase ionic ionic-framework ionic2 resources

Last synced: 9 months ago
JSON representation

🎓 📚 💙 A free collaborative list of awesome Ionic Framework resources

Awesome Lists containing this project

README 

          
# Ionic Framework Resources  :computer:














A free collaborative list of awesome Ionic Framework resources.

This list is a an attempt to create a comprehensive list of tutorials that cover as many topics as possible for Ionic version 2.

I will update this list as I discover new posts and as new posts are suggested.



### Developer pages

* http://ionicframework.com

* https://apps.ionic.io

* http://creator.ionic.io



### ngCordova

* http://ngcordova.com



### Angular Links

* https://material.angularjs.org/latest/#



### The best Ionic blogs

* http://www.joshmorony.com/category/ionic-tutorials

* http://blog.ionic.io/

* https://blog.nraboy.com/?s=ionic&submit=Search



Ionic Basics


    

  1. Understanding Ionic 2: Class
    2. 

  2. Understanding Ionic 2: Imports
    3. 

  3. Understanding Ionic 2: @App
    4. 

  4. Understanding Ionic 2: @Page
    5. 

  5. Understanding Ionic 2: @Pipe
    6. 

  6. Understanding Ionic 2: Navigation with NavController
    7. 

  7. 

    NEW Understanding Ionic 2: @Pipe

    8. 

  8. Ionic 2 First Look Series: New Angular 2 Concepts & Syntax
    9. 

  9. Ionic 2 First Look Series: Your First Ionic 2 App Explained
    10. 

  10. How to Use Pipes to Manipulate Data in Ionic 2
    11. 

  11. How to Create a Directive in Ionic 2 – Parallax Header
    12. 

  12. Navigate Between Pages In An Ionic 2 Android And iOS App
    13. 

  13. A Page Anatomy Part 1 – The Root Component
    14. 

  14. A Page Anatomy Part 2 – Page Component
    15. 

  15. Tutorial | Let’s Create Our First Application
    16. 

  16. Beginners Guide to Getting Started with Ionic 2
    17. 

  17. A Simple Guide to Navigation in Ionic 2
    18. 

  18. A Guide to Styling an Ionic 2 Application
    19. 

  19. How To Create And Validate Forms
    20. 

  20. Sharing Data Between Pages/Components
    21. 

  21. Build Your First Mobile App With Ionic 2 & Angular 2
    22. 

  22. 

    NEW 10 Minutes with Ionic 2: Hello World

    23. 

  23. 

    NEW 10 Minutes with Ionic 2: Adding Pages and Navigation

    24. 



Installation and Setup


    

  1. Installation Guide
    2. 



HTTP Requests to Backends, Webservices, APIs, etc


    

  1. Making REST HTTP Requests Like a Pro
    2. 

  2. Posting data from Ionic 2 app to a PHP server
    3. 

  3. Using Http to Fetch Remote Data from a Server in Ionic 2
    4. 

  4. Make HTTP Requests In An Ionic 2 Android And iOS App
    5. 

  5. 

    NEW 10 Minutes with Ionic 2: Calling an API

    6. 



Ionic Components


    

  1. Ionic 2: How to Create a Sliding Delete Button for Lists
    2. 

  2. 

    NEW An In Depth Look at the Grid System in Ionic 2

    3. 



Ionic App Patterns


    

  1. Creating a Sliding Introduction Component in Ionic 2
    2. 



Authentication


    

  1. Handling a Simple User Authorization
    2. 

  2. Using An Oauth 2.0 Service Within An Ionic 2 Mobile App
    3. 

  3. Use ng2-cordova-oauth For All Your Ionic 2 Oauth Needs
    4. 

  4. Successful OAuth Social Login with Firebase
    5. 



Performance


    

  1. 

    NEW Boosting Scroll Performance in Ionic 2

    2. 



Backend as a Service


    

  1. 

    NEW Syncing Data with PouchDB and Cloudant in Ionic 2

    2. 

  2. 

    NEW Send Emails In An Ionic 2 App Via The Rackspace Mailgun API

    3. 

  3. 

    NEW How To Use PouchDB + SQLite For Local Storage In Ionic 2

    4. 



Ionic Tooling


    

  1. How To Update Your Application Project and CLI
    2. 



ngCordova/Cordova Plugins


    

  1. Ionic 2: How to Use Google Maps & Geolocation
    2. 

  2. Use SQLite In Ionic 2 Instead Of Local Storage
    3. 

  3. Determine Network Availability In An Ionic 2 Mobile App
    4. 

  4. Show Native Toast Notifications In An Ionic 2 Mobile App
    5. 

  5. Launch Websites With Ionic 2 Using The InAppBrowser
    6. 

  6. Monetize With Google Admob In An Ionic 2 Mobile App
    7. 

  7. Having Fun With Cordova Geolocation Plugin
    8. 

  8. How to Work With Cordova Plugins
    9. 

  9. 

    NEW 10 Minutes with Ionic 2: Using the Camera with Ionic Native

    10. 

  10. 

    NEW Using Cordova Plugins in Ionic 2 with Ionic Native

    11. 

  11. 

    NEW Adding Background Geolocation to an Ionic 2 Application

    12. 

  12. 

    NEW Use The Device Camera In An Ionic 2 Android And iOS App

    13. 

  13. 

    NEW Add Touch ID Authentication To An Ionic 2 Mobile App

    14. 

  14. 

    NEW Use Google Analytics In An Ionic 2 Android And iOS App

    15. 

  15. 

    NEW Add Barcode Scanning Functionality To Your Ionic 2 App

    16. 

  16. 

    NEW Share Things On Social Media Via An Ionic 2 Mobile App

    17. 



Miscellaneous


    

  1. Build a Todo App from Scratch with Ionic 2
    2. 

  2. How to Convert an Ionic 1 Application to Ionic 2
    3. 

  3. Creating a Real Time Chat Application with Ionic 2 and Socket.io
    4. 

  4. Creating an Advanced Google Maps Component in Ionic 2
    5. 

  5. Internationalize and Localize Your App With Angular 2
    6. 

  6. Integrating Google Maps
    7. 

  7. 

    NEW Integrating Ionic 2 with the Dropbox API

    8. 

  8. 

    NEW Use Font Awesome Icons In Your Ionic 2 Android And iOS App

    9. 



Courses and Ebooks


    

  1. 

    NEW Building Mobile Apps with Ionic 2 ($29/$59/$79)
    2. 




# Tutorials



#### Video Tutorials



- [Ionic 2 Quickstart](https://www.udemy.com/ionic-2-quickstart/) ![](ionic.png)

- [Build a Todo App from Scratch with Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/) ![](ionic.png)

- [Ionic 2: How to Use Google Maps & Geolocation](http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/) ![](ionic.png)

- [Ionic 2 in One Hour](http://courses.devdactic.com/courses/ionic-2-in-one-hour?product_id=104238) ![](ionic.png)

- [Build a Custom Flash Card Component in Ionic 2](https://www.youtube.com/watch?v=BKFQKywl_GM) ![](ionic.png)

- [Hacking CSS in Ionic 2](https://www.youtube.com/watch?v=sXFmkdhOEVc) ![](ionic.png)

- [Learn Ionic 3 From Scratch](https://www.youtube.com/watch?v=JcEGTektejA&list=PLYxzS__5yYQng-XnJhB21Jc7NW1OIaqct) ![](ionic.png)



### Basics



- [Build a complete mobile app with Ionic 3](https://ionicthemes.com/tutorials/about/building-a-complete-mobile-app-with-ionic-3) ![](ionic.png)

- [Ionic Application Structure](https://ionicthemes.com/tutorials/about/ionic-application-structure) ![](ionic.png)

- [Setup your development environment to build Ionic apps](https://ionicthemes.com/tutorials/about/setup-your-dev-environment-to-build-ionic-apps) ![](ionic.png)

- [Beginners Guide to Getting Started with Ionic 2](http://www.joshmorony.com/beginners-guide-to-getting-started-with-ionic-2/) ![](ionic.png)

- [Ionic 2 First Look Series: Your First Ionic 2 App Explained](http://www.joshmorony.com/ionic-2-first-look-series-your-first-ionic-2-app-explained/) ![](ionic.png)

- [How to Convert an Ionic 1 Application to Ionic 2](http://www.joshmorony.com/how-to-convert-an-ionic-1-application-to-ionic-2/) ![](ionic.png)

- [A Simple Guide to Navigation in Ionic 2](http://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/) ![](ionic.png)

- [10 Minutes with Ionic 2: Adding Pages and Navigation](http://blog.ionic.io/10-minutes-with-ionic-2-adding-pages-and-navigation/) ![](ionic.png)

- [10 Minutes with Ionic 2: Calling an API](http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/) ![](ionic.png)

- [How To Update Your Application Project and CLI](http://www.gajotres.net/ionic-2-how-to-update-your-application-project-and-cli/) ![](ionic.png)

- [How to Create a Data Model in Ionic 2](http://www.joshmorony.com/how-to-create-a-data-model-in-ionic-2/) ![](ionic.png)

- [Ionic 2 and External Libraries](http://mhartington.io/post/ionic2-external-libraries/) ![](ionic.png)

- [Understanding Zones and Change Detection](http://www.joshmorony.com/understanding-zones-and-change-detection-in-ionic-2-angular-2/) ![](ionic.png)

- [Understanding Ionic 2: Pipe](http://mcgivery.com/understanding-ionic-2-pipe/) ![](ionic.png)

- [How to Manipulate Data in Ionic 2: Part 1](http://www.joshmorony.com/how-to-manipulate-data-in-ionic-2-part-1/) ![](ionic.png)

- [How to Manipulate Data in Ionic 2: Part 2](http://www.joshmorony.com/how-to-manipulate-data-in-ionic-2-part-2/) ![](ionic.png)

- [Filtering, Mapping, and Reducing Arrays in Ionic 2](https://www.youtube.com/watch?v=A-4CLa05tp0) ![](ionic.png)



#### Theming



- [A Guide to Styling an Ionic 2 Application](http://www.joshmorony.com/a-guide-to-styling-an-ionic-2-application/) ![](ionic.png)

- [Best practice when adding FontAwesome to an ionic2 app](http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html) ![](ionic.png)

- [A List of Common CSS Utility Attributes in Ionic 2](http://www.joshmorony.com/a-list-of-common-css-utility-attributes-in-ionic-2/) ![](ionic.png)



#### Components



- [Ionic and Wordpress Integration using Wordpress REST API](https://ionicthemes.com/tutorials/about/ionic-wordpress-integration) ![](ionic.png)

- [Add Google Maps, Places, and Geolocation to an Ionic 3 App](https://ionicthemes.com/tutorials/about/ionic-2-google-maps-google-places-geolocation) ![](ionic.png)

- [How to Create a Sliding Delete Button for Lists](http://www.joshmorony.com/ionic-2-how-to-create-a-sliding-delete-button-for-lists/) ![](ionic.png)

- [Creating a Sliding Introduction Component in Ionic 2](http://www.joshmorony.com/creating-a-sliding-introduction-component-in-ionic-2/) ![](ionic.png)

- [How to Create a Custom Loading Component in Ionic 2](http://www.joshmorony.com/how-to-create-a-custom-loading-component-in-ionic-2/) ![](ionic.png)

- [Build a Simple Progress Bar Component in Ionic 2](http://www.joshmorony.com/build-a-simple-progress-bar-component-in-ionic-2/) ![](ionic.png)

- [Create a News Feed with 360-Degree Photo Viewing in Ionic 2](http://www.joshmorony.com/create-a-news-feed-with-360-degree-photo-viewing-in-ionic-2/) ![](ionic.png)

- [Build a Tap to Reveal Component in Ionic 2](https://www.joshmorony.com/build-a-tap-to-reveal-component-in-ionic-2/) ![](ionic.png)



#### Authentication



- [Add Twitter Login to an Ionic 4 App](https://ionicthemes.com/tutorials/about/ionic-twitter-login) ![](ionic.png)

- [Add Google Login to an Ionic 4 App](https://ionicthemes.com/tutorials/about/ionic-google-login) ![](ionic.png)

- [Add Facebook Login to an Ionic 4 App](https://ionicthemes.com/tutorials/about/ionic-facebook-login) ![](ionic.png)

- [Add Touch ID Authentication To An Ionic 2 Mobile App](https://www.thepolyglotdeveloper.com/2016/03/add-touch-id-authentication-ionic-2-mobile-app/) ![](ionic.png)

- [Successful OAuth Social Login with Firebase](http://www.gajotres.net/ionic-2-succesfull-oauth-social-login-with-firebase/) ![](ionic.png)

- [Using An Oauth 2.0 Service Within An Ionic 2 Mobile App](https://www.thepolyglotdeveloper.com/2016/01/using-an-oauth-2-0-service-within-an-ionic-2-mobile-app/) ![](ionic.png)

- [Ionic 2 and Auth0](http://blog.ionic.io/ionic-2-and-auth0/) ![](ionic.png)

- [Handling a Simple User Authorization](http://www.gajotres.net/ionic-2-handling-a-simple-user-authorization/) ![](ionic.png)

- [Authenticate Ionic 2 with WordPress](https://auth0.com/authenticate/ionic2/wordpress) ![](ionic.png)



#### Unit Testing



- [Ionic 2 Unit Testing](http://lathonez.github.io/2017/ionic-2-unit-testing/) ![](ionic.png)

- [How to Unit Test an Ionic 2 Application](http://www.joshmorony.com/how-to-unit-test-an-ionic-2-application/) ![](ionic.png)

- [Test Driven Development in Ionic 2: An Introduction to TDD](https://www.joshmorony.com/test-driven-development-in-ionic-2-an-introduction-to-tdd/) ![](ionic.png)



# Tools



- [Ionic2-vscode](https://marketplace.visualstudio.com/items?itemName=jgw9617.ionic2-vscode) ![](ionic.png)

- [Vim-ionic2](https://github.com/akz92/vim-ionic2) ![](ionic.png)

- [Ionic 4 Snippets](https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-ionic-snippets) ![](ionic.png)



# Components



Merged from [here](https://github.com/fishme/awesome-ionic2-components).



### Animations



- [Lottie Animation](https://github.com/chenqingspring/ng-lottie) ![](angular.png)

- [Lottie Animation](https://github.com/fivethree-team/lottie) ![](angular.png)



### UI Library



- [Ionic 4 UI Component Library](https://github.com/fivethree-team/ionic-4-components) ![](ionic.png)



### Menu, Tabs



- [Scrollabel Tabs](https://github.com/SinoThomas/Ionic2-ScrollableTabs) ![](ionic.png)

- [Circular Tabs](https://github.com/SinoThomas/Ionic2-CircularTabs) ![](ionic.png)

- [Fab Toolbar](https://github.com/ekhmoi/fab-toolbar) ![](ionic.png)

- [Multi Level Sidemenu](https://github.com/sebaferreras/Ionic2-MultiLevelSideMenu) ![](ionic.png)

- [Popover Sidemenu](https://github.com/philipbrack/ionic2-menu-alternative-popover) ![](ionic.png)

- [Drop down Title](https://github.com/Mohd-PH/ionic-drop-down-title) ![](ionic.png)



### Form / Input



- [Autocomplete](https://github.com/kadoshms/ionic2-autocomplete) ![](ionic.png)

- [Form Generator based on JSON](https://github.com/makinacorpus/angular2-schema-form) ![](angular.png)

- [Dynamic Forms](https://github.com/udos86/ng2-dynamic-forms/) ![](angular.png)

- [Form Builder](https://github.com/rohitg7/ionic2-form-builder) ![](ionic.png)

- [Sidemenu tabs](https://github.com/seanmavley/ionic2-sidemenu-tabs) ![](ionic.png)



### Unsorted links

* https://blog.nraboy.com/2015/01/upload-files-remote-server-using-ionic-framework/

* http://coenraets.org/blog/2014/10/ionic-tutorial-and-sample-application/