Learn all the basics (and more). Build 5 complete mobile apps. Deploy your apps to the Apple App Store, Google Play, and to the web as a Progressive Web Application (PWA).

Ionic 2 Mobile Apps

NOTE: Whilst Ionic 4 is in the beta period, the legacy Ionic 3 version of the book and its resources will be available on request to anybody who wants purchases the book. The beta of Ionic 4 is already quite stable, and the official release will be available soon, so unless you have a pressing reason to stick with Ionic 3 for the time being (e.g. an existing codebase) I would strongly recommend most people read the Ionic 4 version.

If you haven't at least heard of Ionic, then you're probably completely new to HTML5 mobile application development - and that's completely OK, this eBook makes no assumption of skill levels and will walk you through basic concepts, to more advanced concepts and all the way to submitting your application on the Apple App Store and Google Play.

All you need to bring to the table is a basic understanding of JavaScript and the web. Since you're reading this, you probably fall into one of the following categories:

  • You've used Ionic before, but want to learn Ionic 4
  • You've used other mobile development frameworks but want to switch to Ionic
  • You're completely new to mobile app development, and you may not have even developed an app before

If you fall into any of these categories then you will have a lot to gain from this book, but if you fall into the last category you might need a bit of a primer on what HTML5 mobile app development is and why you might want to use it.

LEARN IONIC, ANGULAR, AND CAPACITOR

Although we often refer to applications built with this tech stack as just "Ionic" applications, we will actually be using three frameworks in unison to create our applications. Even though we are using three different frameworks, they are all integrated together so it will mostly feel like you are just learning a single framework rather than three at once.

Ionic is what is mostly responsible for providing the mobile user interface components for the application. These are things like scrolling lists, toolbars, buttons, tabs, cards, and so on. As well as providing these elements of the application, Ionic also handles animating page transitions, adapting the style of the application to match the platform it is running on, and it also provides a lot of tooling to help make developing your applications easier.

Angular is a generic framework for developing all sorts of Javascript applications. It allows you to build your applications in a structured way and it takes care of handling a lot of the complex nitty-gritty details for you. Whilst Ionic is mostly responsible for how the application looks and feels, Angular is responsible for handling all of the logic and coordination behind the scenes.

Capacitor is what allows our applications to run on multiple platforms. It handles creating the native iOS and Android builds for us so that we can install the applications on our devices and submit them to app stores. It also provides us with a generic API to access, and then translates that into the appropriate requests for each platform. The way you interact with the Camera in an iOS application is different to how you interact with it in an Android application, but Capacitor allows us to just make a single call, to a single method, from our single codebase, and it will handle what needs to be done to use the Camera API behind the scenes.

You do not need prior knowledge of any of these technologies in order to use this book.

The image below is a visual representation of how this technologies work together. Ionic and Angular operate entirely in the "web zone", and Capacitor acts as our go-between to the platforms the application will be running on.

Image credit: capacitor.ionicframework.com

Capacitor diagram

ONE CODEBASE, THREE PLATFORMS

One of the greatest benefits of using Ionic is that it runs entirely on web code, and this means that an Ionic application can run anywhere the web does without requiring modification. This means that you can write a single application and have it work on multiple platforms.

We will be specifically covering building for three major mobile platforms in this book (iOS, Android, PWA) but that's not even the limit. You could run an Ionic application anywhere the web runs. You can even create native desktop applications with Ionic.

This is a powerful benefit, as creating an application using native code means developing a separate application for each platform (and will require developers who understand how to write code for that platform). Even the native cross platform options that allow you to write code using a single syntax to create applications for multiple platforms still require a certain degree of customisation for the different platforms, because that code is being converted into native code specific to a particular platform/device. The web works the same no matter what platform you are running on, so you don't need to worry about changing the code you are using.

This book will teach you how to create a single codebase using Ionic, and then deploy that as:

The cool thing about this is that I don't need to teach you a separate set of skills for each of these platforms. The vast majority of the book will just teach you how to build generic Ionic/Angular/Capacitor applications. Distributing to various platforms is just a few extra steps at the end of the book.

Angular logo

WHY ANGULAR?

The most recent version of Ionic (Ionic 4) is built using web components. You may be familiar with web components, or you may not, what is important to understand is that this now allows Ionic to work with any framework or no framework at all. We need Ionic to provide our mobile user interface components, and we need Capacitor to allow the application to run seamlessly on multiple platforms, but you might wonder why we are specifically using the Angular framework for this book.

