Ionic 4 routing example

In your application, you would need to supply a set of routes that might look something like this:. The path property defines the URL, and the component property defines which component should be displayed by the when that URL is hit.

We also have a default route defined at the bottom so that if no route is supplied, it will use the login route. NOTE : This is a simple approach to routing, make sure to also read the section on lazy loading later in this article. Navigation in the application is then based on whatever the URL currently is, and what route it matches.

Simply changing the URL would change the current page, but in order to navigate in your application, you have a few options. In this case, we would be launching the DetailPage and supplying it with an id route parameter we could then use that data inside of the component.

Also note that we supply a routerDirection to indicate whether this is a forward or backward navigation so that the screen transition animation can be applied correctly.

If this is not supplied, Ionic will guess at what animation it should use but it is better to be explicit. You can also navigate programmatically by injecting the standard Angular Router into your pages and calling either of these methods:. How to Upgrade Your App to Ionic 5. Aside from the potential future-proofing aspect of switching to Angular routing, there are a couple of big reasons to switch to it as soon as you upgrade to Ionic 4. Lazy loading is the big ticket item here.

If you are unfamiliar with lazy loading the basic idea is that it breaks your application down into smaller chunks, and only loads what is necessary at the time. When your application is first loaded, only the components that are necessary to display the first screen need to be loaded. Without lazy loading, you need to load the entire application upfront before anything can be done. With smaller applications, it is not that much of a big deal, but it is critical for larger applications.

There is no harm in using lazy loading, so I would encourage everybody to use it by default and I think that it will be set up by default in the Ionic 4. Lazy loading with Angular routes is not too dissimilar to regular routing. However, your routes would look like this instead:. Instead of supplying a component for the route, we supply a loadChildren property. We link to the module file for the page just like we did with lazy loading with IonicPage in Ionic 3.

If we use the home route as an example, the loadChildren property is:. The router knows that it needs to open the home. That file might look like this:. NOTE : If you are using lazy loading, you should make sure that you are not also declaring these pages in your root module file app. This specifies all of the dependencies required for this particular route, and then it also supplies its own HomePageRoutingModule to define any additional routes.

Visual Studio Code helpful Extensions. Types of SSL Certificates. This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Adsayam is most visited website in Sri Lanka. Likes Followers Subscribers Followers.Simon also writes about Ionic frequently on his blog Devdactic.

In this tutorial we will look at the new navigation system inside Ionic Framework 4.

ionic 4 routing example

With Ionic 4, your app is using Angular, which already comes with some new additions itself. But now Ionic is also using the standard Angular Router in the background. This means, instead of pushing and popping around inside your app, we have to define paths that are aligned with our pages.

Go ahead and run:. This will create a new project which you can directly run with ionic serve once you are inside that folder. It should bring up a blank app in your browser with just one page. This is the first place for routing information in our app and the place where we can add more information about how our app works. Right now, we have two routes defined inside the array.

Inside the definition for the home path we can now spot the loadChildren key in which we supply a path to the module file of our home page. This module file holds some information and imports for the page, but you can think of it as the page that gets displayed. Ok, cool, we now have a router and are loading a page through a path, so how is this connected with actual HTML or the index page of the app?

The only thing we display is an app-root, which is still not very clear. This is the key to understanding how the routing works: The Angular Router will replace router outlets with the resolved information for a path.

This means inside the body, at the top level, we have this special Ionic router outlet which is the standard Angular outlet plus some animation extras wrapped inside a tag for the Ionic app itself.

Once we navigate to a certain path, the router will look for a match inside the routes we defined, and display the page inside the right outlet. Now, you are hopefully ready to navigate the change a bit better. Because a single page is not yet an app, we need more pages! Right now, we could add 2 additional pages like this:. After creating pages with the CLI your app-routing.

Understanding Angular Routing in Ionic Apps

Right now, it also contains routing information for the three new pages we added with the according path of their module. One thing I often do with my apps is change the initial page to be a different component. To change this, we can simply remove the routing information for the home page, delete its folder, and change the redirect to point to the login page we generated earlier.The Angular Router is one of the most important libraries in an Angular application.

With Angular Router, we can create rich apps that are linkable and have rich animations when paired with Ionic of course. Let's look at the basics of the Angular Router and how we can configure it for Ionic apps. For most apps, having some sort of route is often required.

The most basic configuration looks a bit like this:. For this we can use router redirects. Redirects work the same way that a typical route object does, but just includes a few different keys.

Meaning that if we have:. Talking about routes is good and all, but how does one actually navigate to said routes?

Techiediaries

For this, we can use the routerLink directive. Let's go back and take our simple router setup from earlier:.

Now the current way our routes are setup makes it so they are included in the same chunk as the root app. Instead, the router has a setup that allows the components to be isolated to their own chunks.

We're excluding some additional content and only including the necessary parts. Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using forChild and declaring the component in that setup.

