Understanding Ionic/Angular v4 : Your First Steps with Ionic
Receive an Ionic 4 tutorial each 7 days.
Ionic 4 is the latest version of the popular Ionic framework used to build cross platform and hybrid mobile applications with web technologies.
Ionic 4 has new features and optimizations which were not available in the previous versions such as CSS variables.
Before starting to learn Ionic 4 with Angular, make sure you have basic knowledge of Angular.
We also assume you are using Linux as the development machine and Android as the target mobile device but don't worry if you are using another operating system for developing or targeting another mobile OS. The steps are the same - That's actually one of the benefits of using Cordova based/hybrid mobile frameworks.
Ionic 4 is a vast libray with a lot of features therefore we are going to make a series of tutorials so we can cover as many topics as we can.
This tutorial is the first one of the series.
What you need to do before you can start building your mobile application is installing the required tools:
- Java SDK.
- Android SDK.
I've already covered how to install Node.js in a previous tutorial so feel free to check it in case you are finding any problem while installing Node.js or you can simply grab the installer from here.
We personally prefer to use NVM or The Node Version Manager to install Node.js because it allows you to quickly install and work with any version of Node.js and easilly switch between the existing versions.
Installing Ionic 4 and Cordova
After installing the Node.js platform; the next step is to install Ionic 4 and Cordova
So go ahead execute the following command in your terminal:
$ npm install -g cordova ionic@latest
Next, you should be able to generate and serve a new Ionic 4 application using the CLI:
$ ionic start myApp --type=angular
--type=angular allows you to generate an Ionic 4 project based on Angular.
After generating the application, just navigate into your application directory and run the
ionic serve command to run your mobile app:
$ cd myApp $ ionic serve
Now your Ionic 4 app is served and you can test it using your local web browser.
In this phase you don't need an emulator or even an actual device to develop your application but all these options are available with Ionic whenever you need them.
If everything went correctly you should see an app based on a Tabbed UI layout
Please note that the default app which gets generated is based on the tabs project which gives you a ready tab system to build your app upon but you can also specify other templates to use such as the sidemenu or the tutorial templates
ionic start myApp sidemenu --type=angular ionic start myApp tutorial --type=angular ionic start myApp blank --type=angular
Cordova is used to run your mobile app on a native device or emulator. You can easilly install it using the following command:
sudo npm install -g cordova
Building your Ionic 4 Mobile App
After generating your app and installing Cordova you can build your app for either Android or iOS. Just make sure you have installed the required SDKs - The Java SDK and Android SDK in case you want to build for Android and a macOS with Xcode if you want to build for iOS and then follow these simple steps:
ionic platform add android
ionic platform add ios ionic run android
ionic run ios
or if you are using an emulator
ionic emulate android
or ionic emulate ios
That's all what's needed to generate your Ionic 4 app and build it. If you are using these tools for the first time you are going to struggle a little bit when installing the Java SDK, Android SDK and latest version of Node.js depending on the operating system you use but don't worry there are many resources on the web to help you just search for them.
With Ionic 4, we can benefit from the high level and modern languages such as ES6 and TypeScript without worrying about Browser support and Ionic with the help of Webpack takes care of transpiling and compiling everything on the fly to ES5 which is what currently all browsers supports.
The Anatomy of an Ionic 4 App
First of all, this is a Cordova based project with plugins directory for installing Cordova plugins which includes default plugins.
It is also a Nodejs project since it has a
package.json file and a
There is also a
tsconfig.json used for TypeScript configuration.
app folder lives the TypeScript source files .The entry file is
app.ts which hosts the root component.
The app starts by importing the necessary constructs(classes,functions and decorators etc.) using the modern ES6 import system.
The first one is
Component which's a decorator from the Angular core if this is the first time you meet a decorator then simply accept my simple definition for it as a start:a decorator adds functionality to any class it decorates in our case the Component decorator transforms MyApp class into a Component.
Decorators begins by an @ symbol and takes an object as a parameter. In this case the only attribute of this parameter is template which specifies the template we are going to use for MyApp component.
You can put a raw HTML code right in template or specify the relative path of an HTML file by using
Next we import
ionicBootstrap from the
We import StatusBar from ionic-native.
We import TabsPage from './pages/tabs/tabs'.
After declaring our class MyApp. In the constructor we assign the TabsPage class to our rootPage member variable and then check if the platform is ready to execute
Now how we specify TabsPage as our roo?
Just look at HTML code in decorator you should see
[root]="rootPage" which means that the root property of
<ion-nav> is bound to the private class member
Next, the app gets bootstrapped using
MyApp as a parameter.
Angular brought us componentd. Components are a way of organizing your code as independent parts. Each part is a standalone and self dependent, and can communicate with other components.
All modern frameworks are starting to use this software pattern because it has big benefits when building,testing and maintaining your application code.
We are not going to talk about why using components is a better choice because this can take pages, anyway the web is full of this kind of information if you are interested.
Creating and Navigating Between Ionic 4/Angular Pages
Now let's see how to add and navigate between pages. If you look into the
app/pages directory you may notice that each page has its own folder which hosts html,scss and typescript files that belongs to each page .If we open up the about.ts file
You should notice that the about page is represented by a Component.So again we import the necessary constructs and then decorates our AboutPage class using @Component decorator .This time we use templateUrl to specify a relative path to our about.html file which will be used by AboutPage component to dispaly the about page.
You should notice one more thing the NavController class is injected via the class constructor.
You should be carefull to add the export keyword before the class if you need to import this class from other files.
Now let's look in the html template associated with this page.
These are self explanatory Ionic tags which setup a header and a content area with
So in order to create a page you need to create a class and template file and an optional scss file for styling the page markup.
Creating the Ionic 4 Tab System
Now lets understand how the tab ui was created. Go to the tabs folder inside pages and locate tabs.ts and tabs.html
So the typescript code behind this tab system is very simple. As you can see first we import the
@Component decorator. Next we import all pages to use for tabs and then we assign these pages to the private variables tab1Root,tab2Root and tab3Root in the constructor.
Now in the HTML code we bind these variables to the root property of each
Creating Ionic 4/Angular Pages
Ionic 4 has functionality to generate pages without writing so much code by hand. To simply generate a page,just use the Ionic CLI and type:
Creating Ionic 4/Angular Services
To generate a service use the
g provider command:
In this tutorial we have made our first steps towards learning Ionic 4 based on Angular.
Receive an Ionic 4 tutorial each 7 days.