Note: This post is for Ionic 1. If you are working with Ionic 3 go to Build a complete mobile app with Ionic 3.

Why should I choose Ionic Framework to build my app?

Web technologies are evolving super fast, we went from DOM manipulation libraries like jQuery to single page web applications superpowered with MV* frameworks like AngularJS. If we also consider the significant increase in devices speed, we have a perfect mix to build production quality apps on top of web technologies such as Javascript, HTML5 and CSS3.

“Yeah right, but hybrid apps are clunky, ugly and have subpar performance”
Said native app developer in 2011

These may have been valid reasons in 2011, but now they are virtually baseless thanks to a collection of new technologies that have emerged over the past two years. With these technologies, you can design, build, and deploy robust mobile apps faster than you could with native technologies, all while incurring little to no app performance penalties. This is thanks in large part to super fast mobile browser rendering speeds and better JavaScript performance.

This tutorial is designed to teach you how to effectively use these new technologies to build insanely great mobile apps.

Ionic to the rescue

Ionic is to AngularJS what iOS UIKit is to Obj-C/Swift, and what Android UI elements are to Java. Ionic works to enrich user interface and uses AngularJS to construct a functional application structure. This gives you a mix of power and beauty. Core mobile UI paradigms are available to developers out of the box, which means that developers can focus on building apps, instead of common user interface elements. Some examples of these include list views, stateful navigation, tab bars, action sheets, and so much more.

This is also where our value proposition at IonicThemes fits in, our aim is to help people of different skill levels - designers or developers - get the most out of these technologies by saving their expensive time and providing great resources for them to learn faster and better.


We sell high quality ready made and customizable Ionic Themes, Templates & Components. We also have awesome FREE Ionic Tutorials to get the most out of Ionic.

If you feel you need more information to make your decision, I would suggest you to read these two posts

Ionic 3

On Februray 2016, Ionic announced the release of version 2 Beta. One of the biggest improvements to Ionic 3 is the way it leverages the power of Angular2 which brings incredible performance boosts, especially to mobile.

At a high level, Ionic 3 is very similar conceptually to Ionic 1. In Ionic 1 you have controllers that hold your logic, and templates that define your views. In Ionic 3 you have classes instead of controllers. There are some differences in the template syntax, and in the class structure, but the concepts are still similar and the most important thing is that it feels pretty natural switching from Ionic 1 to Ionic 3. Click here to learn more about Ionic 3.

Note: Ionic 3 is currently in Beta and is being actively devleoped and improved. This means it’s not as stable as Ionic 1 and is still missing some important components.

What are we going to build?

We will be building an app that provides information about conferences and events. This tutorial was part of the workshop we presented at the 2015 JSConfUY where we built the official app for the event. Feel free to download it from the iOS App Store. It's also worth noting that it only took us four days to build the JSConf app that's on the App Store, so that should give you an idea of how fast you can build & iterate using Ionic / Cordova.

How this tutorial is structured

You will find eight different sections going from the basics to complex and deeper topics. The cycle we are going to follow in those sections is the following:

  • Initialize project and environment configurations
  • Basic app navigation
  • Page layout I
  • Page layout II
  • Page layout III
  • Connect the app with real data
  • Cordova plugins and Ionic UX
  • Styles with Sass

Each step has an initial and final commit representing the state of the project before and after that step. This way you will find it super easy to see all the changes across the code in each particular step, so you won't get behind or disorientated on what we achieve/add/change in every step.

Without further ado, let's dive in!

Starting the project

Install Ionic

You can find the Ionic official installation documentation here.

  1. Make sure you have an up-to-date version of Node.js installed on your system. If you don't have Node.js installed, you can install it from here.
  2. Open a terminal (Mac) or a command interpreter (cmd, Windows), and install Cordova and Ionic:
    • npm install -g cordova
    • npm install -g ionic
    • On a Mac, you may have to use sudo depending on your system configuration: sudo npm install -g cordova ionic
  3. If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:
    • npm update -g cordova
    • npm update -g ionic
    • Or sudo npm update -g cordova ionic

Follow these links if you want more information:

