Expanded

Building Mobile Apps With the Ionic Framework and AngularJS

By Steve Michelotti
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.
Get started
Course info
Rating
(1029)
Level
Intermediate
Updated
Nov 18, 2015
Duration
3h 11m
Table of contents
Introduction
Introduction 1m Course Overview 2m What Is Ionic? 2m Cordova - What and Why? 2m What We'll Be Building 1m
Getting Started With Ionic
Overview 1m Ionic Command Line Features 1m Installing Ionic 1m Starting a New Project 2m Run the App With a Browser 4m Run the App With an Emulator 2m Run the App on a Mobile Device 1m Ionic Starter Templates 3m Setting Up a Development Environment With Sublime Text 2m Setting Up a Development Environment With Visual Studio 2m Setting Up CodePen 2m Summary 1m
Navigation and Routing
Overview 1m Navigation for Elite Schedule 1m Ionic Headers and Footers 2m Introduction to Ionic Tabs 2m Tabs - Setting Up the Initial Structure 3m Side Menu - Setting Up the Initial Structure 3m Introduction to Angular UI Router 5m Adding Routing for Tabs 4m Adding Routing for Side Menu 4m Route Parameters 3m Adding Navigation Animation 1m Adding a Back Button 2m Summary 1m
Ionic Components
Overview 1m Adding Initial Data 5m Adding a Basic Ionic List 6m List Dividers for Grouped Data 5m Incorporating External Libraries With Bower 5m Ionic Grid System 8m Ionic Typography 2m Ionic Cards 6m Toggle and Checkbox Controls 3m Customizing Buttons 3m Ionic Popup 1m Summary 1m
Data and Caching
Overview 1m Using $http 3m Enabling Cross-Domain 2m Adding Promises With $q 3m $ionicLoading 3m Angular Cache - Overview 1m Angular Cache - Creating and Configuring 2m Angular Cache - Implementing Caches 5m Angular Cache - Enabling Offline Data 8m Refreshing Data 5m Summary 1m
Mapping
Overview 1m Google Maps for Angular - Introduction 2m Google Maps for Angular - Installation and Setup 1m Google Maps for Angular - Implementation 4m Google Maps for Angular - Markers 3m Driving Directions 2m Summary 1m
Customizing Ionic
Overview 1m Custom Markdown Directive 6m Customizing the CSS 2m SASS Overview 1m Installing SASS 1m Implementing SASS Changes 4m App Metadata and Icons 5m Summary 1m
ngCordova
Overview 1m Introduction to ngCordova 2m Installation and Setup for ngCordova 4m ngCordova Dialogs 3m ngCordova Vibration 1m ngCordova Network 1m ngCordova Device 2m ngCordova Camera 3m ngCordova Barcode Scanner 1m Summary 1m
Description
Course info
Rating
(1029)
Level
Intermediate
Updated
Nov 18, 2015
Duration
3h 11m
Your 10-day individual free trial includes:

Expanded library

This course and over 7,000+ additional courses from our full course library.

Hands-on library

Practice and apply knowledge faster in real-world scenarios with projects and interactive courses.
*Available on Premium only
Start a Premium 10-day free trial
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 Ionic Framework 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!

Course FAQ
Course FAQ
What is Ionic Framework?

The Ionic Framework is an open source front-end software development kit for quickly building professional quality mobile and desktop apps with HTML, CSS, JavaScript, Angular, and TypeScript.

What will I learn in this course?

You will learn:

  • How to get up and running with an Ionic app
  • Navigation and routing
  • Primary Ionic components through demonstrations
  • Data and chaching
  • Mapping & providing driving directions
  • ngCordova & much more
Is Ionic Framework free?

Yes! Ionic Framework is absolutely free. We will go over how to get it installed in the second course module.

Who is this course for?

This course is for any and everyone who wants to learn how to build mobile apps through the Ionic Framework. It is especially valuable for web developers.

Are there prerequisites for this course?

This is an intermediate level course, so it assumes some prior experience with web development and AngularJS. But it doesn not assume any prior experience with the Ionic Framework itself.

About the author
Steve Michelotti
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
C# Design Patterns: Mediator
Advanced
37m
Dec 17, 2019
C# Design Patterns: Composite
Intermediate
33m
Nov 14, 2019
Dapper: Getting Started
Beginner
1h 27m
Jun 12, 2019
More courses by Steve Michelotti

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT

Course info
Rating
(1029)
Level
Intermediate
Updated
Nov 18, 2015
Duration
3h 11m
Pluralsight IQ
Know exactly where everyone on your team stands with assessments and analytics.
Try our full library including this course free for your whole team for 14-days.