Chapter 2. To-Do List App

In this chapter, we will be diving headfirst into Ionic and will be using a lot of the Ionic CLI tool. We will create our first Ionic application and add some basic Ionic features to our app. We will also get to run our app for the first time using Ionic and will debug our app in Chrome. We will finish this chapter by creating a to-do list application with Ionic. This application will simply let us add items to our app and also provide us a way of deleting these items or marking them as done.

Creating our first application

Creating a new project with Ionic is actually a very pain-free experience with the Ionic CLI. There are different ways to create a new Ionic project but the easiest and more standard technique is to use the Ionic templates. This is by far the easiest way, and it let us use any of the three standard templates provided by Ionic.

These templates include:

• The blank template: This creates a new project with some boilerplate code to help you get set up with a blank application

• The tabs template: This is the same as the first but instead of a blank application, you get an application with a tabbed design

• The side menu template: This creates a new application with a side menu design and some boilerplate

We will be using each of these in this book at some point of time. For now, we are going to start with the first and create a brand new Ionic project using the blank template. Before we move on, let's have a look at the command that the Ionic CLI uses to create a new...

The Ionic workflow

When you create a new Ionic project, there are a couple of folders and files that come as stock as part of the generated project. Your directory should look similar to what is seen in the following screenshot:

The structure you see is pretty much the same as in every Cordova project, with the exception of a few files and folders. For example, there is a scss folder. This contains a file that lets us customize the look and feel of our application and will be covered in detail in later chapters. There are also the platforms and plugins folder. The platforms folder, in most cases is auto-generated, but we will not be covering them in this book so you can ignore them for the time being.

You will also notice that in your www/lib folder, there is a folder called ionic that contains all the required files to run Ionic. There are css, fonts, js, and scss folder.

• css: This folder contains all the default CSS that come with an Ionic app.

• fonts: Ionic comes with its own font and Icon...

Summary

In this chapter, we got to create our very first Ionic application using the Ionic blank application template. We had a look at what the Ionic workflow looks like and also got to see some of the files that make up the workflow. We then dived in and discussed about how we intended to build our to-do list application. We further went ahead and actually implemented the UI of our to-do list app based on a wireframe. We wrote some Angular code and wired it up to the user interface we created.

In the next chapter, we will learn different ways to run and test our application for the very first time with the Ionic CLI.