Ionic Tutorials

Hero image for article
Icon for article
backendcouchdbintermediateionic2pouchdb

CouchDB, PouchDB, and Ionic 2: Adding Comments

6 min read

We already have the ability to add and view posts, and in this tutorial we will be adding the ability to add and view comments for specific posts.

Hero image for article
Icon for article
beginnerionic3

Link to Pages via URLs with Deep Linking in Ionic

4 min read

In this tutorial, I am going to walk through the important concepts that you you will need to know to make use of deep linking in Ionic.

Hero image for article
Icon for article
beginnerionicionic3

Dealing with Asynchronous Code in Ionic

4 min read

In this article, I am going to discuss the difference between asynchronous and synchronous code, and some common situations that you might run into in an Ionic application.

Hero image for article
Icon for article
intermediateionic3

Using HTML5 Canvas to Create a Rating Component in Ionic

5 min read

In this tutorial, we walk through building a rating component with a smiley face in Ionic.

Hero image for article
Icon for article
intermediateionicionic3video

Drab to Fab: Styling an Ionic Application – Part 1

1 min read

In this video tutorial, I start with the dull and boring application that was built in the CouchDB series and work on adding some basic styling to create something that is more appealing.

Hero image for article
Icon for article
intermediateionicionic3video

“Live” Coding a Speed Reading Application in Ionic – Part 1

1 min read

In this video, I walk through building a speed reading application in Ionic

Hero image for article
Icon for article
ionicionic3video

“Live” Coding a Speed Reading Application in Ionic – Part 2

1 min read

In this video, I walk through building a speed reading application that will flash one word on the screen at a time, allow the user to control the speed of which those words appear on the screen, and allow the user to easily start and stop the process.

Hero image for article
Icon for article
intermediateionicionic3

Building a Custom Speed Reading Component in Ionic

6 min read

In this tutorial, we will walk through building the finalised version of the speed reading component in Ionic.

Hero image for article
Icon for article
google mapsintermediateionicionic3

Implementing Turn by Turn Navigation with Google Maps in Ionic

3 min read

We are going to create a simple application that will display a Google Map and use the DirectionsService to display the route between two points on the map.

Hero image for article
Icon for article
beginnerionicionic3video

Asynchronous vs Synchronous: Understanding the Difference

1 min read

In this video, we talk about some implications of asynchronous code and how to handle it properly in an Ionic application.

Hero image for article
Icon for article
intermediateionicionic3

Sound Effects using HTML5 and Native Audio in Ionic

4 min read

In this tutorial, we are going to walk through how to add a similar sound effect when switching between tabs in an Ionic application.

Hero image for article
Icon for article
intermediateionicionic3

Using a Directive to Modify the Behaviour of an Ionic Component

4 min read

In this tutorial, we are going to walk through how to modify the behaviour of the sliding item component in Ionic by creating our own directive.

Hero image for article
Icon for article
intermediateionicionic3

Using Async/Await Syntax for Promises in Ionic

4 min read

In this tutorial, I am going to show you exactly how you can use Async/Await with promises in an Ionic application.

Hero image for article
Icon for article
intermediateionicionic3video

Using a Canvas to Create a Drawing App in Ionic – Part 1

1 min read

In this video tutorial, we will be focusing on using a canvas element to create a simple drawing application in Ionic.

Hero image for article
Icon for article
intermediateionicionic3

Creating a Fingerprint Lockscreen with TouchID in Ionic

3 min read

In this tutorial, we are going to use TouchID in such a way that it will force users to scan their fingerprint upon reentering the application

Hero image for article
Icon for article
ionicionic3video

Using a Canvas to Create a Drawing App in Ionic – Part 2

1 min read

In this video tutorial, we continue on from the first part to build a drawing application in Ionic.

Hero image for article
Icon for article
intermediateionicionic3uiux

Creating a Shrinking Header for Segments in Ionic

3 min read

In this tutorial, we walk through how to create a shrinking header component for a segment in Ionic.

Hero image for article
Icon for article
ionicionic3uiux

Creating a Drawing Application in Ionic

5 min read

In this tutorial, we will walk through building a simple drawing application in Ionic using an HTML5 canvas.

Hero image for article
Icon for article
advancedionicionic3

Location Select Page with Google Maps and Ionic

6 min read

In this tutorial, we are going to walk through how to build a location selection page in Ionic using the Google Places API.

Hero image for article
Icon for article
intermediateionicionic3theming

Simple Animations with CSS Transitions in Ionic

1 min read

In this video tutorial, we learn how to use the 'transition' property to create simple animations.

Hero image for article
Icon for article
beginnerionicionic3

Using the Splash Screen Plugin with Ionic

1 min read

In this video tutorial, we will walk through an example of configuring the behaviour of the splash screen and using the splash screen plugin provided by Cordova to manually trigger hiding it.

Hero image for article
Icon for article
intermediateionicionic3

Using an SVG for Animation in Ionic

6 min read

In this tutorial, I'll be running through a basic example of how you might use an animated SVG in your Ionic applications.

Hero image for article
Icon for article
intermediateionicionic3uiux

Creating an Animated Splash Screen in Ionic

3 min read

In this tutorial, we walk through how to create an animated splash screen effect in Ionic.

Hero image for article
Icon for article
beginnerionicionic3

Creating a Pinterest Layout in Ionic

1 min read

In this video tutorial, we will walk through how to create a Pinterest style layout in Ionic.

Hero image for article
Icon for article
beginnerionicionic3

Integrating Google AdMob Advertisements in Ionic

3 min read

In this tutorial, we will be covering how to add Google AdMob to an Ionic application.