If you want to start building your application with Ionic Framework, there’s no better place than starter apps.
 
Starter apps are usually templates or applications that offer you a glimpse into what Ionic framework can do. These apps come in all shapes and forms. Some of them are merely models providing you prebuilt UI patterns while others are small usable applications made to show you specific features (for example, how to connect your application to Google or Facebook authorization services).
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
 
Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins ...
 
Ionic AngularJS Kitchensink
 
  • Developer: krisrak
 
This starter project is a simple kitchen sink app developed using Ionic Framework + AngularJS. It features different page patterns (Tab View, Side Menu, List View, and Slide / Swipe), various form and page elements, keyboard input types and everything is natively packaged using Cordova.
 
One last thing, I’ve decided not to include driftyco UI starter apps (covering UI patterns) because of this example, I’m telling this just in case you’re wondering about them.
 
GitHub and Usage
 
 
 
  • Developer: loicknuchel
 
Unlike previously mentioned starter app, this one is a little bit more complex. It is still a starter application though a boilerplate code is already written and useful libs are included. Everything said this is a perfect template for your future Ionic application.
 
Features user authentication handling, storage helpers & caching, REST & Parse API helpers, error handling & async remote logger, angular wrappers and different Cordova plugins. Full feature list can be found in a provided GitHub link.
 
GitHub and Usage
 
 
 
  • Developers: srameshr, chanusukarno, auth0
 
This section will feature three different starter apps working with OAuth authorization. All mentioned starter apps provide at least Google and Facebook authorization while last one provides additional options (from auth0 repository).
 
The main advantage of this implementation is that your users don’t need to enter their user-id and password, considering they have the corresponding apps installed and logged in.
 
GitHub and Usage - Solution 1
 
GitHub and Usage - Solution 2
 
GitHub and Usage - Solution 3
 
 
 
  • Developer: driftyco
 
This is a simple starter app featuring Google Maps implementation.
 
GitHub and Usage
 
 
 
  • Developer: calendee
 
This is a simple starter app featuring a great Google Maps alternative called Leaflet. The Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, which makes it a great alternative to Google Maps.
 
GitHub and Usage
 
 
 
  • Developer: cowbell
 
If Google Maps or Leaflet are not what you need from geo-location services you may look at Geofence. It is a Cordova plugin used to monitor circular geofences using mobile devices. Basically, its main purpose is to notify if application user if crossing the boundary of the monitored geofence.
 
GitHub and Usage
 
 
 
  • Developer: driftyco
 
Yet another driftyco starter pack. This one is made as an example how to connect to Salesforce platform.
 
The template features a starter application that uses Salesforce OAuth to authenticate, and specific REST APIs to access and manipulate Salesforce data.
 
GitHub and Usage
 
 
 
  • Developer: kevinblanco
 
This starter app contains a base Ionic application made to consume Drupal Services REST API. It features login, create an account, log out, saving data to localstorage, helper auth methods.
 
GitHub and Usage
 
 
 
  • Developer: scottopolis
 
Similar to previously mentioned starter app this one features starter app made to consume WordPress REST API (WP-API). It features login, log out, get posts, pull to refresh, infinite scroll. According to app developer more is to come.
 
GitHub and Usage Demo Additional Info
 
 
 
  • Developer: ccoenraets
 
This is a sample starter application that demonstrates a simple approach to Facebook AngularJS / Ionic integration.
 
GitHub and Usage
 
 
Continue Reading

  • Sascha Sambale

    If you want, you can also add this project: https://github.com/mastix/Ionic-Weather-Application

    • Thanks, give me few minutes and it will be up.

    • Let me say that for starter application this is a superb looking one.

  • Also check out http://mobilizer.me

    • Thanks, though this site is not a topic of this article I will include it in my next Ionic related article dedicated to Ionic related services.

  • ngeosone

    generatron.com. Reads a backend data model and generates among other things an ionicframework app.

    • Though this tool is not part of this article I will include it in my next weeks article about 3rd party Ionic tools and services.

  • Jack

    Thanks so much for all these awesome Ionic articles, I love your page.

  • imakkie

    https://github.com/imakkie/koonic

    may i suggest my own ionic starter? its a blank app but uses jade for html, coffescript for js and sass for css obviously 😉 enjoy!

    • Yes you can, welcome to number 21 🙂

      • imakkie

        really appreciated! thank you 😀

        • Vance Feld

          coffeescript? eew. TypeScript…

          • MostlyCarbonite

            guess what? other people have different preferences than you!

          • Vance Feld

            coffee script does nothing but change syntax. it’s nothing more than a code obfuscator, and i’m glad it has finally died. what was arbitrary was the fact that it existed in the first place. it brings nothing to the table except removing curlies.

  • jimbavia

    Nice collection. Thanks!

  • Januar Fonti

    is there a new tutorial about creating make a push notification using ionic apart from official documents ionicframework? Thank you

    • I never wrote one, there are already so many existing. Would you like one?

      • Januar Fonti

        Yes I want one, I want to make a push notification with ionic and GCM, I’ve followed the tutorial of official documents ionic but no results :))

  • loved this information.. love u too !!

  • Very usefull information .. thanks ..

  • awesome list. Please do add new ones if you have.

  • Rishabh Bharti

    awesome work !

  • Guillermo Rodriguez

    Hello, I would appreciate if I indicate where to find github, application 19, Ionic Weather Application, I get 404 code page that does not exist. Thank you very much !