Introducing Ionic 2

Build a cool, pretty, and fully-featured mobile app in no time using the power of Ionic 2 and Angular 2
4.0 (65 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.
350 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 22
  • Length 1.5 hours
  • 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 2/2016 English

Course Description

Hybrid apps are changing the way people build mobile applications. With Ionic 2, hybrid app developers are gifted with not only a fresh, well-built, and powerful platform, but also a tool to enjoy their development experience. Apps can be built in record time, yet remain visually attractive and contain advanced features.

Introducing Ionic 2, will help you discover all the building blocks of an Ionic 2 application. You will learn how to use built-in components, make API calls, and style your app to your liking, so prepare yourself for many hours of fun development with Ionic 2.

We’ll start by bootstrapping an application, enhancing one cool feature at a time. Each feature will cover one of the essential components of an app: user experience, logic and data, and the user interface. By the end of the course, we will have built an entire awesome iTunes Browser app.

First, you’ll find out how to add pages and navigate between them, including going back and forth. Once new pages are in place, we’ll focus on grabbing real data from an API via AJAX with and without JSONP. With data and views in place, we’ll focus on improving the user experience and using modals, action sheet, alerts, loaders, and even a fully validated form. We also cover a range of various topics including styling, navigation with parameters, and Angular 2 pipes to filter and transform the way data is presented.

Introducing Ionic 2 will take you on the same journey as if you were building a real application, from scratch to a working product. You’ll soon see how this powerful mobile application framework can make your development fast, structured, and at the same time incredibly enjoyable.

About The Author

Mathieu Chauvinc is a Managing Director at Red Ape Solutions and works on keeping the company at the bleeding edge of web technologies. On a daily basis, he leads the tech team of 15 and collaborates with them in building complex single page applications and neat hybrid mobile apps. He has been involved in web technologies for over a decade, from Django to Go, SQL to NoSQL, Mootools to Angular, continuously trying to keep the right balance between the excitement of new frameworks and the stability of proven ones. He always has a special place in his heart for Python and Django.

He holds a Master’s in Engineering from the German University Karlsruhe and a Master’s in Engineering from the French ENSAM (Paris). Despite having an engineering background, he has always had a passion for knowledge sharing, which follows him to this day, and he regularly conducts corporate or free training on various I.T. topics in his adoptive country of Malaysia. He is also the author of the Introducing AngularJS and Learning JavaScript Promises video courses, published by Packt Publishing.

What are the requirements?

  • It is the perfect framework for developers who are specialized in web development to enter the market of mobile app development.

What am I going to get from this course?

  • Make API calls and circumvent cross-origin restrictions with JSONP
  • Customize an Ionic 2 application using the power of SASS variables
  • Keep your code structured and reusable by implementing separation of concerns
  • Interact with users and gather relevant information using a form
  • Keep the user experience as close to native applications as possible using visual aids such as modal and actionSheet
  • Master the emulator and native loader options to see the final application while building it

What is the target audience?

  • If you have experience of using Ionic 1 and Angular 1, you will find this video course a useful bridge to the ground-breaking Ionic 2 / Angular 2 combo. Anyone with basic JavaScript experience will be able to make full use of the knowledge imparted in this course.
  • For native app developers, it is the first framework that will both speed up their development cycles and yet keep an amazing native experience.

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.

Curriculum

Section 1: Setting Up
03:33

This video will provide an overview of the course.

02:45

Starting a project can sometimes mean installing tons of things and can be quite a lengthy process before everything is up and running. However, this is not the case with Ionic 2, which offers a great CLI and a "start" command to bootstrap code, including a side menu, several pages, and so on.

02:49

It is important for developers to be familiar and comfortable with the structure of the project. We'll take a look at the location of some of the different elements of the project, configurations, dependencies, hooks, and actual app components.

02:56

The app needs to be served, but this depends on its status. Let's take a look at which way of serving is better. The live reload server is an obvious winner for ease of use and debugging, while the new lab view helps us think about the experience on both Android and iOS. Emulators give a better idea as to the real experience that users will have; finally, the device can be used when the app is close to finalized.

Section 2: Pages and Basic Navigation
03:05

Apps always contain several pages. We need to create them and ensure that they are navigable.

01:38

Ionic2's navigation system is very different from the previous version. We will take a look at how the stack is used and the difference between the root and the other pages.

04:15

Navigation concepts are acquired; it is time to apply them to our application.

Section 3: Basic Ionic 2 Components
05:15

We need to present the list of search results in a visually attractive list. Ionic makes this easy with the ion-list and ion-icon components, and Angular allows us to repeat the items using ngFor as well as bind the values of attributes to the DOM elements' properties.

03:27

The app executes a search on the iTunes API. This requires a search bar that will react when the user presses "enter". We'll use the search bar component to present the query input and bind to the keyup as well as cancel events.

04:39

The search should be targeted to a specific country's iTunes API. So, we will create a settings page in which we'll use a radio to select the country.

Section 4: Services
04:08

We need to load real data from an API. For this, we need HTTP_PROVIDERS to be provided and the HTTP service to be dependency injected.

05:43

Some APIs do not allow cross-origin calls. Also, having logic coded inside the component itself isn't a good practice. So, we'll create our own service and make use of Jsonp to get around the cross-origin restrictions

Section 5: Advanced Ionic 2 Components
03:39

Filtering and other calls for actions are vital in any app but not easy to present smartly in a mobile application. Action sheet is a great solution to this issue; it displays a nice overlay, and we can code what happens when we click on each button.

04:11

Temporary or intermediary pages are often necessary in applications. Although we know we can navigate to a page with a Back button, a modal makes more sense sometimes from a user-experience perspective. We will create such a modal and pass the track we clicked on as part of the navigation to display a preview of this track.

03:06

Cell phones often face a shortage of space. So relying on a bulky button is rather outdated. Pull-to-refresh is an amazing user experience tool that allows you to pull a list of items and refresh it with new ones.

Section 6: User Interactions
05:32

The application needs to communicate with the user. Through the use of various dialogs, an alert, a confirm box, and a prompt, we will make the app clearer and more interactive with the user.

02:46

Tasks run in the background can be confusing to the user; they can't see that something is happening. Loaders or progress indicators take care of this issue and give users a clear statement that their request is being processed.

04:03

Forms are one of the most common type of interaction with users. They can be tedious to build and validate, though. We will use the FormBuilder service to create a form focused on its inputs and leverage the validation framework to display error messages when needed.

Section 7: Wrapping Up
03:06

Though the app looks really nice, it is rare that your corporate colors match the out-of-the-box Ionic feel. Ionic uses a large number of SASS variables, which you can override in order to make the app feel more like your own.

02:01

We need to be able to navigate to the artist view and to pass along the artist we are looking at. Extra information can be passed during navigation to either root pages or intermediary pages. On the destination page, NavParams can be used to retrieve said information.

01:40

Carousels or sliders are a very common type of display for limited lists where visuals are important. The built-in ion-slides allow us to very quickly come up with such a carousel and takes care of touch events, such as sliding.

03:44

It is sometimes troublesome and also less declarative to work on data only within the controller. Pipes allow us to modify data from within the template. They are typically used to filter arrays or format content (dates, pluralization, and currency)

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