Chapter 4. Ionic Components

In this chapter, we will be learning how to use some more complex Ionic components and controls. We will be creating a more advanced version of our to-do list application we created in Chapter 2, To-Do List App, using some more advanced built-in Ionic list components. We will call this more advanced to-do list application Bucket-List app. The idea behind this application is that it will allow us to enter all the interesting things we want to try in a lifetime. Therefore, we can enter the names of places we want to visit, the names of activities we want to do, and so on.

Creating a new to-do list application

In Chapter 2, To-Do List App, we created a simple to-do list application with the Ionic blank template. We were able to get this application to work by allowing us to add items into our to-do list application. We will be creating a new to-do list application using the Ionic blank template for us to add our new, more advanced components to our brand new BucketList application. Let's go ahead and create this new blank application by following the following steps. We will be calling our new application Bucket-List in order to differentiate it from the one we created in Chapter 2, To-Do List App.

1. To create the Bucket-List app, fire up a terminal window on your computer and navigate to the Desktop folder of your computer by running the following command:

   cd Desktop
   

2. After navigating to the Desktop folder of your computer, go ahead and run the following command to create the Bucket-List application based on the Ionic blank template:

   ionic start Bucket-List...

Summary

In this chapter, we focused on creating our Bucket-List application from scratch using the Ionic blank template. We also learned to use the <ion-list> component of Ionic and its child elements. We wrote some Angular code to wire everything up and got it running. The <ion-list>component is a very powerful component, and although the task of this chapter might appear a bit more complex that the previous ones, there are still some more powerful features that the <ion-list> component lets us do. For more information about <ion-list>, visit the official documentation of <ion-list> from the provided links in the appendix of this book to learn even more complex features.

In the next chapter, we will be learning some very exciting stuff about creating side menu applications with Ionic. We will also build ourselves a tourist application and work with the AJAX calls for the very first time using Angular's $HTTP service.