Skip to content
O'Reilly home

Building Hybrid Mobile Apps with Ionic, Angular, and Cordova

Published by O'Reilly Media, Inc.

June 5 & 6, 2017

2 - 5 p.m. Coordinated Universal Time

This event has ended.

What you’ll learn and how you can apply it

By the end of this live, online course, you’ll understand:

  • How Ionic, Cordova, and Angular work together to create hybrid mobile apps
  • How to design and program Ionic apps
  • How to publish your applications to the app stores

And you’ll be able to:

  • Generate Ionic applications using the Ionic CLI
  • Use common Ionic UI components
  • Extend your Ionic applications with Ionic Native
  • Preview your applications on your devices
  • Compile your applications to ready them for submission to mobile app stores

This live event is for you because…

  • You’re a web developer who wants to learn how to create mobile applications with the Ionic framework.
  • You’re a current Ionic developer who is looking to learn the new syntax and capabilities of the latest version Ionic.



  • A general understanding of HTML, CSS, and modern JavaScript
  • Experience with Angular 2 and beyond (useful but not required)

Recommended preparation:

HTML & CSS: The Good Parts (book)

Learning JavaScript, 3rd edition (book)

Beginning JavaScript (Learning Path)

Beginning Programming with JavaScript (video)

On the Road to Angular 2 (Learning Path)

AngularJS: Up and Running (book)

Angular 2 Development with TypeScript (book)

Switching to Angular 2 (book)

Apache Cordova in Action (book)

Recommended follow-up:

Pro Angular, 2nd edition (book)

Angular 2 Development with TypeScript (book)

Apache Cordova in Action (book)

Building Progressive Web Apps (book)

Materials and downloads needed:


  • A connected computer, laptop, or other machine with an up-to-date copy of Google Chrome, Node.js, Xcode (for those wanting to develop for iOS—macOS required), Android Studio (for those wanting to develop for Android), Microsoft Visual Studio Code or similar IDE, and the Ionic CLI installed
  • An account
  • A mobile device (iOS or Android) with the Ionic View mobile app installed (highly recommended)


The timeframes are only estimates and may vary according to how the class is progressing.

Day 1

Introduction to Ionic(20 minutes)

  • Lecture: What’s new in Ionic 2; introduction to the Ionic CLI; Ionic file structure
  • Hands-on exercise: Create an Ionic blank template

Introduction to Angular and TypeScript (30 minutes)

  • Lecture: Introduction to Angular and TypeScript
  • Hands-on exercise: Short quiz

Building your first app (30 minutes)

  • Lecture: Building your first app with Ionic2Do; using Ionic serve to preview your application
  • Hands-on exercise: Compile and run your Ionic2Do app locally in the browser

Break (10 minutes)

Styling your Ionic app (30 minutes)

  • Lecture: How Ionic apps are themed; using Ionic View to quickly preview the app on your device
  • Hands-on exercise: Preview your app on your mobile device (with data stored remotely)

Ionic Native (30 minutes)

  • Lecture: Adding native touches to your application using Cordova plugins via Ionic Native; publishing the application to the app stores
  • Hands-on exercise: Replace the JavaScript dialog with a native dialog

Debugging Ionic applications (20 minutes)

  • Lecture: How to debug your application
  • Hands-on exercise: Use Chrome or Safari to remote debug your application

Wrap-up and Q&A (10 minutes)

Day 2

Building your second app (30 minutes)

  • Lecture: Building an app with IonicParks; exploring Ionic Tabs; loading data; Ionic Lists
  • Hands-on exercise: Build an application using the local data file and rendering the park list

Ionic navigation (30 minutes)

  • Lecture: How navigation works in an Ionic application; using the Ionic generate command to improve your workflow; designing the park details screen
  • Hands-on exercise: Generate and populate the park details screen of the app

Google Maps integration (30 minutes)

  • Lecture: Adding a map to your application; custom classes
  • Hands-on exercise: Add a live Google map to your application

Break (10 minutes)

Exploring other Ionic components (30 minutes)

  • Lecture: Common Ionic components (slides, popover, date and time, toast, grid, and gestures)
  • Hands-on exercise: Short quiz

Accelerate your application’s development and features (30 minutes)

  • Lecture: The larger elements of Ionic that can accelerate your application’s development and features (exploring, deploy, build, notification, and users)
  • Hands-on exercise: Short quiz

Next steps, wrap-up, and Q&A (20 minutes)

Your Instructor

  • Chris Griffith

    Chris Griffith is a User Experience Engineer specializing in creating prototypes for desktop, web, and mobile devices. He is also an instructor (Mobile Application Development) at UCSD Extension, and an author for and O'Reilly. Chris is also an Adobe Community Professional and PhoneGap Build Champion.

Start your free 10-day trial

Get started

Want to learn more at events like these?

Get full access to O'Reilly online learning for 10 days—free.

  • checkmark50k+ videos, live online training, learning paths, books, and more.
  • checkmarkBuild playlists of content to share with friends and colleagues.
  • checkmarkLearn anywhere with our iOS and Android apps.
Start Free TrialNo credit card required.