Step 1 - Git & ionic start

First we need to link this new Ionic project with our reference repository on github. Clone and checkout the initial commit (e37d84e) of this repository so we can start working on the app:

  • git clone https://github.com/startapplabs/jsconfuy.git
  • cd jsconfuy
  • git checkout e37d84e

After this, we need to set up some stuff before we start working on the Ionic project. To do so, run these commands:

  • npm install
  • bower install
  • ionic setup sass

Note: If you are starting a brand new project with Ionic, run these commands instead:

  • ionic start jsconfuy sidemenu
  • cd jsconfuy
  • ionic setup sass

Finally, to see the current state of the project, run:

  • ionic serve

If you followed the procedure above, after serving the app, you can see that the Ionic dev server is running on http://localhost:8100 and there, you will see one of Ionic’s starter projects, which showcases an app with a side menu.

What we have learned so far:

  • Bind the project to an existing Github repository
  • Start and perform basic configurations for your Ionic project using the powerful Ionic CLI
  • Serve and see your app running on Ionic dev server which includes:
    • Live reload: every time you change a file, you will see the changes without refreshing
    • Tasks and watchers: every time you change a file, Gulp tasks running on the background will perform certain procedures that will ease the development (for example sass compilation and minification)

Step 2 - Ionic templates & AngularJS navigation

This step corresponds with this commit (e8d787b) and represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout e8d787b

In this step, we are going to remove all the example files that came with the Ionic starter project and add our own starter files.

This app will have information about Uruguay’s Javascript Conference 2015 (JSConfUY 2015). To serve that purpose, the content will be the following:

  • 3 main views containing
    • Speakers information
    • Venue information
    • Agenda information
  • 1 side menu for a clear navigation
  • 1 sub view to show extended information of events such as keynotes, talks, workshops, coffee breaks, etc.

This image illustrates the navigation between views

To achieve this, we are going to:

  • Add www/templates/agenda.html with basic agenda view layout
  • Add www/templates/speakers.html with basic speakers view layout
  • Add www/templates/venue.html with basic venue view layout
  • Add www/templates/event.html with basic event view layout
  • Update www/templates/menu.html with navigation layout to the other views
  • Update www/js/app.js with app’s desired routing
  • Update www/js/controllers.js with a basic controller for each view

The final point of this step is this commit (296941e). Run git checkout 296941e and you will see the implementation of the instructions above.

Serve the app with ionic serve and look at the Ionic dev server running on http://localhost:8100. There you will see our JSConfUY app with the navigation DONE.

If you want to see more details of what we have done, take a look at this comparison between the initial commit (e8d787b) and the final commit (296941e) of this step.

What we have learned so far:

  • Define custom routing for our app using AngularJS ui-route
  • Change the layout of our views using HTML

Step 3 - Speakers Layout

This step corresponds with this commit (296941e) and represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout 296941e

In this step we are going to work on the layout of the speakers view. For this view, we need to:

  • Show a list with all the speakers of the conference
  • Show information about the speaker
  • Provide a quick link to the speaker’s talk
  • Provide a link to the speaker’s social profiles

Luckily, Ionic provides awesome components that will help us layout the content. Ionic avatar list or thumbnails list may be good options, but I think Ionic cards are the best choice for this view because we can fit all the information we have within one clean component.

The final point of this step is this commit (fb02948). Run git checkout fb02948 and you will see the implementation of the instructions above.

Serve the app with ionic serve and look at the Ionic dev server running on http://localhost:8100. There, you will see our JSConfUY app with the speakers view DONE.

If you want to see more details of what we have done, take a look at this comparison between the initial commit (296941e) and the final commit (fb02948) of this step.

What we have learned so far:

  • Explore Ionic components
  • Compose different components to get the UI we want

Step 4 - Venue Layout

This step corresponds with this commit (fb02948) and represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout fb02948

In this step, we are going to work on the layout of the venue view. For this view, we need to:

  • Show a map pointing the location of the venue
  • Show information about the location of the venue

