Ionic Tutorials

Hero image for article
Icon for article
cameracordovaionicstorage

Store Camera Photos Permanently Using PhoneGap, Ionic 1.x & ngCordova

3 min read

It's simple enough to trigger the devices camera and grab the resulting photo, but there's one big problem. The photo will eventually disappear.

Hero image for article
Icon for article
angular2ionic2

What Impact Will AngularJS 2.0 Have on Ionic 1.x?

2 min read

Since Ionic is built on top of Angular, this also means big changes for Ionic. So I want to discuss a few issues this brings up and concerns existing Ionic developers, like me, might have.

Hero image for article
Icon for article

Combining the Phaser Framework with Ionic 1.x & AngularJS

2 min read

Phaser is great at making games, but not so great for creating complex UI interfaces on mobile. Ionic is great at creating mobile applications but it's, obviously, no good at creating games.

Hero image for article
Icon for article
ionic

How to Minify an Ionic 1.x Application for Production

5 min read

Before you build the final production ready version of your Ionic application, you might want to first minify it. Minifying code is essentially the process of stripping away everything unnecessary.

Hero image for article
Icon for article

Getting Started with the Ionic 1.x Command Line Interface (CLI)

3 min read

This tutorial is for two types of people People who are comfortable with using a command line interface but are new to Ionic or people who avoid using the command line interface at all costs AND are new to Ionic

Hero image for article
Icon for article
cordovagulpionic

How to Minify an Ionic 1.x Application using Gulp and Cordova Hooks

2 min read

When using a local verison of PhoneGap though it will just take the entire contents of the www directory by default, which means the source files as well as the minified files will be inlcuded in the final package (which obviously defeats the purpose of doing it in the first place).

Hero image for article
Icon for article
ionicpush notifications

An Introduction to Ionic 1.x Push

7 min read

Let's take a look at how to get up and running with the Ionic Push service and then discuss how it might stack up to the existing services.

Hero image for article
Icon for article
authenticationionicparse

User Authentication with Ionic 1.x and Parse, Part 2: Facebook Login

5 min read

Creating a new user using an email address with Parse was pretty easy, but it is quite common for applications to offer Facebook as a sign up option as well.

Hero image for article
Icon for article
authenticationionicparse

User Authentication with Ionic 1.x and Parse, Part 1: Email Login

6 min read

Parse does a lot of fancy stuff but in this tutorial I'm going to show you how we can set up user authentication with an email login in an Ionic application with Parse.

Hero image for article
Icon for article
cordovaionic

Installing ngCordova in an Ionic 1.x Application

2 min read

ngCordova is a collection of AngularJS services and extensions created by Ionic and driven by the community. These services make it easier to integrate Cordova plugins into Ionic applications.

Hero image for article
Icon for article
google mapsionic

Part 2: Using the $http Service in Ionic 1.x to Dynamically Load Google Map Markers

6 min read

This tutorial will focus on loading in Google Maps markers dynamically using the `$http` service in Ionic, and in Part 2 we will create a way to only load markers for the area the user is currently looking at.

Hero image for article
Icon for article
google mapsionic

Part 1: Integrating Google Maps with an Ionic 1.x Application

4 min read

In this tutorial I am going to walk you through how to integrate the Google Maps JavaScript SDK into an Ionic application.

Hero image for article
Icon for article
google mapsionic

Part 3: Advanced Google Maps Integration with Ionic 1.x and Remote Data

5 min read

In this tutorial we're going to complete the transition from basic Google Maps implementation to an advanced and production ready implementation.

Hero image for article
Icon for article
authenticationfirebaseionic

Email and Facebook Authentication with Ionic 1.x and Firebase

4 min read

We will set up a simple email and Facebook authentication process, and we will also look at how to integrate the Facebook Connect plugin so that users can authenticate using the Facebook app on their native device, rather than using an in app browser.

Hero image for article
Icon for article
ionic

How to Create a Nested Tab View in Ionic 1.x

2 min read

In this tutorial I'm going to show you how to modify this tab view so that we can separate each tab out into its own file and how to set up routing so that each tab has its own navigation stack.

Hero image for article
Icon for article
ionic

Monitoring Online and Offline States in an Ionic 1.x Application

3 min read

In this tutorial I'm going to walk you through how to set up and use the Network Information plugin in conjunction with the normal `navigator.onLine` method, how to detect online and offline states, and also how to detect *when* a device switches from online to offline or vice versa.

Hero image for article
Icon for article
backendfirebaseionic

Create a Real Time Chat App with Ionic 1.x and Firebase

3 min read

We will keep our existing login flow, but now when a user is authenticated we will send them to the chat room. From here they will be able to see a list of all of the messages that have been sent, and they will be able to add their own messages

Hero image for article
Icon for article
apiionicspotify

Building a Simple Spotify Player with Ionic 1.x

4 min read

In this tutorial I will show you how to login to Spotify, access your playlists, read the track data and also play some music snippets.

Hero image for article
Icon for article
ionictheming

Creating an Attractive Login Screen in Ionic 1.x with Flexbox

7 min read

In this tutorial we are going to focus on creating an attractive login screen using our own custom styling and layout

Hero image for article
Icon for article
backendfirebaseionic

Implementing the Master Detail Pattern in Ionic 1.x with Firebase

4 min read

What I'm going to do in this tutorial is modify the application Andrew created to use Firebase as the backend for data storage.

Hero image for article
Icon for article
animationionic

How to Create Animations with CSS in Ionic 1.x

5 min read

Animations are one of the little details that can make an average mobile app outstanding. You need to be careful with animations though, especially with HTML5 based mobile applications.

Hero image for article
Icon for article
cordovaintermediateionicionic3securityvideo

Extracting the Source Code of any Cordova Application

1 min read

In this video, we walk through how you can extract the source code for any Cordova application on the app store, and why this is an important design consideration for your own applications.

Hero image for article
Icon for article
beginnerionic2ionic3video

What’s New in Ionic 3?

1 min read

In this video, I explore some of the new features and changes that you may notice in your Ionic 3 applications.

Hero image for article
Icon for article
googlegooglemapsintermediateionic2

Google Maps in Ionic 2: Native or Web?

5 min read

A discussion on the differences between the Google Maps Javascript SDK and the native Cordova plugin when using maps in Ionic 2.

Hero image for article
Icon for article
beginnerionic2

Building Ionic 2 Applications for iOS without a Mac

5 min read

In this tutorial, I am going to show you how to build an Ionic 2 application for iOS and Android using the Ionic Package service.