[Tutorial]Ionic App Development : Root components and navigation.

[Tutorial]Ionic App Development : Root components and navigation. | Ecency

Repository: Ionic App Repository Github

Software Requirements:
Visual Studio Code(Or any preferred code editor)
Chrome(Or any preferred browser)

What you will learn:
In this tutorial you would learn how to live code a real ionic application with practical examples including these major concepts

Understanding and setting ionic root components
Navigating through pages while modifying the root components.
Exploiting unique events available with the ionic platform.

Difficulty: Intermediate

Tutorial
In this tutorial we'll be dealing with a major and essential part of ionic which would help create better ionic applications with a better UI. Hence, we would be covering root components and how to use them.

First things first,
What are root components: To understand what root components are, you would need to understand how navigating between pages works. Pages in ionic are opened on a stack. Meaning that when you navigate to a new page from the root it is presented to overlay the root component. In simpler terms, it is like putting pieces of paper on each other and forming a heap of papers. When we navigate backwards however, it's like removing a piece of paper from the heap and moving to the page that comes before the present page.

Let's move to setting the root component. If not stated earlier, whenever an ionic App is loaded, it is loaded from the index.html file which is the entry point for our app.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  <style rel="stylesheet" href="app/app.scss"></style>

  
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  
  <script src="cordova.js"></script>

  

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  
  <ion-app></ion-app>

  
  <script src="build/polyfills.js"></script>

  
  <script src="build/vendor.js"></script>

  
  <script src="build/main.js"></script>

</body>
</html>

This is a typical index.html file in any ionic project. From this file, all scripts needed to run are loaded and within the ion-app tag our app runs.

When a new app is run, the application which is basically a native application running in web view comes to the index.html file and from there loads the app within the ion-app tag. This tag leads the app to whatever root component has been set up. For our application the root component which is set by default is our tabs page.
Hence, this is what loads.

Screenshot (43).png

The tabs page is a component which shows a simple view of many pages in a tabs format. Whenever you start up a new application using the tabs command which should look like this:

ionic start anapplication tabs

It would set the root component of the app to be the tabs page.

So the common question involving this is how to change the root component of an ionic application. To do this, head to the
src/app/app.component.ts
The file should look like this

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

The point of interest is this line

rootPage:any = TabsPage;

This piece of code found within this file determines where ionic would choose to load the application as the root component within start up.

They are other ways to set the root component when the app has already loaded using preset functions.

With the navCtrl which is already loaded in each generated page. You could use that function as a triggered event for a click or any other in-page interaction.
To do this you could write:

this.navCtrl.setRoot(Homepage)
//This page has to be imported to the ts file that's it's being used in
this.navCtrl.popToRoot()
//Use this to go to the root page of your stack which should be the home page set above

The last thing we would be covering today is the set of unique functions triggered on special occasions. They are very similar if not exact to Angular commands such as ngOnInit. Which is called by angular whenever a component loads.
Examples of this unique functions in ionic are
-IonViewDidLoad
-IonViewWillLoad
-IonViewWillDismiss
-IonViewWillEnter

This functions are triggered during this lifestyle continuously for whatever page they are in and can be very useful if exploited properly.
For example if you would want a pages data to be called from a server everytime a page is loaded ionViewDidLoadwill be the most appropriate option. Using life cycle events are essential for better ionic programming an as we go along you'll see why more clearly.

Hope this tutorial helps

You can find my code in Github