As we mentioned before, one of the reasons Ionic is awesome is because it’s built using the web stack. In this case, that means that we don’t have to reinvent the wheel for the map we need for this view. We can easily reuse any angular map directive and it will work like a charm.

Angularjs-Google-Maps will do the trick. We just need to add the dependency using bower:

  • bower install ngmap --save

The final point of this step is this commit (7bfcf29). Run git checkout -f 7bfcf29 and you will see the implementation of the instructions above.

Serve the app with ionic serve and look at the Ionic dev server running on http://localhost:8100. There, you will see our JSConfUY app with the venue view and its map DONE.

If you want to see more details of what we have done, take a look at this comparison between the initial commit (fb02948) and the final commit (7bfcf29) of this step.

What we have learned so far:

  • Use the web stack to build mobile apps
  • Reuse AngularJS directives in our app

Step 5 - Agenda Layout

This step corresponds with this commit (7bfcf29) and represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout -f 7bfcf29

In this step we are going to work on the layout of the agenda view. For this view we need to:

  • Show the schedule for both days of the conference
  • Show information about each event

Again, Ionic has awesome components; in this case, tabs will work perfectly for displaying both days’ schedule in a clean and organized manner.

The final point of this step is this commit (9d797d7). Run git checkout 9d797d7 and you will see the implementation of the instructions above.

Serve the app with ionic serve and look at the Ionic dev server running on http://localhost:8100. There, you will see our JSConfUY app with the agenda view and a tabs component showing both days’ schedule.

If you want to see more details of what we have done, take a look at this comparison between the initial commit (7bfcf29) and the final commit (9d797d7) of this step.

What we have learned so far:

  • Use advanced components such as tabs for our mobile app layout

Step 6 - AngularJS data access

This step corresponds with this commit (9d797d7) and represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout 9d797d7

In this step, we are going to remove all hard coded data and replace it with data we get from our data source (in this case, a simple JSON). We are going to:

  • Define the structure and set all the data of the agenda.json data source
  • Define the structure and set all the data of the speakers.json data source
  • Grab images and resources from jsconf.uy website so we have rich content for our app
  • Add www/js/services.js to get data from JSON data sources using AngularJS $http service
  • Add www/js/filters.js to display raw html
  • Add www/js/directives.js to use directive templates for agenda events
  • Update www/js/controllers.js to use the AngularJS services we defined in www/js/services.js

In this step, we are using all the power of AngularJS controllers, directives, services, and filters to give real value to our app.

We are going to use underscore.js to ease our work; we just need to add the dependency using bower:

  • bower install underscore --save

Now we have an app that gets data from a data source and displays it dynamically to the users. In this case, we are using two JSON files as data sources, but you could easily use any other backend. The way many apps communicate with backend is through an API.

Having that in mind, in my opinion, you have three alternatives here:

  1. You can use the almighty WordPress as your backend
    • WordPress is very flexible and you can use it in many ways, as a blog, a cms, or ecommerce (using woocommerce, for example), etc. Also, there are tons of plugins that will help you add different functionalities.
    • You can easily access your WordPress content through its JSON API.
    • This is a fast and general solution, so depending on what you are planning to build, you may need something more powerful and custom.
  2. Use Parse or Firebase (both “backend as a service”)
    • Firebase is a great service that will help you build your app’s backend with ease. (Owned by Google)
    • Parse is also another option that offers some of the same features as Firebase. (Owned by Facebook)
    • Again, depending on what you are planning to build, you may need something more powerful.
  3. If you are one of those who like to have strict control over the backend implementation, I suggest you to try Strongloop.
    • Strongloop is a perfect solution if you need full control and custom functionalities on your backend. Basically, it is a platform that enables you to easily (I would say VERY easily) build custom API’s for your backend needs. (This is the solution I use for my clients’ production apps).

The final point of this step is this commit (14dd74a). Run git checkout 14dd74a and you will see the implementation of the instructions above.

Serve the app with ionic serve and look at the Ionic dev server running on http://localhost:8100. There, you will see our JSConfUY app with real data for the event.

If you want to see more details of what we have done, take a look at this comparison between the initial commit (9d797d7) and the final commit (14dd74a) of this step.