With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component. If you would prefer to get hands on with the concepts and code described above, please checkout our live example of the topics above on StackBlitz. With Tabs, the Angular Router provides Ionic the mechanism to know what components should be loaded, but the heavy lifting is actually done by the tabs component.

Let's look at a simple example. This guide covers how routing works in an app built with Ionic and Angular. A simple Route For most apps, having some sort of route is often required. Copy Copied. Contribute Updated Ionic 5 is a step forward in terms of performance, development experience and P rogressive W eb A pps support.

Using Angular Routing with Ionic 4

It's clear that the Ionic Framework team is doing a great job positioning themselves as the framework of choice to build modern mobile and progressive web apps. In this ionic tutorial we will discover all the possibilities the new Ionic Navigation brings and also talk about some usability tricks we can add to our Ionic Framework apps to make them look even better. This post is part of the "Mastering Ionic Framework" series which deep dives into Ionic advanced stuff. Don't be afraid, if you are new to Ionic 5, I strongly recommend you to read our What's new in Ionic 5 tutorial.

ionic 4 routing example

At IonicThemes we are big fans of Learning by examplethat's why all our Ionic tutorials include complete and free code examples that you can reuse in your Ionic projects. We strive to create the best content for Ionic Framework, both tutorials and templatesto help the Ionic community succeed. Empowering developers to achieve a free life through coding is what keep us going everyday, and seeing developers succeed using our tutorials and templates really fulfill us. We can help you create better apps with our detailed and professional templatescrafted with love and dedication.

Please check them out and let us know if you have any questions or feedback. Navigation is one of the most important parts of an app. Solid navigation patterns help us achieve great user experience while a great router implementation will ease the development process and at the same time make our apps discoverable and linkable.

Navigation is indeed one of the most important elements of user experience that every developer must include on its checklist while creating any kind of app. A bad navigation can frustrate users to an extent that they end up uninstalling the app and even posting a negative review about your app on the app store. While this approach was super aligned with how native frameworks iOS, Android work, and also felt more intuitable to develop with, it completely left out of the table mobile web scenarios.

With the increasing popularity and hype of Progressive Web Appsthis became even more evident. If you are building for the web, then it's super important for your app to be Discoverable enable search engines find, crawl and index your app pages and Linkable pages should be linked together to showcase the content structure and also be easily shareable via URLs.

These are 2 of the 10 principles an apps needs to comply in order to be considered a PWA. The Angular Router is a solid, URL based navigation library that eases the development process dramatically and at the same time enables you to build complex navigation structures. In addition, the Angular Router is also capable of Lazy Loading modules, handle data through page transitions with Route Resolvers, and handling Route Guards to fine tune access to certain parts of your app.

If you want to learn more about Angular routers I suggest you to check the this Angular Tutorial: Learn Angular from scratch step by step. To be honest, I'm really happy the Ionic team decided to adopt this router for Ionic Angular applications. It's an ionic 5 app that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.

It includes more than carefully designed views and components. Typically as you keep building new features, the overall application bundle size will continue to grow. At some point you'll reach a tipping point where the application takes a long time to load.

Instead of loading every module at once when the app starts, by organizing your application into modules, it's really easy to make feature modules load lazily and enjoy these benefits:. Just remember that some modules like the AppModuletypically your main module must be loaded from the beginning eagerly loaded. But others like feature modules can and should be lazy loaded.

When the router navigates to a lazy loadable route it dynamically loads the module assigned to that route. The lazy loading in Ionic happens just once, when the route is first requested. For subsequent requests, the module and its routes will be available immediately. Let's see an example:.

How to add a new page in ionic framework

Note : You don't have to neither import nor reference the lazy loaded modules, just use the route loadChildren property. To be clear, what I mean is that you don't have to include an import statement for the lazy module on the top of the page, and you don't have to include the LazyLoadedPageModule in the NgModule's imports array.Recently, I published an article that talked through some of the expected changes for the upcoming Ionic 4.

Perhaps the most noticeable change coming in Ionic 4, and the one that will require the biggest change in your existing applications, is the move to Angular style routing.

NOTE: If you need more context around the upcoming changes to Ionic, specifically the focus on web components and what that is all about, I would recommend reading this article.

Instead, you should just rely on the native navigation for whatever framework it is that you are using Ionic with. The NavController is included in this package and can be used for interacting with the Angular router, but it is still just using Angular routing underneath.

In your application, you would need to supply a set of routes that might look something like this:. If I were to go to the following URL:. We also have a default route defined at the bottom so that if no route is supplied, it will use the login route. NOTE: This is a simple approach to routing, make sure to also read the section on lazy loading later in this article. Navigation in the application is then based on whatever the URL currently is, and what route it matches. Simply changing the URL would change the current page, but in order to navigate in your application, you have a few options.

In this case, we would be launching the DetailPage and supplying it with an id route parameter we could then use that data inside of the component. Also note that we supply a routerDirection to indicate whether this is a forward or backward navigation so that the screen transition animation can be applied correctly. If this is not supplied, Ionic will guess at what animation it should use but it is better to be explicit.

