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.
Before we begin, make sure you have your machine all set up for Ionic 2.
Download the installer for NodeJS and install the version 6 or greater.
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.
Open a terminal window and navigate to the
supermodular2 folder. Install the NodeJS dependencies:
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
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
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.page.ts. We will talk about these files later. As a result, the
charts folder should look similar to the following:
Installing NPM libraries
"chart.js": "^2.4.0", "ng2-charts": "^1.4.1"
In order to install the newly added libraries, run the command:
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.tsfile 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:
Creating the chart template
Now, let’s create the HTML template of the chart screen. Basically, we will display the chart inside the
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
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
Then, delete the related page from the side menu by editing the
Last, delete the
componentsfolder under the
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:
The AppSeed team