Understanding Ionic 2 : First steps with Ionic 2
Ionic 2 is the version 2 of the popular Ionic framework used to build cross platform and hybrid mobile applications with web technologies .Ionic 2 makes use of Angular 2 instead of Angular 1 and comes with features and optimizations which weren't available in Ionic 1.In version 2 the Ionic framework is completely rewritten to bring new experience while building hybrid mobile applications .
Before starting to learn Ionic 2,make sure you have basic knowledge of Angular 2.I'm also assuming 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 one of the benefits of using Cordova based mobile frameworks .
Ionic 2 is a vast and complex framework therefore I'm going to make a series of tutorials so i can cover as many topic as i can.This tutorial is the first one so don't worry if you don't find what you need in this first one because other tutorials are coming .
What you need to do before you can start building your mobile application is installing the required tools
Installing Java SDK.
Installing 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 .
I 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 versions.
Installing Ionic and Cordova
After installing the Node.js platform the next step is to install Ionic 2 and cordova So go ahead execute the following line.
npm install -g cordova ionic@beta
Next,you should be able to scaffold a new Ionic 2 app using the CLI
ionic start myApp --v2 cd myApp ionic serve
Please not that the beta version of Ionic works with both v1 and v2 projects so you need to specify which version you want to use .If you want to use Ionic 2 just add --v2 switch when scaffolding your app.
After generating the app just cd into myApp directory and hit ionic serve to start your mobile app
So now you Ionic 2 app is served and you can test it and play with it using your local browser.In this phase you don't need an emulator or even an actual device to develop your app but all these options are available with Ionic whenever you need them.
If everything has gone 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 --v2 ionic start myApp tutorial --v2 ionic start myApp blank --v2 --ts
Cordova is used to run your mobile app on a native device or emulator .You can easilly install with
sudo npm install -g cordova
Building your 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 MAC OS 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 2 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 2 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 Gulp takes care of transpiling and compiling everything on the fly to ES5 which is what currently all browsers supports.
The anatomy of an Ionic 2 App
First of all,this is a Cordova based project with plugins directory for installing Cordova plugins which includes default plugins but we can also add any plugin by just issuing ...
It is also a Nodejs project since it has a package.json file and a node_modules directory .You can also notice the gulpfile.js file since Ionic 2 uses Gulp to automate tasks such as building,compling and transpiling ,minifying and compressing etc..
This is what Ionic 2 looks in this file in order to function correctly.
In the 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 angular2 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 templateUrl instead.
Next we import Platform and ionicBootstrap from ionic-angular.
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 StatusBar.styleDefault();
Now how we specify TabsPage as our root ? Just look at html code in decorator you should see [root]="rootPage" which means that the root property of
Next the app gets bootstrapped using ionicBootstrap(MyApp) with MyApp as a parameter.
Angular 2 brought us the notion of a component.Components are a way of organizing your code as independent parts ,each part is 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.I'm 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 Pages
Now lets 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 lets 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 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 .Then 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 pages on the fly
Ionic 2 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 Services on the fly
To generate a service use g provider
So in this tutorial we have made our first steps towards learning Ionic 2 .I really hope this tutorial was helpful to you and see you in other tutorials.
RELATED TUTORIALSIonic 4 Tutorial: Your First Ionic/Angular v4 Application
Ionic 3 Grid System Tutorial
Learn Ionic 3: Easy Steps Tutorial
Ionic 3 Routing and Navigation Tutorial & Examples
Ionic 2/3 - Create, Generate and Add Pages
Ionic 3 Http Post by Example
Ionic 4/Angular Tutorial - Ionic 4 Router (Routing and Navigation Example)