Beginners Guide to Getting Started with Ionic 2


Over time I have released a lot of Ionic 2 tutorials on this blog, and each of these tutorials are of varying degrees of difficulty. Unlike Building Mobile Apps with Ionic 2, there is no particular logical order or progression to the content I add to the blog. One day I may release a tutorial targeted at beginners, and the next something way more advanced.

This post will organise my free beginner level content into something a bit more structured that you can work through when you are just getting started with Ionic 2.

1. Introduction to Ionic 2

These are tutorials you should read first if you’re new to Ionic 2, Angular 2 and more generally ECMAScript 6 (ES6) and TypeScript which may be new to a lot of JavaScript developers, but are a big part of Angular 2 (which in turn, is the basis of Ionic 2).

This serves as a broad introduction to the new concepts you will be using in your Ionic 2 applications, like the new template syntax, classes, decorators and so on.

This video tutorial is the first lesson in the bonus video course that comes with Building Mobile Apps with Ionic 2. It’s a great place to start because it walks through the structure of an Ionic 2 project, discusses the roles of some specific files, and points out what you do and don’t need to worry about.

2. Ionic 2 Basics

This section contains tutorials covering the basic components of Ionic 2. The tutorials in the last section are very broad and were intended to give you some familiarity with Ionic 2 in general. These tutorials will focus on covering simple concepts, that you will need to use in most of your Ionic 2 applications, in more detail.

The ability to change between pages is obviously a very important concept to understand, and Ionic 2 takes quite a different approach to this than Ionic 1. Rather than using routes, you will be using a navigation stack and pushing and popping views. There is also a video tutorial available for this which covers data sharing concepts in more detail.

The Http service allows you to grab data from an external source (e.g. from some 3rd party API or your own), this tutorial walks through how you can do that. There is also a video tutorial available for this.

Pipes allow you to do a bunch of useful things with your data, like converting date formats, formatting addresses, or in the case of this tutorial: converting every word in a string to MATT DAMON.

Saving data so that it is not lost every time a user closes your application is obviously really important. This tutorial is actually on building an entire todo list application, and covers how to permanently store data the user adds to the application by creating a data service. There is also a video tutorial for this.

When building Ionic 2 applications we can also access the Native APIs on a device (things like the camera, contacts, accelerometer, and so on). This tutorial walks through how to use Ionic Native to integrate native plugins into your application.

Once you understand how to build Ionic 2 applications, creating your own custom themes really sets them apart from the crowd. This tutorial looks at the different ways to style your application. There is also a video tutorial available for this.

3. Practical Tutorials

If you’ve made your way through all or most of the previous tutorials, you should be pretty familiar with the core concepts of Ionic 2. The tutorials in this section take a step away from looking at the basics and start using them to piece together real applications or specific bits of functionality.

This tutorial walks through how to build a simple todo list application in Ionic 2. It’s a great starting point as your first application as it covers a lot of basic concepts like using components, navigation and data storage. Keep in mind that the video for this tutorial (and the next tutorial) was recorded shortly after the release of Ionic 2. So for accuracy you should read the text based version of the tutorial, but it may still help to watch the video if you’re more of a visual person (most of the changes have been pretty minor).

This tutorial looks at how to set up a simple application that implements the Google Maps JavaScript SDK, and also how to use the Geolocation API.

This tutorial is quite a bit more advanced, and walks through building an interactive quiz application in Ionic 2.

Bonus Content

Most of the tutorials I release contain some kind of bonus content like the source code to applications, you can get access to these below:

Want More Ionic 2 Content?

As I mentioned, this isn’t all of the Ionic 2 content that you can find on my site, it’s just a selection that I think would help beginners out. For the rest of it, check out the Ionic Section of my blog.

What to watch next...