Multi Web Page Navigating in an Ionic Application
Released on Nov 19, 2017
•
5 minutes read
•
Ionic makes it very easy to produce several web pages navigating making use of NavController as the genesis of navigating pile. In this little application, I will certainly attempt to make the idea clear to you.
Produce Application and also Pages
To begin with, allow’s produce a brand-new Ionic application for this display. Comply with in addition to me. To begin, we need to scaffold a brand-new job, my favored one-to-go Ionic CLI command:
ionic beginning -a ' Multi Web Page Navigating'
- i app.multipage.nav ionic-multi-page-nav space
cd in to the brand-new job developed by the above Ionic CLI command and also run ionic offer to see the empty design template with simply a homepage readily available. We will certainly produce 2 brand-new web pages in this application to display our objective.
To review the standard Navigating in an Ionic application, see this.
Currently, with the aid of Ionic CLI, allow’s produce 2 brand-new web pages prior to diving right into our code base.
$ ionic g web page page1
$ ionic g web page page2
I am calling both brand-new web pages common however you can call them anything you desire. Simply comply with the convention when importing the components. Inside the app/pages you can see, there are 2 brand-new folders with the names we created. Each have its very own ts, html and also scss documents, hence, finishing an internet element on which every Ionic and also Angular applications are based upon.
To continue, we require to include both the web pages in our app.module.ts:
1 import { BrowserModule } from ' @angular/ platform-browser';
2 import { ErrorHandler, NgModule } from ' @angular/ core';
3 import { IonicApp, IonicErrorHandler, IonicModule } from ' ionic-angular';
4 import { SplashScreen } from ' @ionic- native/splash-screen';
5 import { StatusBar } from ' @ionic- native/status-bar';
6
7 import { MyApp } from './ app.component';
8 import { HomePage } from './ pages/home/home';
9
10
11 import { Page1Page } from './ pages/page1/page1';
12 import { Page2Page } from './ pages/page2/page2';
13
14 @ NgModule( {
15 statements: [MyApp, HomePage, Page1Page, Page2Page],
16 imports: [BrowserModule, IonicModule.forRoot(MyApp)],
17 bootstrap: [IonicApp],
18 entryComponents: [MyApp, HomePage, Page1Page, Page2Page],
19 carriers: [
20 StatusBar,
21 SplashScreen,
22 { provide: ErrorHandler, useClass: IonicErrorHandler }
23 ]
24} )
25 export course AppModule {}
Arrangement Web Page for Standard Navigating
As the app.module.ts is upgraded with our modifications, the extent of the entire application can currently access these 2 brand-new web pages. To carry out the navigating in between them, we need to initial upgrade our home.html with switches that will certainly browse to a details web page and also service reasoning behind those occasions in home.ts
1< 2<
3 < Ionic Multi Web Page Application<
4 < 5< 6 7< 8
< 9< Web Page
< 10< 11
<
Page1< 12 < 13
Page2 14< 15
< Back< 16< 17< 18
< Allow's upgrade home.ts too.
1 import { Part } from' @angular/ core'; 2 import { NavController} from' ionic-angular'; 3 4
import { Page1Page } from'./ page1/page1'; 5 import { Page2Page} from'./ page2/page2'; 6 7 @ Part
( {
8 selector: ' page-home'
, 9 templateUrl : ' home.html' 10} ) 11 export course HomePage { 12 erector( public navCtrl:
NavController ) {}
13 14 goTo(
web page) { 15
if( web page
== =' page1' ) { 16 this navCtrl
press ( Page1Page ) ; 17}
else
if( web page == = ' page2' ) { 18
this navCtrl press ( Page2Page)
;
19} 20} 21
22 back( ) {
23 if( this
navCtrl
size( ) >> = 2
) { 24 this navCtrl pop ()
;
25 } 26} 27 }
The goTo() feature will certainly aid us in browsing to the wanted web page and also back switch will certainly bring us to the previous web page in the navigating pile. This is very important! I pointed out to the previous web page, not the web page. If you recognize with Ionic 1, this would certainly exactly how state will certainly function. Upgrading Page1 and also Page2 To remain to create our trial application, we require to upgrade our
Page1 and also Page2 parts. 1 2< 3< 4
< Ionic Multi Web Page Application < 5 < 6< 7 8 <
9 < 10< Web Page 1 < 11< 12<
13 Page2
14 <
15
< Back< 16 <
17 < 18< 1 import { Part} from ' @angular/ core' ; 2 import
{ IonicPage, NavController, NavParams} from' ionic-angular'
; 3
import {
Page2Page}
from'./ page2/page2'; 4 5
@
IonicPage
() 6 @ Part
(
{ 7 selector:
' page-page1' , 8 templateUrl
: ' page1.html' 9} ) 10 export course
Page1Page { 11 erector
( public navCtrl:
NavController
, public navParams : NavParams
) {} 12
13 goTo( web page) { 14 if
( web page == =' page2'
) { 15 this navCtrl press( Page2Page); 16} 17} 18 19 back
()
{ 20 if(
this navCtrl size()>> = 2 ) { 21 this navCtrl pop()
; 22} 23
} 24 25 ionViewDidLoad
() { 26
console log ( ' ionViewDidLoad Page1Page' ) ; 27
} 28 } Comparable for the Page2 : 1 < 2 < 3<
Ionic Multi Web Page Application< 4 < 5 < 6 7
<
8< 9< Web Page 2
< 10< 11<
Page1< 12 < Back
< 13< 14
< 15<
1 import { Part }
from ' @angular/ core'; 2 import { IonicPage, NavController, NavParams } from ' ionic-angular';
3
import { Page1Page} from './ page1/page1'
; 4 5 @ IonicPage () 6
@ Part( { 7 selector: ' page-page2', 8
templateUrl :
' page2.html' 9
}
) 10 export course Page2Page
{ 11 erector( public navCtrl: NavController, public navParams : NavParams )
{ } 12 13 goTo( web page) {
14 if
( web page
== =
' page1' ) { 15 this
navCtrl press( Page1Page);
16 }
17}
18 19 back
() { 20
if ( this
navCtrl size()>> = 2)
{ 21 this
navCtrl pop(
)
; 22} 23}
24 25 ionViewDidLoad(
) { 26 console log(' ionViewDidLoad Page2Page'
) ; 27}
28 } Running the Application If we conserve all the data and also once more from the incurable run: $ ionic offer$ ionic offer-- laboratory The result revealed can be finest defined in these screenshots: This is simply a glance of exactly how multi web page navigating in Ionic may function that may aid you to begin with advancement. To obtain the complete code, you can check out this Github Database Initially Released at Hackernoon.com I'm a software program programmer and also a technological author. In this blog site, I cover Technical creating, Node.js, Respond Indigenous and also Exposition. Presently, operating at Exposition. Formerly, I have actually functioned as a Programmer Supporter, and also Elderly Material Designer with firms like Draftbit, Vercel and also Crowdbotics.
