Combined with Angular , a JavaScript framework that is heavily optimised for mobile, you can create high performance applications that run everywhere with one codebase .

Ionic uses cutting edge web tech to create quality mobile user interface components that work on the web, in native applications, and even on desktop .

Building Mobile Apps with Ionic & Angular is an all-in-one resource for learning the latest and greatest version of Ionic . It has been updated for every major release, so you can rest easy knowing that you're not learning outdated tech.

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.

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

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.

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.

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.

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.

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 mobile web app development is and why you might want to use it.

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

If you haven't at least heard of Ionic, then you're probably completely new to mobile web 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 .

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: A progressive web application (PWA) that can be installed on the user's device directly from a website

that can be installed on the user's device directly from a website A native iOS application that can be distributed through the Apple App Store

that can be distributed through the Apple App Store A native Android application that can be distributed through Google Play 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.

WHY ANGULAR? The most recent version of Ionic (Ionic 5) 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.

“ 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 “ 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 4: Ionic & Angular Syntax Level 1 Level 2 Level 3 Lesson 5: 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: Facebook Authentication with Firebase Level 3 Lesson 5: Creating Messages & Navigation Level 3 Lesson 6: Using Firestore to Store Messages Level 3 Lesson 7: Firestore Security Rules Level 3 Lesson 8: Styling & Animations Level 3 Lesson 9: 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: Building for iOS and Android Using Appflow (without a Mac) Level 1 Level 2 Level 3 Lesson 5: Publishing as a PWA (Progressive Web Application) with Firebase Section 9: Congrats! Level 1 Level 2 Level 3 Lesson 1: Conclusion

“ 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

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. The Example Applications Quicklists

Giflist

Snapaday

CamperMate

CamperChat 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 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 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 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 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 Firebase. We will use Firebase both for authentication and for storing data in a Firestore database that will allow for communication and live data updates. Here's what we will cover: Navigation and restricting access to routes

Using a sliding menu

Using Firebase/Firestore to store data

Using Firebase for authentication

Simple animations

Using the Facebook API for native and web authentication

Configuring native projects for plugin integrations

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. You can watch the following lesson for free to see what the video course is like:

“ 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 you can view the license 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!).

“ 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

BASIC PACKAGE The core concepts you will need to build applications with Ionic. All Level 1 Content

eBook in PDF Format (Basic Version: ~376 pages)

(Basic Version: ~376 pages) eBook in EPUB & MOBI formats (Basic Versions)

(Basic Versions) Quick Lists Application Source Code

BUY NOW $39 (excl. tax) PREMIUM PACKAGE All of the core concepts as well as a deeper look into more complex examples and native integrations. This package also comes with the premium Ionic theme: Refine. All Level 1 & Level 2 Content

eBook in PDF Format (Premium Version: ~542 pages)

(Premium Version: ~542 pages) eBook in EPUB & MOBI formats (Premium Versions)

(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 Everything from the other packages, but with even more complex examples and coverage of building your own backend and implementing authentication. 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)

(Expert Version: ~750 pages) eBook in EPUB & MOBI formats (Expert Versions)

(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

Click here

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. 3 Users5 Users7 Users 10 Users15 Users20 Users 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)