Ionic 1: From Web to Mobile

Future Proof Yourself. Turn your existing web development knowledge into mobile development super powers with Ionic
4.4 (759 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,490 students enrolled
Sale Ends Today!
92% off
Take This Course
  • Lectures 116
  • Length 8.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 English

Course Description

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.

What are the requirements?

  • A windows or mac machine
  • A text editor or an IDE like WebStorm
  • A basic understanding of command lines and the terminal

What am I going to get from this course?

  • 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.

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

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


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.


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


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


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

2 pages

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

OPTIONAL: How to use develop with the Chrome browser
OPTIONAL: What IDE am I using in this course?
Section 2: Setup
Installing Dependancies
5 pages
Setup for iOS development
5 pages
Setup for Android development on Mac
6 pages
Setup for Android development on Windows
Section 3: Ionic Overview
Creating projects using the Ionic CLI
3 pages
Running Ionic in the Browser
How to find completed code for sample apps
2 pages
Important! iOS9 Breaking Changes
1 page
iOS: Creating developer certificates and setting up XCode
Running Ionc in IOS Emulator & Device
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
Section 4: AngularJS Review

Source code can be found at:

Modules & Controllers
Corrections: Debugging Angular Applications
1 page
Debugging Angular Applications

Source code:


Source code:


Source code:


Source code:


Source code:


Source code:


Source code:


Source code:

The $http service and promises with the $q service

Source code:

Section 5: The 8 Ball App
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
Section 6: The Soundboard App
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
Section 7: The CaffeineHit List App
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
Section 8: The CaffeineHit Map App
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
Section 9: The TED RSS App
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
Section 10: The Mealtracker App
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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Asim Hussain, Full Stack Web & Mobile Developer

Over 15 years experience working for clients such as the European Space Agency and Google.

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.

Ready to start learning?
Take This Course