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

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…

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…

Monolithic Application Architecture

In regular web development process what do we do? We create one war file which contains all functionality, services, modules or all use cases related to our business. In this approach of development we do not focus to make our application modularise. We may be following modularization in our code but end product is not seperated. Every services, modules are bundled up in single war and this war is deployed on server so that our business will be available for outside world which can make a request to get the required resources. This native architecture of development is called Monolithic Architecture.

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.

Lazy Loading of Feature Module in Angular 7

whenever angular application is loaded then its all modules are loaded eagerly i.e  entire application is loaded at client side on first request made to server. This cause over utilization of the resources and slows down the application at least at first time.

Just take example for E-commerce website which will have several module like order module, Feedback module, Cart Module, Product module and etc. But suppose your require to give feedback for some product you have bought and you visited to feedback page but now instead of loading just