Building Mobile Apps With the Ionic Framework and AngularJS

This code-focused course shows how to build mobile apps with the Ionic Framework and AngularJS. The Ionic Framework represents an exciting new way to quickly build professional quality mobile apps.
Course info
Rating
(1024)
Level
Intermediate
Updated
Nov 18, 2015
Duration
3h 12m
Table of contents
Introduction
Getting Started With Ionic
Navigation and Routing
Ionic Components
Data and Caching
Mapping
Customizing Ionic
ngCordova
Description
Course info
Rating
(1024)
Level
Intermediate
Updated
Nov 18, 2015
Duration
3h 12m
Description

The Ionic Framework is a tremendous step forward for quickly building Cordova-based mobile apps. Built on top of AngularJS, developers are able to leverage all of their pre-existing AngularJS skills when working with the Ionic Framework, considered by many to be the "Bootstrap for mobile." In this course, we will see how to quickly get up and running with an Ionic app in seconds. We will then cover navigation and routing, followed by demonstrations of all the primary Ionic components. We will also cover data and caching for offline functionality, as well as mapping and providing driving directions. We will finish with a review of ngCordova to easily access native device features such as the camera, barcode scanner, and more. By the end of the course, you'll be able to start building your own mobile apps using the Ionic Framework and AngularJS!

About the author
About the author

Steve is a Program Manager with Microsoft on the Azure Global Engineering team. Prior to joining Microsoft, he was a 7-time Microsoft ASP.NET MVP.

More from the author
Yeoman Fundamentals
Beginner
2h 32m
18 Dec 2015
More courses by Steve Michelotti
Section Introduction Transcripts
Section Introduction Transcripts

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.