Beginning Ionic Hybrid Application Development

Explore Ionic to build elegant, native-looking applications for iOS and Android
4.1 (5 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.
101 students enrolled
Sale Ends Today!
70% off
Take This Course
  • Lectures 21
  • Length 1 hour
  • Skill Level Beginner Level
  • 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 8/2015 English

Course Description

Mobile-first is the perspective developers have to think from to meet the demand of creating modern applications which are highly connected, accessible, and built for longevity.

Ionic enters this space as a powerful SDK which leverages AngularJS and Apache Cordova to enable the development of applications which look and perform like native ones, written purely in HTML, CSS and JavaScript. The value of Ionic for web developers is that grants the flexibility of developing mobile applications for major mobile platforms without getting into the complexity of working with native frameworks and languages.

Beginning Ionic Hybrid Application Development delivers your first steps into developing elegant, feature-rich cross-platform mobile applications with the framework, whilst taking advantage of its AngularJS backbone, and the Cordova API set.

We start off installing Ionic, exploring various commands such as start, serve, platform, run, and emulate, giving you a basic foundation of working with the Ionic CLI. We will then walk through built-in templates, themes, and headers, before creating an Ionic list, rendering data for it, and taking a look at creating services to manage our data efficiently.

Next, we start to incorporate greater sophistication by adding elements such as infinite scroll and pull-to-refresh, implementing data persistence, and focus on generally enhancing the user experience. Finally, we will talk about deploying our application to an emulator for testing purposes, and discuss Cordova plugins that can add even more functionality. By the end of the video you will have developed a full-featured, multi-platform mobile Ionic application.

About The Author

Troy Miles is a veteran software developer with over 35 years of experience building applications for a wide variety of systems. He is also a noted speaker on all aspects of software development. Troy has spoken at Velocity, MobileWeb Dev Con, Mobile Dev+Test, and NG-Vegas. He is also a regular speaker at So Cal and Silicon Valley Code Camps plus in front of local developer groups all over southern California. A few of his talks can be found his YouTube channel.

What are the requirements?

  • Familiarity with AngularJS is useful, but not necessary.
  • This video course is an easy-going and pragmatic approach to authoring style sheets, and will help you gain a very solid understanding of CSS. The course keeps building your knowledge as each section discusses several features with CSS3 in order to create complex, feature-rich web applications.

What am I going to get from this course?

  • Develop a hybrid mobile application with Ionic and AngularJS
  • Explore key commands of the Ionic CLI for an efficient development experience
  • Manage application data easily with AngularJS services and Ajax
  • Incorporate interactive mobile features to create intuitive user experiences
  • Beautify the application further by calling upon Cordova plugins
  • Fetch real-time data by making interactive calls to third-party websites
  • Deploy your application to the emulator for testing

Who is the target audience?

  • Beginning Ionic Hybrid Application Development is for web developers and aspiring mobile application developers who possess a good working knowledge of HTML, CSS and JavaScript.

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 with Ionic

Ionic is a new framework that is unfamiliar to many. We now introduce this framework.


Installing open source projects is rarely easy. We use the ionic box to make things as easy as possible.


Ionic has dozens of commands. Let's use some of them to get more familiar.


Ionic has half a dozen templates. Let's start getting familiar with some of them.

Section 2: Programming Ionic

Ionic uses a program structure unfamiliar to many developers. The starter templates create the basic structure of the app.


Understanding routing is critical to creating apps with Ionic. Ionic uses the very popular ui-router library.


Menus are a very familiar programming metaphor. Creating menus and adding items is easy in Ionic.


Controllers in Angular act as the glue between the model and the view. We create our own controller to eventually render our data.


Lists are an often used UI pattern. Making one in Ionic is simple.

Section 3: Services and AJAX

It is best practice to use a service to implement data access. Let's create a service.


Mobile apps need to access remote data. Learn to make an AJAX call.


Controllers need access to remote data. Call the service from the controller asynchronously.


The service returns only the first page out of many possible pages. Use an infinite scroll to get all the pages.


We need a way to reset the list of coffee shops. Implement a pull to refresh.

Section 4: Ionic Components and Persistence

Ionic has a large number of CSS and JavaScript components. We tour the components to get familiar with them.


Users prefer apps that look like native apps. Ionic supplies CSS components that look and act like native.


We have components but they aren't functional. Use an angular value object to hold the component's values.


We need the values stored in the Settings object to persist between app sessions. Use local storage to cause the values to persist.

Section 5: Deploying and Plugins

We need to use some of the device's native feature. Add to the app a plugin that provides the native feature.


Our app runs only in the browser. Add a platform to allow us to build the app for a device.


We want to install our app on a device. We use the ionic run command.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course