Understanding Ionic 2 : Creating Pages and Navigation Systems
Generating a new app
Lets start our journey by generating a new Ionic 2 project using the CLI
ionic start navigationApp blank --v2
ionic g page about ionic g page contact
Don't forget to add an import for about.scss in app/themes/app.core.scss:
@import "../pages/about/about.scss"; @import "../pages/contact/contact.scss";
Creating navigation between pages
Untill now we have three pages home contact and about .We need to add navigation from home to about and to contact so how to do that with Ionic 2 ?
There many ways to implement navigation between pages in an Ionic 2 app :
Simple and basic navigation system
We are going to use
In order to use the navigation from other pages you only need to inject it via the class constructor of the corresponding page .To actually navigate between pages you need to push and pop pages from the injected navigation controller and that's it.
Now to be able to navigate from HomePage to AboutPage we only need to import AboutPage and push it to history stack then the navigation controller will take of the rest making top page on the stack appear.
add this to HomePage
And then bind this method to click event by
Add this to AboutPage
To simply understand this navigation system just understands that always current page is always on the the top of the navigation stack and to manipulate the top of the stack you have two methods push and pop,push to add another page to the stack top and pop to remove the current page from the top.
You can also have a ready Back button by just adding a
Please notice that you can only use this simple navigation system if there's a simple parent child relationship between your pages .In our case the HomePage is a parent of both AboutPage and ContactPage ,HomePage is the root of our navigation controller which is injected into ABoutPage and ContactPage. Now what if you have a more complex relationship between your pages such as having multiple root pages.In this case you have the choice between two navigation systems either the tab or the menu based navigation .
Tab based navigation
Imagine that we have many top level pages without any parent child relationship between them .Instead we need to be able to navigate to any one page of them, we choose,from one place.The tab system comes to the rescue .Implementing the navigation system is really easy with Ionic 2 all you have to do is adding a tabs.html template with
Next add the following code inside tabs.html
And inside tabs.ts add
No you should change the root property of
Menu based navigation
The recommended method of navigation by the ionic team is tabs but sometimes when you have many top level pages we can not use the tab system .In this case we can substitue tabs with a side menu to navigate between between root pages .So lets add a side menu to our app.
Open app.ts and change the template to
and Add this to the MyApp class
That's all for this tutorial .I hope that you have learned something from this tutorial to use in your next project based on Ionic 2.
RELATED TUTORIALSIonic 4 Tutorial: Building and Theming a Login & Register UI with Angular Forms
Ionic 4 JWT Authentication Tutorial: Using Angular HttpClient with Node & Express.js Server
Ionic 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