First of all, there are a lot of benefits to using a framework in conjunction with Ionic. Whilst including a framework does add some extra weight to the application, the benefits far outweigh the relatively small increase in application size. When using a framework, you have most of the tools you need to build an application right out of the box, rather than having to build out common solutions yourself or find external packages to fill that role. Things that frameworks provide out of the box would take an enormous effort to build yourself (and it probably won't end up being as good).

Historically, Ionic has only worked with the Angular framework. But now that we can use Ionic with any framework in the entire world (Ok... most people would be using either Angular, React, or Vue) why are we sticking with Angular in this book?

Since Ionic and Angular have been an inseparable pair in the past, there is already a lot of support for Angular both in the tooling and in the community that surrounds Ionic. Ionic provides additional libraries and tooling that make developing Ionic applications with Angular easier. Angular also has a heavy focus on optimising for mobile use, and this makes it a fantastic choice for Ionic development.

WHY SHOULD I READ THIS EBOOK?

If you are looking for a single resource that will teach you everything you need to know about Ionic in order to get your skills to a competent level, then this is it. The technologies that I have been discussing above are an absolute pleasure to build with, but it can be difficult trying to piece together how everything works initially.

I've been writing about and teaching Ionic for several years, and since the initial release of this book back during the Ionic 2 alpha I have rewritten, refined, and republished the book over 18 times (and these updates will always be released for free to those who purchase the book). Thousands of people have purchased this book and its resources, and I've used their feedback to help improve the book further.

With my experience in teaching over the past few years, and the feedback that I have received for this book and my other learning resources, I strongly believe that this resource has everything you need to become a competent Ionic developer. There will be more to learn once you are finished with the book and its resources (there always is), but you will have a solid undestanding of all of the important concepts, and a good sense of how to build the most common types of applications.

Building Mobile Apps with Ionic & Angular makes no assumptions of technical capability - you should be reasonably familiar with Javascript and general programming principles, but there is no assumed knowledge of Ionic or any other mobile development required. A lot of time has been put into making sure all concepts, no matter how big or small, are explained thoroughly.

Michael Lane

Quick word of thanks and encouragement: I bought your book on Ionic and it was the best money I ever spent on a PDF. I learned a ton, and it gave me the confidence to start development on our mobile app. I am an experienced developer with over 20 years in the field, pretty good at JavaScript, TypeScript and Angular 1. I was brand new to Angular and Ionic. Your pacing and level of detail were perfect for me.

Michael Lane

Jorge Vergara

For anyone that needs a full guide to getting started with Ionic I recommend Josh's book. It's without a doubt one of the best technical books I've read. I went through it during the weekend and started building my first complex Ionic app on Monday, it's worth every $$.

Jorge Vergara

Check out the book structure below to see exactly what you're in for.

More content is available in the higher tier packages, which is indicated by the Level 1, Level 2, and Level 3 tags.


Table of Contents

Section 1: Introduction

Level 1 Level 2 Level 3 Lesson 1: Welcome
Level 1 Level 2 Level 3 Lesson 2: An Overview of the Ionic Ecosystem
Level 1 Level 2 Level 3 Lesson 3: Basic Concepts
Level 1 Level 2 Level 3 Lesson 3: Ionic & Angular Syntax
Level 1 Level 2 Level 3 Lesson 3: Native Builds and Functionality with Capacitor

Section 2: Ionic Basics

Level 1 Level 2 Level 3 Lesson 1: Generating an Ionic Application
Level 1 Level 2 Level 3 Lesson 2: Anatomy of an Ionic Project
Level 1 Level 2 Level 3 Lesson 3: Ionic CLI Commands
Level 1 Level 2 Level 3 Lesson 4: Decorators Preview!
Level 1 Level 2 Level 3 Lesson 5: Classes
Level 1 Level 2 Level 3 Lesson 6: Templates
Level 1 Level 2 Level 3 Lesson 7: Styling & Themeing
Level 1 Level 2 Level 3 Lesson 8: Navigation, Routing, and Lazy Loading
Level 1 Level 2 Level 3 Lesson 9: User Input
Level 1 Level 2 Level 3 Lesson 10: Saving Data
Level 1 Level 2 Level 3 Lesson 11: Fetching Data, Observables & Promises
Level 1 Level 2 Level 3 Lesson 12: Native Functionality

Section 3: Quicklists

Level 1 Level 2 Level 3 Lesson 1: Introduction
Level 1 Level 2 Level 3 Lesson 2: Getting Ready
Level 1 Level 2 Level 3 Lesson 3: Basic Layout
Level 1 Level 2 Level 3 Lesson 4: Creating an Interface and Checklist Service Preview!
Level 1 Level 2 Level 3 Lesson 5: Creating Checklists and Checklist Items
Level 1 Level 2 Level 3 Lesson 6: Saving & Loading Checklists
Level 1 Level 2 Level 3 Lesson 7: Creating an Introduction Slider & Themeing
Level 1 Level 2 Level 3 Lesson 8: Conclusion

Section 4: Giflist

Level 2 Level 3 Lesson 1: Introduction
Level 2 Level 3 Lesson 2: Getting Ready
Level 2 Level 3 Lesson 3: The List Page
Level 2 Level 3 Lesson 4: The Reddit API and HTML5 Video
Level 2 Level 3 Lesson 5: Integrating the Data Service
Level 2 Level 3 Lesson 5: Settings
Level 2 Level 3 Lesson 6: Styling
Level 2 Level 3 Lesson 7: Conclusion

Section 5: Snapaday

Level 2 Level 3 Lesson 1: Introduction
Level 2 Level 3 Lesson 2: Getting Ready
Level 2 Level 3 Lesson 3: The Layout
Level 2 Level 3 Lesson 4: Taking Photos with the Camera
Level 2 Level 3 Lesson 4: Saving & Loading Photos
Level 2 Level 3 Lesson 5: Creating a Custom Pipe and Flipbook of Photos
Level 2 Level 3 Lesson 6: Integrating Local Notifications
Level 2 Level 3 Lesson 7: Styling
Level 2 Level 3 Lesson 8: Conclusion

Section 6: Camper Mate

Level 3 Lesson 1: Introduction
Level 3 Lesson 2: Getting Ready
Level 3 Lesson 3: Creating a Tabs Layout
Level 3 Lesson 4: User Input & Forms
Level 3 Lesson 5: Implementing Google Maps & Geolocation
Level 3 Lesson 6: Saving and Retrieving Data
Level 3 Lesson 8: Styling
Level 3 Lesson 9: Conclusion

Section 7: Camper Chat

Level 3 Lesson 1: Introduction
Level 3 Lesson 2: Getting Ready
Level 3 Lesson 3: Login Page & Sliding Menu Layout
Level 3 Lesson 4: Using Facebook for Authentication
Level 3 Lesson 5: Creating Messages & Navigation
Level 3 Lesson 6: Creating a Local and Remote Backend with PouchDB and Cloudant
Level 3 Lesson 7: Styling & Animations
Level 3 Lesson 8: Conclusion

Section 8: Testing & Debugging

Level 1 Level 2 Level 3 Lesson 1: Testing & Debugging

Section 9: Building & Submitting

Level 1 Level 2 Level 3 Lesson 1: Preparing Assets
Level 1 Level 2 Level 3 Lesson 2: Building for iOS and Distributing to the Apple App Store
Level 1 Level 2 Level 3 Lesson 3: Building for Android and Distributing to Google Play
Level 1 Level 2 Level 3 Lesson 4: Creating iOS Certificates on Windows
Level 1 Level 2 Level 3 Lesson 5: Building for iOS and Android Using Ionic Package (Not yet available)
Level 1 Level 2 Level 3 Lesson 6: Publishing as a PWA (Progressive Web Application) with Firebase

Section 9: Congrats!

Level 1 Level 2 Level 3 Lesson 1: Conclusion
David Izatt

Josh's writing style is light and enthusiastic, making it enjoyable to consume large amounts of information easily, no small feat when addressing a technical matter.

David Izatt, Software Architect, Essenti Technologies

The Example Applications

After covering the basic concepts, several sections in the book are dedicated to in-depth walkthroughs of building example applications. You can find out more details about the applications that will be built below.

Quicklists

Quick Lists is the de facto step-by-step tutorial application for this course - no matter which of the packages you purchased, you will have access to this lesson. The reason I chose Quick Lists to fill this role is because it covers a broad range of the core concepts in Ionic, and the skills you learn throughout building this application will be used frequently in most other applications you create. Topics covered include:

  • Complex Lists
  • Interfaces
  • Forms and User Input
  • Simple Navigation
  • Passing Data Between Pages
  • Creating, Reading, Updating and Deleting Data
  • Data Storage and Retrieval
  • Theming
Giflist

Giflist is a pretty simple application, the general idea is that a user can enter in any subreddit from reddit, and the app will fetch and display GIFs from that subreddit.

As well as just fetching GIFs from reddit, users will also be able to supply some settings to configure the application to their preferences. Although the concept is pretty simple, there are a few interesting things that you will learn through building it, this will include:

  • Fetching JSON data from a 3rd party API
  • Observables
  • Data storage
  • Theming
  • Lists
  • Using Modals
  • Manipulating Data
  • HTML5 Video
Snapaday

Snapaday is based around everybody's favourite native plugin, the camera. I don't actually have any data to back that claim up, but the camera is definitely one of the coolest integrations.

In fact, Snapaday is pretty much the "native plugin app" in this eBook - as well as covering how to use the camera we'll also be integrating local notifications and social sharing (we've got to get those selfies on Facebook right?). Here's a summary of what you'll be learning:

  • How to integrate native plugins
  • How to use the Camera API
  • How to use the File API
  • How to use local notifications
  • How to use modals
  • How to create your own custom service
  • How to store files permanently on a device