You can also navigate programmatically by injecting the standard Angular Router into your pages and calling either of these methods:. Aside from the potential future-proofing aspect of switching to Angular routing, there are a couple of big reasons to switch to it as soon as you upgrade to Ionic 4.

Lazy loading is the big ticket item here. If you are unfamiliar with lazy loading the basic idea is that it breaks your application down into smaller chunks, and only loads what is necessary at the time. When your application is first loaded, only the components that are necessary to display the first screen need to be loaded.

Without lazy loading, you need to load the entire application upfront before anything can be done. With smaller applications, it is not that much of a big deal, but it is critical for larger applications. There is no harm in using lazy loading, so I would encourage everybody to use it by default and I think that it will be set up by default in the Ionic 4.

Lazy loading with Angular routes is not too dissimilar to regular routing. However, your routes would look like this instead:. Instead of supplying a component for the route, we supply a loadChildren property.Ionic 4 uses a navigation stack for implementing navigation between pages.

You can simply think about a stack of pages, one page id on top of another page. In a stack computer data structure you can only access the element on top. In the Ionic 4 terminology this means you can only view the page on top of the navigation stack so to navigate to another page you need to do one of these two actions:. So by only understanding these two stack concepts you can understand the Ionic 4 navigation system:.

You can read more about the stack data structure from this Wikipedia link. Now, that we have seen the theory behind Ionic 4 navigation system. Don't worry you don't have to implement a stack by yourself, Ionic 4 have already done that for you. You can easily accomplish navigation by using the NavController component alongside many other components. If you have already generated an Ionic 4 project with some pages, you have probably seen the NavController injected into every page constructor so you don't have to do anything else except navigating but how?

The NavController component exposes many methods so you can control the navigation stack with all ease but NavController is not the only available component for navigation, there are other components:. Now let's see each of these components by example so we can understand when and where to use each of them. We will start by generating a new Ionic 4 project based on blank template so go ahead and execute the following commands in your terminal or command prompt:.

The blank template has only one page, the HomePage so let's first add some other pages so go ahead and navigate inside your project folder and use the ionic g page generator to quickly create some new pages:.

You need to add these two pages to your app. Now we are ready to add a simple navigation, let's add code to be able to navigate from our home page to either our about or contact page by clicking on some buttons. As you can see we navigate to another page by using the push method of NavController which is injected via the page constructor and becomes available from this. The NavController is already and imported for us and injected by the Ionic CLI page generator but if you are creating a page manually you need to import the NavController service from ionic-angular and inject it via component constructor to be able to use it.

Next we need to bind the two methods to two buttons on component view home. Let's add a back button to our about and contact pages. So by using the NavController service we can navigate between pages via two methods push and pop which respectively pushs a page to navigation stack thus making it visible, and pops a page from navigation stack to make it disappear so the previous page on stack becomes on top visible. The next service we are going to see is NavParams which allows us to pass parameters between pages when navigating.

ionic 4 routing example

In many situations we need to pass parameters from one page to another for example from a list page to a detail page. Ionic 4 has made this also as easy as navigating with NavController. You can pass parameters with the push method of NavController as the second parameter of the method but to retrieve them you need to use the NavParams service so lets see how to do it with an example.

You pass parameters as JavaScript object to the second parameter of the push method.Navigation means how a user can move between different pages in the ionic application. In Ionic 4, the navigation has received many changes. For example, instead of using the Ionics own navControllerthe v4 is able to integrate with the official Angular Router.

It provides more consistent routing experience into the whole app. The Angular Router is the most important library in the Angular application. If it is not available, the app cannot maintain its navigation state on browser reloads.

Thus, with the Ionic framework and Angular Router, you can create rich applications that are linkable and have rich animation. Traditional websites use linear history, where the user navigates to a required page and can press the Back button to navigate back. But, in Ionic Framework, applications can take this by allowing parallel navigation. It means that it has multiple navigation stacks and can exchange them at any time.

The latest version of Ionic uses a navigation stack for implementing navigation between the pages. It can simply work as a stack of pages, where one page id on top of another page.

As we know, the stack can access only the top element. Ionic has a similar concept where you can only view the page on top of the navigation stack. If you want to navigate to another page, you need to do one of these two actions:.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here. Step 3: The newly created page automatically added its path into the app-routing. In the app. It is specifically used for ionic routing, which works the same as a regular angular-router component.

Step 4: After creating the page, open the home. When you click on the Animals buttonyou will navigate to the Animals page. It can be shown in the below screen. The user can also navigate between pages in a programmatic waywhich can be understood form the below example.

Step Open the home. Step 3: Open the animals. Step 4: Open the animals. Now, click on the Go buttonyou will navigate to Animals page.


comments

Leave a Reply

Your email address will not be published. Required fields are marked *

1 2