Saturday, March 11, 2023
HomeReactMulti Web Page Navigating in an Ionic Application by Aman Mittal

Multi Web Page Navigating in an Ionic Application by Aman Mittal


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.

RELATED ARTICLES

Most Popular

Recent Comments