Camper Mate

Camper Mate is an interesting application to build because it doesn't really have one specific purpose like the other applications, it's a bit of a utility tool belt kind of app. It provides a bunch of different features to users that might be useful for them when going on caravan or camping trips.

The two most important concepts we'll be covering in this application are the integration and use of Google Maps and the use of forms for capturing user input.

  • Creating forms and capturing user data
  • Implementing Google Maps and creating a custom component to handle that
  • Creating a tabs layout with Angular routing
  • Saving and retrieving multiple sets of data
Camper Chat

Camper Chat is a live chat application. Users will be able to log in with their Facebook account and chat all things caravan and camping with anybody else who is using the application. The coolest thing about this application is the integration with PouchDB for storing local data, and Cloudant for syncing that PouchDB data to a remote backend. This means that the data can be available to users when they are offline, and when they come back online again the latest updates will be fetched from the remote backend. Here's what we will cover:

  • Navigation
  • Using a Sliding Menu
  • Using PouchDB to store local data
  • Using Cloudant to store remote data
  • Using the Facebook API for authentication and other features
  • Updating and displaying data in real time

The Video Course

The EXPERT package of Building Mobile Apps with Ionic also comes with a BONUS: 1 hour video course. The video course is intended to introduce you to the most important Ionic concepts.

