Building Mobile Apps With the Ionic Framework and AngularJS

Introduction
Hi, this is Steve Michelotti. Welcome to Building Mobile Apps with the Ionic Framework and AngularJS. Ionic is an exciting new framework built on top of AngularJS that enables us to quickly build great mobile apps with a mobile optimized framework using the paradigms that AngularJS developers are already familiar with. This is going to be a totally code-focused course. In this course we're going to build a mobile phone app from the ground up. Here's a preview of what we'll build. It's an app for basketball tournaments and leagues, which allows coaches and parents of players to easily see the schedule for the leagues. Here's a screen where we seen leagues and schedules and then this takes us to a list of teams where we can select the team, we can follow and unfollow teams, as well as see the team schedule and results, and we can see game details, times, locations, scores. We can also see the standings for the leagues or tournaments including win/loss percentage, points for, points against, and we can select teams from this screen as well. We can see the various locations where games are played. We can tap and get directions and mapping for each one. I'll also show how you can tap to get driving directions from the mobile phone app. Here we see a Rules screen where we transform HTML using markdown. And here is where we can see the screen of the teams that we're following. We're going to build all this throughout the course.

Getting Started With Ionic
In this module I'm going to show you how you can get up and running very quickly with Ionic. This will include starting the initial code for your app, testing your app, and setting up your development environment. First I'll start by installing Ionic and discussing the Ionic command line features. Throughout this module, you'll see how simple it is to use. Then I'll show you how to create the code and structure for your initial project. Next I'll show you how you can run your app. This will include testing your app in a browser, an emulator, and also on the mobile device itself. Then I'll show the numerous starter templates that are built in with Ionic. Finally, I'll show you how you can easily set up a development environment. I'm going to show this with both Sublime Text and Visual Studio, but throughout this course I'll be using Sublime for my development environment.

Navigation and Routing
In this module we're going to cover Navigation and Routing with the Ionic framework. I'll start by showing you how to use Ionic headers and footers, which are essential to providing the structure for your views, as well as header bar-based navigation. I'll then show you how you can implement tab navigation between views, as well as side menu navigation. Along the way we'll dive into the AngularUI routing framework, which is what Ionic uses for routing. We'll do all this, and along the way we'll start building out our Elite Schedule app.

Ionic Components
Ionic comes with numerous feature-rich components that enable you to build high quality mobile apps. In this module we'll cover many of these components. I'll start out showing Ionic lists. I'll start with the basics and then show how you can group data with list dividers, as well as incorporate external libraries to customize list data. We'll then talk about Ionics advanced grid system, which makes alignment a true pleasure. Next we'll cover Ionic cards, which is an attractive alternative for displaying information in your app. I'll then show several Ionic controls such as toggles, checkboxes, and button customizations. Ionic also comes with numerous services. One of those services is the Ionic popup, which I'll demo later in this module.

Data and Caching
In most mobile apps you're going to want to communicate over HTTP to interact with your data. In this module we'll cover not only HTTP communication, but also other aspects that are important to mobile app development such as caching, which enables offline usage. Since Ionic is built on top of Angular, we can just use the normal $http service that comes with Angular. I'll show you how to use that at the start of this module. We'll also look at using promises with the $q service that comes with Angular. Typically you'll want to give your users an indication of when data is loading in your app and I'll demonstrate how to do that with Ionic. We'll then look at implementing caching, which provides for a better user experience, as well as enabling offline scenarios. Finally, I'll show you how you can use Ionic to enable a common experience of the user refreshing their own data by pulling and releasing a list to refresh.

Mapping
An extremely common use case in many mobile apps is the ability to use geolocation and mapping. In this module we'll extend out Elite Schedule app to provide a marker on a map for any game location, as well as the ability to get driving directions to that location. We're going to use the Google Maps for Angular library for this module and I'll start out with a brief introduction to this library to explain the primary features. I'll then walk you through the steps to install this library and make sure everything is set up correctly before we incorporate it into our app. Next, we'll extend the Elite Schedule app and add a screen that shows a map provided by Google Maps for Angular. I'll then demonstrate how to drop markers on a map at specific coordinates for our game locations. Finally, I'll show you how our app can initiate the default driving directions app on your device to get directions to the game location.

Customizing Ionic
Despite how much functionality comes built in with Ionic, one of its strengths is the ability to be customized. In this module, we'll make some customizations and tweak the app in a more professional way. We're going to start by building a custom Angular directive that enables us to use Markdown for client-side formatting and display. We'll then use CSS to create display-specific elements for just certain screens in the app. Ionic CSS is built on Sass. I'll show you how you can customize this to make global changes in the app. An important distinction to remember is that if you just want to make specific stylings to certain screens, custom CSS is usually the best and simplest option for that, however, if you want to make more global styling changes to the app, customizing the Sass is the best approach. Finally, I'll show you how you can customize the app metadata to ensure that you have the correct display for things like the app title, author, and its icon.

ngCordova
In this module I'm going to introduce you to ngCordova. NgCordova is technically not a part of Ionic, in fact you can use ngCordova in any Cordova-based application that's using Angular. It doesn't have to be Ionic, but ngCordova was created by the Ionic Team after several requests from the community for a more Angular-friendly API when dealing with Cordova development. In this module I'm going to start with an introduction to what ngCordova is and its primary features. I'm then going to walk you through the installation and setup of ngCordova into your app. Then I'm going to take you through a series of demos using native device features by leveraging ngCordova on an iPhone.