Ionic 2 Quickstart: Cutting-Edge Mobile Development

Create Incredible Mobile Applications for iOS & Android Using HTML, CSS & Javascript.
3.6 (61 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.
275 students enrolled
25% off
Take This Course
  • Lectures 26
  • Length 1.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 1/2016 English

Course Description

This course will teach you the fundamentals of how to use the Ionic 2 Framework to develop cutting-edge mobile application from scratch.

The HUGE benefit to using the Ionic 2 Framework is that you can utilize your existing web technologies knowledge like HTML, CSS & JavaScript.

This means that you don't have to learn an entirely new language from scratch; How amazing is that!

Not only will you be able to create mobile applications from scratch, you will also be able to take your career to the next level. Not a lot of people have the ability to create mobile applications this fast.

Ionic 2 Framework will help you jumpstart your mobile application development career.

This course will have no fluff, just straight to the point knowledge & lectures. I'll be teaching you exactly how to make mobile applications for iOS and Android using the Ionic 2 Framework.

Want to hear the most amazing part?

You'll learn how to develop mobile application for iOS & you'll learn how to develop mobile applications for Android; all with one piece of technology!

Jumpstart your career today, come join in!

The best investment you can ever make is an investment in yourself.

There are tons of reasons why you'd want to pick up Ionic 2 and at it to your awesome arsenal of tools.

One of the biggest benefits of using Ionic 2 is that you'll only have to make & maintain one codebase; that will run on both iOS & Android (even Windows Phone in the future)!

What are the requirements?

  • Basic HTML, CSS & JavaScript Knowledge
  • Know How to Use a Text Editor
  • Basic Angular2 Knowledge Is Helpful But, Far From Essential.

What am I going to get from this course?

  • Create Cutting-Edge Mobile Applications Using Ionic 2
  • Take Your Career To The Next Level
  • Understand the inner workings of The Ionic 2 Framework
  • Be Able to Create Amazing Mobile Application From Scratch
  • Use The Incredible Tools That Ionic Offers to Streamline Your Workflow
  • Get a Jumpstart on Learning Ionic 2

Who is the target audience?

  • Anyone Who is Looking For a Way to Utilize Web Technologies to Build Mobile Application
  • Anyone Who Wants to Take Their Carreer To The Next Level
  • Anyone Who Wants to Be Able to Create Mobile Applications From Scratch

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: Getting Started

Quick overview of how the course is structured & what you'll be learning!


In this lecture we're going to install NodeJS on your system. I'm going to guide you through the entire process from start to finish.

The reason we need NodeJS on our system is because the Atom editor relies on it.

Also, we're going to be using the Node Package Manager to install ionic2 on our system so we can start building amazing hybrid mobile applications for both iOS and Android!


I highly recommend that you use the Atom editor although this is not a necessity. The Atom text editor is an IDE build by Github & it's open source. It's also hackable meaning that you can customize it in whichever way you want.

It's just a nice IDE to be coding in, it has tons of packages aswell so you can streamline your mobile application development using ionic2.


Atom doesn't have TypeScript support internally. But as always, there's a package for that!

We're going to be using TypeScript to build our Ionic 2 mobile apps; so we're going to need to have TypeScript support in our preferred IDE.


And of course, last but by far not least. We're going to use the Node Package Manager to install ionic onto our system.

Now we can officially start building amazing cross-platform mobile applications using web technologies!

2 questions

Getting started is a big part in any project. Let's see if you understand why.

Section 2: How to Build Your First Ionic 2 Mobile Application

We're going to be setting up your first Ionic 2 Application using the CLI that ionic provides.

This is going to get you up & running with your first mobile application in less than 2 minutes. It's crazy.


Let me show you the way around the folder structure that Ionic2 has created for us.

It's really important for any project; no matter what size, to know your way around the folders you're working in.

This is no less true in an Ionic2 mobile application. It uses the same web technologies that you're probably used to already so this shouldn't get you too confused.

3 questions

Understanding how to start a project & manage the folder structure is crucial in any development environment.

Let's see if you can answer these.


Visually explaining you how the navigation system inside of Ionic 2 works.

Giving you a conceptual overview of how to think about the navigation + very applicable examples.

You're going to understand how the Ionic 2 navigation system works in no time!


What's an application without pages? Exactly. Nothing.

I'm going to be teaching you how pages work within an Ionic 2 mobile application.

You'll also pick up some Angular2 concepts along the way!


Teaching you how to set up basic navigation in Ionic2.

Clear & concise overview of a simple navigation within your mobile app, how it works & why it works.

This is based on our visual explanation video.


Data, data, data! Your mobile application needs to pass data from one page to another. How do we do that?

That's exactly what I'm going to be teaching you in this lecture.

This is a really important Ionic 2 concept to grasp, so pay attention!

3 questions

Questions about how to Pass data through the navigation. This will help you solidify the concepts we covered in this lecture.


It's kind of hacky having all that hard coded data within your views, huh?

Let's change it & let's use an Ionic 2 provider/service.

We're going to be setting up a central data point from which all of our pages can grab the data.

Instead of constantly having to rewrite all of the code to get the data set up, we can now simply import a module & we're set!

That's the power of Angular2 & Ionic2 in action right there.

2 questions

Providers are incredibly important when it comes to making your web application easy to use & code. Let's see if you know what they are.

Section 3: Amazing Ionic 2 Tools

As we all know, tooling is really important. I'm going to be showing & teaching you how to use the "Ionic Lab" tool.

This allows you to preview your mobile application on both iOS & Android at the same time.


This is absolutely amazing. No need to run that emulator again now, just open the Ionic Lab & Get Started!


Sometimes we want to be able to share our application with a friend or just look & interact with it on our phone.

This used to be such a hassle in iOS & Android. But, Ionic 2 to the rescue!

The Ionic View Application allows you to preview your application on your phone & share it with a friend so they can check out your awesome work!

This will help you a lot when trying to streamline your Ionic development.


I'm going to be showing you your way around the Ionic Marketplace.

The Ionic Marketplace features starter packages, themes, plugins & much more.

It's absolutely amazing what a community can accomplish.

Want a starter package for your Ionic Mobile App? Done.

Want an awesome theme? Done.

Want a plugin that you would otherwise spend 7 hours coding up? Done in less than a minute.

2 questions

Understanding how to use tooling is essential.

Section 4: Building a Complete Advanced Todo Application Using Ionic 2

Let's scaffold out your starter application files together.

I'm going to be using another starter template here called "blank".

This does not have the Tabs set by default, but you can add them if you'd like.

Let's go and develop an Ionic 2 mobile application together!


Setting up the main Todo Page view in our Ionic Application.

Guiding you step-by-step of how to set up the basic Todo Page where the bulk of our application is going to take place.

A lot of Angular2 concepts come into play.


Setting up a central place to gather all of our todo data.

This allows us to import the provider into a page where we want to use the data.

An Ionic2 mobile application without data; is not an application. Get used to it.


This can be quite tricky at first, passing the data through the navigation, displaying it, etc...

Let me guide you through the exact process of getting this set up.

This will give you a very deep understanding of how data passing works in Ionic 2 & Angular2.

Also, your Angular2 skills are improving a ton if you've gone this far.


Advanced Delete functionality.

Let's implement an the delete functionality together. But we're not going to do it the boring way.

We're going to do it the hard way.

This is going to allow you to truly grasp the concepts that Ionic2 & Angular2 are giving us.

Trust me, you're going to thank me for showing it to you like this.

You're probably going to have to add the same functionality to one of your mobile application in the near future as well.

So get used to doing things the hard way. You'll learn a lot quicker.


Let me show you the magic of how Ionic2 & Angular2 work together to make your ionic2 hybrid mobile application come to life.

Your mind is going to be blown.

Angular2 is the next huge step in web development.

We're going to go over a ton of concepts in this video so watch it thoroughly.


And of course, the Add Todo Functionality.

A bit harder than you'd first imagine. I'll show you exactly how to go about implementing this into your mobile application.

This way of adding data in your Ionic2 application is something you're going to be using a lot.


Birdseye view of the application we created together & the amazing lessons we've learned along the way.

This is an incredible way for you to truly solidify the concept that we've used in this course.

Overviews, summaries & lessons learned are an amazing way to boost your learning.

Taking the time to go over your application in a real world setting is something you're going to be doing a lot of.

Get used to the process of stepping outside of the code & looking at the big picture.

Section 5: What We've Learned

Birdseye view of all the lessons we've learned throughout this course.

Ionic 2 mobile application don't have to be hard, whenever you're having trouble, feel free to refer back to this course.

The quick overviews allow you to put your brain to work on remembering all the concepts that I've shared with you.

The Ionic 2 Framework for hybrid mobile applications; is an absolute game changer.

You've taking a step in the right direction. Good job!


I've helped you jumpstart your journey into developing cutting-edge hybrid mobile applications using the Ionic 2 Framework.

But, in a real world setting, we're going to have to go about improving ourselves outside of the classroom as well.

I'll be sharing some amazing resources that will take your development carreer to another level.

Section 6: Course Update Videos

What you can expect from this Ionic 2 course in the future.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Nick Kenens, Cross-Platform Mobile App Developer

Ever since I typed my first word of code into a command line I've been in love with the practice of coding. 

It's one of the only professions where you can sit down and create something beautiful & impactful from scratch.

I look at my work as a piece of art that is worked to perfection day by day. As far as I know, perfection can't be reached, there's always something to improve & that's exactly why I love it.

I read a book a day to sharpen my mind, listen to podcasts, take courses & read at least 2-3 tech-related articles a day to stay up to date with the latest tech trends & technologies.

In my spare time, I love just "moving" by doing Brazilian Jiu Jitsu, Capoeira, Parkour & other movement-related sports. It's an amazing way to keep my mind sharp & my body in shape.

This shows up in my day-to-day energy & charisma. I'm not afraid to look a challenge in the eye and solve it.

Well, that's about it. Feel free to contact me if you have any questions regarding work-related stuff & hope to talk to you soon!

Ready to start learning?
Take This Course