paint-brush
Basic Navigation in Ionic Applicationsby@amanhimself
660 reads
660 reads

Basic Navigation in Ionic Applications

by Aman MittalAugust 10th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Navigation in Ionic does not work using normal routing like you might have done in some of the client side web frameworks, especially when compared to browser based navigation. It uses the terminology of <code class="markup--code markup--p-code">pages</code> which I find is more generalised and correctly named as compared Ionic version 1's <code class="markup--code markup--p-code">states</code>. This approach is quite similar to navigation in a native mobile application.

People Mentioned

Mention Thumbnail

Company Mentioned

Mention Thumbnail
featured image - Basic Navigation in Ionic Applications
Aman Mittal HackerNoon profile picture

Navigation in Ionic does not work using normal routing like you might have done in some of the client side web frameworks, especially when compared to browser based navigation. It uses the terminology of pages which I find is more generalised and correctly named as compared Ionic version 1's states. This approach is quite similar to navigation in a native mobile application.

Pages are pushed and poped from the navigation controller a class defined whose subclass available in Ionic is ion-nav. The logic here is equivalent to that of a stack. The purpose of ion-nav is to work with the navigation stack.

To define a nav bar in an ionic app:

Inside the typescript file associated to above HTML code, we will have access to Navigation Controller.

Thus, we can access NavController and it's properties such as push and pop to navigate to a different page or back to the previous page.

Note: Deeplinking is available in Ionic with URLs but that is altogether a different topic.

Find me on Twitter


Aman Mittal 🖖 (@amanhimself) | Twitter_The latest Tweets from Aman Mittal 🖖 (@amanhimself). #BookBlogger @ https://t.co/UQvyNf1OTC | Developer | #Nodejs |…_twitter.com