Routing and Navigation in detail :Angular2

So, are you wondering how to start routing and navigation in Angular2? I am so glad you are here. This blog is going to be all about routing and navigation in Angular2. Routing and navigation is the core concept of Angular2 . Alright let’s dive into routing and navigation and take a close look at it.

Why routing is necessary
Routing helps in directing users to different pages based on the option they choose on the main page. Hence, based on the option they choose, the required Angular Component will be rendered to the user.

Define routes for pages

Now, before you define routes for pages. Let’s see

Most routing applications should add a element to the index.html as the first child in the tag to tell the router how to compose navigation URLs.

Step 1 − Add the base reference tag in the index.html file.
Before we define define routes for the pages, Let’s create files for the pages.

For example
Let’s create Inventory.component.ts and Product.component.ts and write simple logic like below

When we are done writing the components for the application then we should mention the component in app.module.ts under declaration and then finally define routes in the route.ts file like below.

Router Guards
Sometimes we want to prevent a user from going to a particular page or discourage them from leaving a page. That’s what route guards are designed for.

Route guards have two properties
1. Can Activate
2.Can Deactivate

We can use ‘Can activate’ to prevent a user from going to a page which does not exist yet for the application. This is often helpful when a user is trying to access the page which should create an error.

We can use ‘Can deactivate’ to prevent a user from leaving a page. This is often helpful when a user is leaving the page before saving the data.

Router based linking style
If you have a header in your website and you want to highlight the currently active link then you can do that by using “routerLinkActive”

Step1 Add the html in your webpage like below

Step2. Add css
#nav-bar li > a.active {
color: black;
}

Lazy loading

Let’s dive into this cool feature of Angular2 Router i.e Lazy Loading of modules.
So we have this small app which has basically 3 modules:AppModule – This is the root module of the applicationTasksModule – This is the child module of AppModuleUsersModule – Child module of AppModule, sibling module of TasksModule

Before we move on further, let’s note that there are 3 other important parts of this app:ROUTING – This is the main router for our application.TASKS_ROUTING – This is the child router. Takes care of routing for tasks module.USERS_ROUTING – Takes care of routing for users module.

Lazy loading is also used to optimize app loading time because only the modules which are needed at run time will be loaded. With lazy loading we can split our application to feature modules and load them on-demand. The main benefit is that initially we can only load what the user expects to see at the start screen. The rest of the modules are only loaded when the user navigates to their routes.

Lazy loading is one of the best features of the router.

So far our app has only one module and that is app module. Let’s see how we can add multiple module.
Our application can be broken down into smaller sections. We will add in a user module.
Lazy loading is the ability to load the pieces on demand. Lazy loading modules helps us decrease the startup time. In lazy loading our application does not need to load everything at once, it only needs to load what the user expects to see when the app first loads. Modules that are lazily loaded will only be loaded when the user navigates to their routes.

For example
If we want to add in a new module, we will first create a new folder under app directory. If user is the new module we want to add in our application we will first create a user directory under app directory and add in all the related files like component, html, css and route files. Then we also need to add in one more line into main route file which is under app directory

Line to be added in route.ts file

{path: 'user', loadChildren: 'app/user/user.module#UserModule'},

That’s how we are adding in a new module which is a UserModule. Now this module will only be loaded when a user tries to access the said routes.

Code Clean up

In order to clean up the code, we can expose all of the imports inside the directory from a single index file and then we can just import it with a single import line. This is referred to as creating barrells.

Step 1. Create an index file. Add below mentioned line i.e you can mention as many component as you want.
export * from ‘./test.component’

Step 2. In app module

import {
} from ‘./index’

you can simply mention all the components inside the above block. This will make your app.module file cleaner. We can also say this falls under best practices.

If you find any challenge, Do let me know in the comments.If you enjoyed this post, I’d be very grateful if you’d help it spread.Keep smiling, Keep coding!

Share the Knol:

Related

Deepak is a Software Consultant having experince of more than 5 years . He is very enthusiastic towards his work and is a good team player. He has sound knowledge of different technologies which include Java, C++, C, HTML, CSS, Javascript, C# always keen to learn new technologies.

Knoldus is the world’s largest pure-play Scala and Spark company. We modernize enterprise through
cutting-edge digital engineering by leveraging Scala, Functional Java and Spark ecosystem. Our mission is to provide reactive and streaming fast data solutions that are message-driven, elastic, resilient, and responsive.

Knoldus is the world's largest pure-play Scala and Spark company. We modernize enterprise through
cutting-edge digital engineering by leveraging Scala, Functional Java and Spark ecosystem. Our mission is to provide reactive and streaming fast data solutions that are message-driven, elastic, resilient, and responsive.