What we have learned so far:

  • Reuse what we already know from AngularJS (controllers, services, directives, filters) in our Ionic app
  • Get data from different data sources

Step 7 - Cordova plugins + Ionic UX

This step corresponds with this commit (14dd74a) and represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout 14dd74a

In this step, we are going to integrate some mobile native functionality using Cordova plugins and some Ionic UX components that will improve our app. We are going to:

These are part of the so-called “ionic superpowers”. Using Ionic to develop hybrid apps gives you the advantage of accessing the native API’s of devices, including the geolocation, social sharing, inAppBrowser, device camera, touchID, push notification, and so on. When developing an Ionic app, you can have several device API’s integrated using ngCordova or other Cordova plugins. That’s the difference between mobile web and hybrid apps.

To install these plugins, you just need to run:

  • cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
  • cordova plugin add org.apache.cordova.inappbrowser

The final point of this step is this commit (73cec82). Run git checkout 73cec82 and you will see the implementation of the instructions above.

Serve the app with ionic serve and look at the Ionic dev server running on http://localhost:8100. There, you will see our JSConfUY app with the Ionic loader and slide box integrated but as you are accessing the app through the browser, you won’t see either the social sharing plugin or the inAppBroswer plugin. You will need to install and test the app in your phone to see those in action.

If you want to see more details of what we have done, take a look at this comparison between the initial commit (14dd74a) and the final commit (73cec82) of this step.

What we have learned so far:

  • Give superpowers to your app using Cordova plugins
  • Give a more polished look to your app using Ionic UX components

Step 8 - Sass

This step corresponds with this commit (73cec82) and represents the starting point of this step. Please checkout this commit so we are all on the same page: git checkout 73cec82

In this step, we are going to take care of the app styles using CSS with the help of Sass. We are going to:

  • Use Sass mixins
  • Define and use Sass variables for fast customization

Mixins will ease our styles development by helping us with prefixing vendor properties, defining functions, etc., which will help us reuse our styles across the app.

This is the structure of the mixins we are going to use:

@mixin cssCalc($property, $expression) {
  #{$property}: calc(#{$expression});
}

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex-wrap($value) {
  flex-wrap: $value;
  -webkit-flex-wrap: $value;
}

Other awesome features are Sass variables. These will enable us to reuse variables across our style sheets. This is particularly useful, for example, when defining colors that will be spread across the app.

Here, you can see the variables we defined for our app, and how easily we can change those and immediately change the UI color scheme of the whole app.

$content-bg: #EAEAEA;
$content-color: #444444;

$top-bar-bg: #254164;
$top-bar-color: #FFFFFF;

$loading-color: #FFFFFF;

$main-menu-bg: #FFC900;
$main-menu-color: #FFFFFF;

$loading-color: #FFFFFF;

$speaker-actions-bg: #FFFFFF;

$workshop-bg-color: #00B454;
$talk-bg-color: #FF7C00;
$keynote-bg-color: #FF3900;
$global-bg-color: #DDDDDD;
$event-color: #FFFFFF;

$get-directions-btn-bg: #419e61;
$get-directions-btn-color: #FFFFFF;


The final point of this step is this commit (6eaea0f). Run git checkout 6eaea0f and you will see the implementation of the instructions above.

Serve the app with ionic serve and look at the Ionic dev server running on http://localhost:8100. There, you will see our JSConfUY finished with a professional and polished look.



If you want to see more details of what we have done, take a look at this comparison between the initial commit (73cec82) and the final commit (6eaea0f) of this step.

What we have learned so far:

  • Give a professional and polished look to our app
  • Use some of the cool features of Sass (mixins, variables, etc.)

Next Steps

After learning how to build a complete mobile app with Ionic Framework you can focus on:

Now you know how to build a Complete Mobile App with Ionic Framework Step by Step! Congratulations :)

Why don’t you put those new shiny skills to use and try one of our products?

You can jump right in and create a Full Ionic App or if you want to take it slow and start with something easier, try some of our Ionic Components and become #IonicPro in no time.