Building Mobile Apps with Ionic, Angular, and TypeScript

Course Overview
Hi, this is Steve Michelotti. Welcome to Building Mobile Apps with Ionic 2, Angular 2, and TypeScript. Ionic 2 is an exciting new sequel to the Ionic framework, which has taken the mobile development community by storm over the last couple of years. Ionic enables developers to build cross-platform mobile apps, which can be natively installed from an app store using web development technologies like Angular, JavaScript or TypeScript, HTML, and CSS. In this course we're going to cover numerous aspects of the Ionic 2 framework. And we're going to do this by building a complete application from scratch. You'll see how to effectively use Ionic 2 navigation, including some advanced scenarios. We'll work with data over HTTP and see how to hook it into Ionic's lifecycle events. We'll explore all kinds of ionic components, from basic components, like buttons and lists, to more advanced features, like virtual scrolling, pull to refresh, and mapping with driving directions. I'll also show how you can use Ionic to access native features of the mobile device including geolocation, the camera, barcode scanner, accelerometer and more. By the end of this course you'll be well prepared to start developing your own apps using the Ionic 2 framework. I hope you'll join me on this journey to learn the Ionic 2 framework with the Pluralsight course - Building Mobile Apps with Ionic 2, Angular 2, and TypeScript.

Getting Started with Ionic
In this module we'll get up and running with Ionic 2. First I'll show you how easy it is to install Ionic. Once Ionic is installed we'll create our first project. Once we've created our first project, we'll need different ways to test it, we'll start by testing it in the browser. I'll then show how you can test on an actual emulator. And of course, there's absolutely no substitute for testing on the device itself, I'll show you how to do that here. I'll also show how easy it is to use a tool called Ionic View to test on a device. Once we're comfortable testing the app, I'll walk you through the basic code structure of an Ionic app. I'll also show you some of the built in support that Ionic has for platform-specific displays. Finally, we'll add some basic Hello World style code in the application we just created. Let's get started now.

Navigation
In this module we're going to explore how navigation works in Ionic 2. Navigation in Ionic 2 is completely different than navigation in Ionic 1 and has been rewritten from the ground up. We're going to start out by talking about the navigation stack in Ionic 2. This is the foundation we need to understand first. We'll introduce the skeleton for the navigation of our entire app and put the preliminary views in place. With our baseline pages in place, we'll then start to actually implement navigation in our app. I'll show you examples of how the back button works with Ionic 2. We'll also take a look at how side menu navigation works. We'll then look at how nav bars and toolbars work. For any navigation system it's important to understand how to pass parameters between views, and we'll take a look at that as well. It's important to understand the basics first, but once you have that foundation, we'll take a look at some advanced navigation topics, which include navigation parameters with tabs and understanding how to manipulate root navigation.

Working with HTTP and Lifecycle Events
In this module were going to incorporate HTTP into our application. Working with HTTP is one of the most important aspects of building a mobile app and I'll show you the best ways to do this with Ionic 2. We're going to start by setting up our backend. We're specifically going to use Firebase, which is a well known backend as a service. We're then going to create a service in TypeScript that will have the responsibility in our app of interacting with HTTP. I'll show you how you can use promises to work with HTTP data. I'll then give you an introduction into the lifecycle vents available in an Ionic 2 app. This will be followed by a demonstration of how you can load data as part of the lifecycle. Working with promises is great, but with modern Angular 2 and TypeScript code RxJS is becoming the standard for working with HTTP. I'll show you how you can do this. I'll show you how you can use the loading component to provide a visual indication to your user that data is being loaded in the background. I'll conclude by showing how you can add third party libraries to your Ionic apps, specifically I'll use lodash so we can manipulate and filter the data we're receiving over HTTP. Let's get started.

Ionic Components
In this module we're going to add many Ionic 2 components to our app. Ionic 2 comes with a multitude of built-in components that are optimized for mobile apps. We'll start by taking a closer look at Ionic lists. We'll then add some list dividers. We've already used some buttons in our app, but we'll take an even closer look at what you have available. You've seen me add some icons earlier in the course, here I'll show you where you can find them and how you add them. We'll add Ionic cards to our views, which are becoming increasingly more common in mobile apps. I'll also show you how you can add custom CSS to customize the appearance of your components. I'll show you how you can use the Ionic grid system. Ionic 2 comes with a new component called the Ionic DateTime, this makes working with dates drastically simpler than in the past. I'll then show toggles and badges. I'll finish off by showing you how to use alerts and toasts. We'll cover a ton of content in this module, so let's get started enhancing our app.

Ionic Components: Beyond the Basics
In this module we're going to continue our journey exploring Ionic 2 components. In the last module we covered numerous components that are good to know from day 1, however, in this module we'll go beyond the basics and cover some more intermediate and advanced components as well as continue to explore more real world scenarios. We're going to start out talking about Ionic storage and we'll provide some preliminary local persistence for our favorite teams that we've been displaying on the My Teams home screen. I'll then show you Ionic events and how we can globally listen for those events from anywhere in the app. I'll show you the Ionic refresher component that allows the user to pull down and refresh. We'll then implement a search bar to make it easier for our users to search for teams. We'll look at potential performance issues of long lists in our app and we'll use virtual scroll to address those performance issues. I'll then implement the segment component to add some filtering to our app. It's very common in mobile apps to include mapping capabilities, we'll add that to make it easier for our users to find the games. And then we'll add driving directions as well. All of these components are definitely beyond the basics of just adding simple buttons and lists to our app. And they'll significantly increase the features and quality.

Ionic Native
In this module we're going to cover Ionic Native. The Ionic Native library is what enables your Ionic Cordova-based apps to be able to seamlessly access the native capabilities of the device. Before we dive into Native plugins, we'll first answer the question, what is Ionic Native? Then I'll show you how you can find Native plugins and add them to your app. After that we'll get into code examples and I'll start by showing you how to use the vibration plugin. We'll then see how we can use geolocation to get the current coordinates of the device. I'll show you how you can use the device camera within your app. Then I'll show how to use the barcode scanner. We'll cover how we can access the accelerometer with the device motion plugin and I'll show how you can implement local notifications. I'm actually going to do the demos I just mentioned in a separate app from the Elite Schedule app that we've been building, but at the end of this module we'll get back to building our Elite Schedule app and we'll integrate the Native SQLite plugin into that app.

Customizing Ionic
In this module we're going to look at some of the ways we can customize Ionic 2. At this point our app is fully functional, but we want to put some nice finishing touches on it before putting it in the app store. So far we've been using all the default colors that come with Ionic. We're going to start out by customizing a couple of the core theme colors. We'll then look at customizing some metadata in the config. xml, so items like the app title will look correct when we deploy to a device. I'll show you how we can generate icons for your app so that we don't have the default icon when it's deployed to a device. Similarly, I'll show how to generate splash screens.