Create your next Ionic 2 app

With Ionic 2 stable version arriving shortly, it is time to get familiar with all the great options Ionic 2 provides. If you are new to Ionic 2, these are the basics of creating your first Ionic 2 mobile app.

In this tutorial,

  • We will start by configuring our machines for Ionic 2 app development
  • We will use Supermodular 2 starter app where we will demonstrate the process of adding a new module
  • The new module will be a screen for showing an interactive pie chart with the help of ng2-charts library, an Angular 2 package for Chart.js.
  • Finally, we will configure the side menu so our new screen is included.

Follow along this post and you will end up creating your next Ionic 2 app in minutes!

Note: The complete source code of this tutorial is available in the next-ionic-2-app Gitgub repository.

Preparations

Before we begin, make sure you have your machine all set up for Ionic 2.

NodeJS

Download the installer for NodeJS and install the version 6 or greater.

Sass

In order to install Sass, firstly, you should make sure Ruby is installed on your machine since Sass has a Ruby dependency. If you have MAC OS, Ruby is already installed. Otherwise, you should install Ruby and, then, Sass. Depending on your OS, follow the quick instructions included in the official page of Sass.

Ionic and Cordova CLI

Whether you have a previous Ionic/Cordova installation and you want to update it or this is the first time you install them, open your terminal and run the command:

$npm install -g ionic cordova

Note: If you are a Mac or Linux user, the most likely is that you will need “sudo” at the front of this command in order to install the utilities globally.

Android and/or iOS Tools and SDKs

If you plan to build native apps for Android and iOS, you should install Android and iOS tools and SDKs on your machine. Since Ionic is based on Cordova, Cordova provides a very useful guide for installing the requirements for Android platform and iOS platform (Mac OS users only).

Starting a new Ionic 2 App

Supermodular 2 is a free starter template that allows you to start a new Ionic 2 project quickly offering some basic features commonly used in recent mobile applications. We are going to use it in order to build a basic Ionic 2 app with an extremely modular architecture and best software development practices applied.

Clone Github repo

Visit http://github.com/appseed-io/supermodular2 and download or clone the Supermodular 2 app:

$git clone https://github.com/appseed-io/supermodular2.git

Alternatively, it is recommended that you fork the repository since, later, you will be able to push any code you will add to this project straight to your own project repository.

Install libraries

Open a terminal window and navigate to the supermodular2 folder. Install the NodeJS dependencies:

$npm install

Install plugins and platforms

Install all the required Cordova plugins the app needs with the following command:

$ionic state restore

This command will actually restore all the platforms and plugins are included in the package.json file.

Note: In case you do not work on a Mac OS machine, open the package.json file and replace the iOS platform with the Android platform or leave the cordovaPlatforms array empty if you do not want to add a platform yet.

Run the app

In your terminal, make sure you are located in the supermodular2 folder and run the command:

$ionic serve --lab

Add a new module

In this section, we will add a new feature in the Supermodular 2 app. As the name of the app implies, the architecture is modular meaning that each feature is implemented in a separate module. The new feature we are going to create is a screen showing an interactive chart.

Creating Chart folder

In the pages folder we see each screen/page has each own folder where all the files related to that page are located.



The first step is to create a new chart folder under the src/pages/ path. Also, we will create three empty files in the same folder: chart.module.ts, chart.html and chart.page.ts. We will talk about these files later. As a result, the charts folder should look similar to the following:

Installing NPM libraries

For this feature, we will use the ng2-charts package which is based on Chart.js. In our package we should add the following lines under the dependencies:

"chart.js": "^2.4.0",
"ng2-charts": "^1.4.1"




In order to install the newly added libraries, run the command:
$npm install

Creating chart module

Everything related to the chart feature/module as a whole should be included in the chart.module.ts file. Notice that in the 3rd and 4rth lines we import the dependencies related to the chart libraries we installed earlier:




Now, we are going to declare the chart module in the app.module.ts file under the src/app/ path which includes all the modules the app has.
Importing main dependencies

We will import the Charts.js dependency in the main.dev.ts file under the src/app/ path which is is responsible for bootstrapping the application by adding the following line:

import 'chart.js/src/chart';

Creating the chart template

Now, let’s create the HTML template of the chart screen. Basically, we will display the chart inside the tag as shown below:

All these chart labels, data etc. will be set in the chart.page.ts file that we will see in the next section.

Implementing chart page

The chart.page.ts file will include all the logic behind the chart screen. Firstly, we make a reference to the HTML template that will be used and, then, we will set the chart data, type and labels. Also, we will log the event when the chart is hovered and clicked. Finally, the file should look similar to the following:

Displaying chart menu option

As a final step, we will make the chart screen available to the user through the side menu. In the app.components.ts file under the src/app/ path, in the pages array, there are all the menu options of the app. Thus, this is where we will add the chart page as follows:

Remove a module

You may run into the need to remove a feature’s module that already exists in the app. Now, that we have learnt how to add a feature, removing one is even easier. We basically do almost the same steps in reverse. Let’s remove Components feature from the app. Simply, remove the ComponentsModule from the app.module.ts file:




Then, delete the related page from the side menu by editing the app.components.ts file:



Last, delete the components folder under the src/pages/ path:

Final result

Starting with a starter app certainly gives a boost to your development process. Now, you know the structure of an Ionic 2 app and how to add a new module to it. By the end, your result should look somewhat like this:

Happy coding,

The AppSeed team

Stay tuned

Join our list and sing up to get early access to our latest news and free tutorials about Ionic.