Skip to main content

Routing in Angular 7

What you will learn after reading this post.

Whenever in normal HTML web page we click on a link we are navigated to specific page given in that link. When we are navigated then entire view of the application is reloaded again which cost resources and this type of application is not single page application. 


In Single Page Application model(SPAs) one page is loaded and other subsequent pages are dynamically loaded as per user request. And angular is used to create single page application.

Routing is capability of angular to understand given url and change the view dynamically without loading the entire page. Only requested content is loaded from the server(In case of lazy loading of feature module).


Note: Get complete code at this link

2. Basic routing of component in Angular 7

In this section i consider that you readers are aware of creating angular components. 

Step 1: 

Create a angular 7 app routing by running this command ng new routing.  Then cmd/terminal will ask this question if you are using angular 7 and Angular CLI 7 check your version by entering following command in TErminal/CMD ng - v

Give 'Y and press enter and you angular app will be generated with app-routing.module.ts file i.e is your routing module. 

Now create a component reservation by typing following command ng g c reservation

Step 2: 

Now go to your app-routing.module.ts  and add below code.


What we are doing above

For using routing we have to configures Routes in RouterModule that why we are importing Routes and RouterModule by this code.
import { RouterModule, Routes } from '@angular/router';

Now we have to export this "RouterModule"  so that Router directive will be available in app module components by adding RouterModule to exports array of NgModule .
exports: [ RouterModule ]

Now you are create routes array of type Routes and you are giving "path" and "component" path denotes the url that will render the given component.

Step 3 :

Now go to your app.module.html add the below code


Here your are creating button which will trigger you "reservation" component and display html of reservation component in"router-outlet".

What we are doing here. 


  • routerLink : When clicked will load the given component as value.
  • router-outlet : At this router-outlet component html is loaded.

Step 4 :


Now run the application using following command ng serve --open. You will ge following output.

Now click on reservation button.
When you clicked on reservation button then your reservation.component.html code is loaded in router-outlet that you provided in app.component.html. Note that url also changed to http://localhost:4200/reservation

3. Active Link In Angular 7

Active link means that link which is currently active. i.e the link which is opened in currently in browser tab. In above image we can see that /reservation is active link. Active link feature of angular enables us to add our custom css to active links. Like if we want out active link should be appeared as red for this we will follow below steps.

Step 1 : 

add following css to your app.component.css.



Step 2 : 
update your app.component.html to below code


Here we are adding class .active-link to property routerLinkActive.

Now our code will produce following result.
Check our our reservation button text got red as this is active link.

4. WildCard Routing in angular 7/ 404 Error page

In our example we have only /reservation and /passenger as valid urls and rests url are not valid for our angular application. Then to manage this situation we will create error404 component and routes all non valid urls to its html page.

Step 1 :  

create a component by entering following command in your Terminal/Cmd ng g c error404

Step 2 :

Update your app-routing.module.ts to below code


Above we added path  as "**" which will is wildcard and will be called each time whenever the url is not matched with all path present in routes.
NOTE: This should be last entry for your routes array. If you create it as first element for your routes array then each and every url will be redirected to error404 page even url is valid i.e is present in routes array.

5. Child Routing in Angular 7

Child routing will come into picture if you have child component then it will help in visiting your child component. In our case we have reservation component  which is rendered with url /reservation but what when we have child component. Then this child component should available at this url /reservation/child.

Above scenario will be achieved by bellow steps.

Step 1 : 

Create a component by this command ng g c reservation/child.

Step 2 :  

Update your app-routing.module.ts to below code.



Step 3 :

Update following code in routing.component.html


Note :  Router loads the child component to "router-outlet" of parent(reservation.component.html) component not in app component.

Note: Get complete code at this link


Comments

Popular posts from this blog

Creating Simple Hello World Application with SPRING BOOT

For creating a simple running web application with spring boot we do not have to do much. We just require to follow some simple steps and we are good to go. Unlike SpringMVC framework we do not. have to take care of all heck of configuration or XML file in one go we are all set with working mvc based web application.

Now we have to follow these steps.

Generate spring boot project from this url "https://start.spring.io/" You can do the same using STS setting to.Importing the project in STS.

Adding Spring-Security to Spring-Boot App

In the previous post we have created a simple spring boot application. This application was very simple application just getting request and showing page for requested URL. Currently all urls are open to all user that is we do not have any kind of authentication on the URL. Our spring boot application is like the open pool in which any one can come and start fishing. Now we want to secure our application so that only authenticated user will be able to visit secure part of the application. For this purpose we will be using the Spring Security. 
Scope of this tutorial. In this we will learn basic integration of spring security with spring boot.
NOTE: This tutorial will just contain only basic integration of spring security. If you haven’t gone through previous tutorial and you are the newbies to this spring boot then I will request you to go through previous post to get understanding of spring boot. 
Now lets get started with the configuration.If you do not have the previous code you can …

About Me

I am a self motivated full stack  developer. I have worked in many projects under several companies.
Java is one of my favourite language. Currently i am working with Tata Consultancy Services, Hyderabad. Tata Consultancy is my first company where i started my career on 24th Oct 2016.

Currently i am working on spring mvc in TCS but i also have a knowledge of Spring Boot, Angular, MongoDB. reqularly i am trying to add extra beauty to my profile. For this i believe in learn and unlearn strategy.

Reason for developing this blog is to show case my work and keep me busy during the weekends. Yahh! its true i have lot of free time on weekends as i don't have any girlfriend to waste my time with. And so i created this blog to show case my learning and work. Now, this blog gives me a goal to pursue and the way to keep me busy.

Through this blog i will try to share to all readers that i will be learning in course of time. I will try to keep this blog updated with latest evolution in develo…

Feature Modules in Angular 7

Feature Module Whenever we  create angular application we go on adding components to angular application. But as our application goes on increasing it become to much problematic to maintain such application. Every feature of our application is binded under single module which we call as app module. Which is root module of our Angular 7 application. While developing angular application without modularizing its features creates several problems  Application is not easily scalable.Application is tough to maintain.Application complexity makes it hard to understand. Solution Here feature modules comes for our rescue. Feature modules help angular applications to get modularised on basis of features present in our application. As our application grows we can divide our entire application in small feature using feature module. Feature modules helps in creating boundary that separates our specific functionality or say features. Feature modules communicates with other module or root module usin…

Decompose Monolithic Application To Microservices

How To Decompose Application into Microservices. After reading the previous two posts you all must be excited to implement microservice architecture to your application and that's good you should be ready to implement something new that might boost the application performance,  maintenance, scalability and will make your application future proof. But have you ever thought how will you be breaking your application into micro application i.e microservices. Think about it for some minute exercise your brain for some time before reading the below tutorial.

Now i am sure that you all might  have come through excellent ideas for breaking up your application in microservices. Please feel free to mention your valuable ideas in comment so that other or even me can be benefited by your ideas.

Now before breaking your application into micro-services you should consider following points.
Points to be considered before creating microservices.Your each services should be easily testable.Your a…