We walk through building a simple todo application, and along the way we cover the core Ionic concepts. The videos don't go into nearly as much depth as the book does, but it should make you feel more comfortable with the basics of how an Ionic application works and the project structure.

Baadier Sydow

You've really delivered a lot of value for the price and to be honest, I can't say that about all the authors I've supported in the past. I'd like to wholeheartedly thank you. The book has been an invaluable resource while working on our current project. The reading on my Kindle has been a real blessing because I can literally read about Ionic in bed :)

Baadier Sydow, Founder, Sem Zoom

The Themes

Some of the packages even come with high quality Ionic themes. You can get the Refine theme which is a beautiful product filtering application, and the Fliqs theme which is a movie catalog style application.

Check them out below:

These themes are fully functional, it's not just the design. Each theme is hooked up to a JSON data source that it pulls information in from, so it is much easier to switch to your own data source if you want.

Unlike the application walkthroughs in the book, we don't actually cover how to build these from scratch, but they have been built with an expert level of functionality and attention to design. You can take a look at the code to learn a few tips and tricks for yourself, and since each theme comes with 1 x Standard License, you can even use them directly for your own production app.

If you want to see full details on what the standard license allows you to do click here. The brief version is that the standard license entitles you to use the theme in one commercial (or non-commercial) product. You can sell whatever you create using the theme, or you can use it to create an app for a single client, but you are not allowed to resell or redistribute the theme by itself (just common sense stuff really!).

Vea Glenn

I wanted to reach out to you and say thank you so much for putting this book together, as well as all of your videos on YouTube. I'm a single founder of an ed-tech startup, and while a software developer for 17 years, Ionic/Angular/Cordova was new to me. I honestly feel as though I have expert insight that I can tap into as I push forward to getting my app successfully deployed. Based on what I already knew, and coupled with your book, I'm now prepared and motivated to move forward.

Vea Glenn, Founder, Insightful Decisions

The Packages

Building Mobile Apps with Ionic

BASIC PACKAGE

Building Mobile Apps with Ionic - Basic

