Ionic 1: From Web to Mobile
4.8 (829 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
5,763 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ionic 1: From Web to Mobile to your Wishlist.

Add to Wishlist

Ionic 1: From Web to Mobile

Future Proof Yourself. Turn your existing web development knowledge into mobile development super powers with Ionic
4.8 (829 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
5,763 students enrolled
Created by Asim Hussain
Last updated 2/2017
English [Auto-generated]
Current price: $10 Original price: $180 Discount: 94% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 7.5 hours on-demand video
  • 8 Articles
  • 25 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand what Ionic is and how it's related to Cordova and AngularJS
  • Setup their computer to build Ionic, iOS and Android applications
  • Have enough AngularJS knowledge to be able to build Ionic applications
  • Build hybrid mobile applications using Ionic Framework
  • Implement Push notifications, automatic app updates and analytics with the Ionic Platform tools.
  • Release their application to the Apple AppStore or Google Play Store.
View Curriculum
  • A windows or mac machine
  • A text editor or an IDE like WebStorm
  • A basic understanding of command lines and the terminal

IMPORTANT: This course is for Ionic v1 ONLY. Ionic v2 is currently unreleased in BETA

This course will NOT be updated to Ionic v2 once it's released, v1 and v2 are too different, another course will be created instead.

UPDATE: 8/16

  • Support for firebase v3 added

UPDATE: 6/16 

  • Support for open source parse server. 
  • Resources added in again to the Angular Review section. 
  • Android Marshmallow Update
  • Various other changes including updates to the Windows setup instructions


  • Updates and fixes to the TV Chat App, Mealtracker App & TED RSS Reader App.
  • Workaround for the iOS9 Breaking Changes
  • New Lectures on Chrome Developer Tools and IDE


Gartner predict that by 2016 50% of all mobile applications will be hybrid apps built using technology like Ionic.

Ionic is a powerful HTML5 SDK that helps you build native-feeling iOS and Android apps using web technologies like HTML, CSS, and Javascript. It's based on Cordova and AngularJS.

This course is for existing web developers, your level of HTML, CSS and JS doesn't matter but you must have some since we won't be covering those topics on this course.

You DO NOT need to know AngularJS.

We will cover the essential AngularJS topics needed to build Ionic applications in the AngularJS Review section (If you already know AngularJS feel free to skip it)

Through a series of 7 real-world examples you will learn the skills needed to build fully functional, cross platform iOS and Android mobile applications in Ionic.

The course will cover:

  • Implement both Tabbed and Side Menu navigation.
  • Interact with the phones Camera, GPS & play sounds.
  • Embed Google Maps with markers, popup info windows.
  • Login with Facebook and add real-time chat functionality with Firebase.
  • Implement list controls, with re-order, delete, pull to refresh and infinite scroll functionality.

The course will also cover the feature of the Ionic Platform such as

  • Ionic Push - Send cross platform push notifications with just a few lines of code.
  • Ionic Deploy - Update your apps automatically and silently.
  • Ionic Analytics - Easily add deep analytics to your application.

With the rapid expansion of Javascript into nearly every area of application development. Web Developers are now the most versatile developers in the market, enjoying long-term job stability, growth, and diversity of work.

Thanks to Ionic, you now can design, build, and deploy robust mobile apps faster than you could with native technologies, all while incurring little to no app performance penalties and sticking to the web technologies you already love working with, namely css, html and javascript.

Imagine if you were the CTO of a small tech company, who would you rather hire?

A versatile web/mobile superstack developer.

  • In the morning they can fix a bug with the front end of the website.
  • In the afternoon they get their hands dirty adding a new feature to the node server side application.
  • And then in the evening they work on the companies new mobile application which is launching on iOS and Android in 2 weeks time.


A unicorn native app developer, who can only work on iOS or Android.

Do I even need to say it?

With Ionic the dream of using web technology to build mobile apps is finally here. It isn't a second-class option, it's the future of mobile app development.

Who is the target audience?
  • Web developers who want to break our into the mobile development market
  • Freelancers who are starting to see that most of their clients are now looking for mobile apps
  • Freelancers who want to up sell clients to have both a web and a mobile application.
  • This course is meant for Web Developers who want to start building mobile applications, they don't need to know AngularJS
Compare to Other Ionic Courses
Curriculum For This Course
115 Lectures
8 Lectures 35:16

A quick introduction to this course in ionic, who am I, what will you learn on this course and who this course is for.

Preview 03:04

A summary of hybrid application development, an explanation of cordova vs phonegap and where does Ionic and the Ionic framework fit into all of this.

Preview 02:57

A deeper dive into Ionic, what it is and why you should be interested in learning it.

Preview 04:05

A summary of each section and how this course is structured.

Preview 02:56

An overview of the ionic playground ( which is a tool we'll be using throughout this course to help explain ionic concepts.

Preview 02:01

How to get help regarding issues with Ionic, both on this course and also for your own Ionic projects.

Preview 2 pages

OPTIONAL: How to use develop with the Chrome browser

OPTIONAL: What IDE am I using in this course?
5 Lectures 02:59

Installing Dependancies
5 pages

Setup for iOS development
5 pages

Setup for Android development on Mac
6 pages

Setup for Android development on Windows
Ionic Overview
11 Lectures 27:00

Creating projects using the Ionic CLI
3 pages

How to find completed code for sample apps
2 pages

Important! iOS9 Breaking Changes
1 page

iOS: Creating developer certificates and setting up XCode

Debug your iOS apps with the Safari Developer Tools
1 page

Setting up the Genymotion Android Emulator
8 pages

Running Ionic on Android Devices

Debug your android apps with Chrome
1 page
AngularJS Review
15 Lectures 55:22

Source code can be found at:

Data Binding

Modules & Controllers

Corrections: Debugging Angular Applications
1 page

Debugging Angular Applications

Source code:

Scope inheritance and the dot notation

Source code:


Source code:

ng-click & ng-submit

Source code:


Source code:


Source code:

ng-show, ng-hide, ng-if

Source code:

ng-repeat & filters

Source code:

Dependancy Injection & Services

The $http service and promises with the $q service

Source code:

Digest, Apply & handling callbacks from outside Angular
The 8 Ball App
8 Lectures 19:59
Corrections - 8Ball
1 page

What we are going to build and what you will learn whilst building it.


Setup instructions
1 page

Building the application

Adding animation effects

Previewing your application on the IonicView App

Ionic View App Limitations
1 page

Quick Question
The Soundboard App
7 Lectures 23:51
Corrections - Soundboard
1 page


Setup instructions
1 page

Styling ionic apps using the default colors

Building our ionic list based application

Using the cordova media plugin

Ionic list re-order and delete components
The CaffeineHit List App
12 Lectures 37:56
Corrections - Caffeinehit-List
1 page

API Playground


Setup instructions
1 page

Breaking out our app into multiple javascript files

Understanding the starter project code

Implementing the YelpService

Implementing pull to refresh with the ion-refresher component

Implementing infinite scroll with the ion-infinite-scroll component

Implementing swipe reveal buttons with the ion-option-button component

Using the cordova geolocation plugin to get the users lat and lon

Using the navigator plugin to show directions on the apple or google maps app
The CaffeineHit Map App
7 Lectures 23:27
Corrections - Caffeinehit-Map
1 page


Setup instructions
2 pages

Understanding the starter project code

Using SASS to theme your Ionic application

Implementing maps and map markers

Implementing popup info windows on maps
11 Lectures 39:20
Corrections - TED RSS App
3 pages


Setup instructions
1 page

Understanding the starter project code

Introduction to uiRouter and implementing the apps routes

Show a loading spinner with the ionicLoading component

Navigating between routes in Ionic and the back button.

Implementing the detail page and $stateParams

Changing the title in the header bar

Using the InAppBrowser plugin to open up links in the default browser app

Using the SocialSharing plugin to share links to social networks
The Mealtracker App
13 Lectures 01:24:13

Setup instructions
2 pages

Understanding the starter project code

CORRECTION: ng-messages-include and angular1.4
1 page

Forms and form validation in Ionic

Setting up Parse

Implementing authentication via Parse

Understanding and implementing the tabbed navigation component in Ionic

Interacting with the ion-header bar by using the ion-nav-buttons directive

Using the Camera plugin to take a photo

Creating objects in the Parse database

Querying objects from the Parse database

Implementing the settings tab
4 More Sections
About the Instructor
Asim Hussain
4.6 Average rating
3,430 Reviews
16,895 Students
4 Courses
Speaker • Trainer • Author • Developer

Over 15 years experience working for clients such as the European Space Agency and Google, regular conference speaker and published author.

Wrote my first program in 1988, my first website in 1996, earned a 1st Class Degree in Computer Science in 2000 and now 15 years later I own a digital agency in London called Bubblegum specialising in building complex web & mobile applications in AngularJS/Node/Django and IonicFramework.

As well as building applications for awesome clients word-wide, through Udemy i'm now following my dream of teaching other passionate developers like myself what I know through my company CodeCraft.

# What do I believe?

- I believe as a developer at it's heart, your job is to make the lives of other people more productive, that's what computing is all about.

- So if you yourself are not 100% focussed on making your own development as productive as possible then it doesn't bode well for your clients.

# What are my values?

- I'm 100% focused on practical development skills.

- I don't waste peoples time.

- I value my time and I value yours.

- I'm driven to be the most productive developer I can possibly be. I don't get caught up in philosophical debates.

- I value shipping “correct" functionality as fast as possible for myself and my clients.

If those are your values as well them you will love my courses.

If you want to sip your skinny decaf soya latte whilst discussing the pros and cons of different naming conventions for 3 hours then look somewhere else, if you want to learn how to ship functionality as fast as possible for yourself and your clients, these courses are for you.