The Basic Package contains everything you need to get started with Ionic development. You'll get access to all of the basic lessons and a walkthrough of the Quick Lists application which covers most of the core Ionic concepts, so it's a great application for beginners to tackle.

  • All Level 1 Content
  • eBook in PDF Format (Basic Version: ~387 pages)
  • eBook in EPUB & MOBI formats (Basic Versions)
  • Quick Lists Application Source Code
  • BUY NOW $39 (excl. tax)

PREMIUM PACKAGE

Building Mobile Apps with Ionic - Premium

As well as getting everything in the Basic Package, the Premium Package also comes with an additional two application walkthroughs. These applications go a little bit more beyond the basics and include things like fetching remote data and integrating with native API's.

This package also comes with the premium Ionic theme: Refine.

  • All Level 1 & Level 2 Content
  • eBook in PDF Format (Premium Version: ~558 pages)
  • eBook in EPUB & MOBI formats (Premium Versions)
  • Quick Lists Application Source Code
  • Giflist Application Source Code
  • Snapaday Application Source Code
  • Premium Theme: Refine (1 x Standard License)
  • BUY NOW $79 (excl. tax)

EXPERT PACKAGE

Building Mobile Apps with Ionic 2 - Expert

This is the package with the lot, it's for those of you who really want to dive in and get your hands dirty with Ionic. You'll get everything in the Basic Package and the Premium Package, but you'll also get another two application walkthroughs. You'll cover more advanced topics like creating a database backend, syncing local and remote data, displaying live data, integrating Google Maps and more.

You will also receive the 1 hour video course (including source code) and both of the premium Ionic themes.

  • All Level 1, Level 2 & Level 3 Content
  • eBook in PDF Format (Expert Version: ~750 pages)
  • eBook in EPUB & MOBI formats (Expert Versions)
  • Quick Lists Application Source Code
  • Giflist Application Source Code
  • Snapaday Application Source Code
  • Camper Mate Application Source Code
  • Camper Chat Application Source Code
  • Premium Theme: Refine (1 x Standard License)
  • Premium Theme: Fliqs (1 x Standard License)
  • 1 hour Video Course
  • Video Application Source Code
  • BUY NOW $129 (excl. tax)

All prices are in USD. Taxes may apply to some customers depending on their location.

View additional support and enterprise packages

Support Package

Want to bundle in some dedicated support? Grab the EXPERT package and 3 hours of consulting for a discounted price of $379 (excl. tax). You will receive the book and resources immediately, and I'll get in touch with you shortly after your purchase to organise the consulting.

BUY NOW $379 (excl. tax)

Enterprise Packages

Need to purchase multiple licenses for people within your organisation? The EXPERT package is available with a bulk discount for multiple users. The download link you will be supplied with can be used to distribute the book and all of its resources to anybody within your organisation, limited to the number of users you select below.

If you require more licenses, please contact me.

Around the Web

(some of the 3,500+ developers who have bought the book so far, and who's feedback has helped me improve it even more)

Who are you?

Josh Morony My name is Josh Morony, and I've been teaching mobile development on my blog for over 4 years, my free tutorials currently receive an average of over 4 million views per year, and over 16,000 developers are subscribed via email to receive my weekly free HTML5 mobile tutorials (why not join them?).

I've published multiple other books and courses including Mobile Development for Web Developers, an advanced course for Ionic developers called Elite Ionic, as well as a couple of older books on Sencha Touch and PhoneGap/Cordova development.

I take a practical and to the point approach to teaching mobile development. I aim for enough theory so that you can grasp what is happening, but not so much that you are bored to tears before actually building something. I understand that people have different levels of understanding and take the effort to make sure concepts, no matter how big or small, are explained thoroughly.

What do I get when I purchase the book?

Once you have purchased the package you want, you will receive a downloadable package that will contain all of the content for the book. The downloadable package will give you access to all of the content for your package, including all of the source code for the applications in your package. This will be available instantly after you make the purchase.

Can I use the example applications to build my own apps?

Yes, you may use the source code provided as you please (even commercially), however I ask that you do not submit an exact copy to app stores (we will walk through all of the steps for submitting an application, just don't hit that final submit button if you're using the example we have built).

What if I don't like the book?

If you feel like the book was not worth your money, then I will gladly refund you the full price. Simply reply to your purchase receipt email requesting a refund within 14 days. Please note that this refund policy does not apply to the $379 consulting package.

Still have a question?

Feel free to contact me through the contact form on my blog and I'd be happy to answer any questions you have about the book.

Back to packages