Components Of Angular Routing


Components of Angular routing


In internet development, routing manner splitting the software into different regions typically based totally on rules which might be derived from the current URL within the browser. For instance, if we go to the / route of a website, we can be touring the home route of that website. Or if we visit /approximately we want to render the “about page”, and so on.




Defining routes in our utility is beneficial because we can:

• separate different regions of the app;

• keep the state inside the app;

• protect areas of the app-based totally on certain rules;


For example, imagine we're writing an inventory utility similar to the one we defined in previous chapters. When we first go to the utility, we might see a search shape where we will enter a search term and get a list of products that in shape that term.


After that, we would click a given product to visit that product’s details page. Becauseourappisclient-side, it’snottechnicallyrequiredthatwechangetheURLwhenwechange “pages”. But it’s worth considering for a minute: what would be the consequences of the use of the equal URL for all pages?


Components of Angular routing



There are three main components that we use to configure routing in Angular:

• Routes describe the routes our software supports

• RouterOutlet is a “placeholder” issue that suggests Angular where to place the content material of every path

• RouterLink directive is used to hyperlink to routes


Let’s look at each one greater closely.


To apply the router in Angular, we import constants from the @angular/router package:



5 import {

 6 RouterModule, 

7 Routes 

8 } from '@angular/router';

Now we can define our router configuration.



To define routes for our application, create a Routes configuration and then use RouterModule.forRoot(routes) to provide our application with the dependencies necessary to use the router.  

First, let’s look at the routes definitions:


26 const routes: Routes = [ 

27 // basic routes

 28 { path: '', redirectTo: 'home', pathMatch: 'full' },

 29 { path: 'home', component: HomeComponent }, 

30 { path: 'about', component: AboutComponent }, 

31 { path: 'contact', component: ContactComponent }, 

32 { path: 'contactus', redirectTo: 'contact' }, 


34 // authentication demo 

35 { path: 'login', component: LoginComponent }, 

36 { 

37 path: 'protected', 

38 component: ProtectedComponent, 

39 canActivate: [ LoggedInGuard ] 

40 }, 


42 // nested 

43 { 

44 path: 'products', 

45 component: ProductsComponent, 

46 children: childRoutes 

47 } 

48 ];

Notice a few things about the routes:

• path specifies the URL this direction will deal with

• thing is what ties a given course direction to a factor with a purpose to deal with the course

• the non-obligatory redirectTo is used to redirect a given route to an existing path

We’ll dive into the info of every path in this chapter, however at a high-level, the goal of routes is to specify which component will manage a given Angular course.



When we use redirectTo on a route definition, it'll tell the router that when we visit the direction of the route, we want the browser to be redirected to another course. In our sample code above, if we go to the root course at http://localhost:4200/#/61, we’ll be redirected to the course home. Another example is the contactus path:


code/routes/routing/src/app/app.Module.Ts 32 course: 'contactus', redirectTo: 'contact' ,

In this case, if we visit the URL http://localhost:4200/#/contactus62, we’ll see that the browser redirects to /contact.



Now that we've got our Routes routes, we want to install it. To use the routes in our app we do two matters to our NgModule:

1. Import the RouterModule 2. Install the routes using RouterModule.ForRoot(routes) inside the imports of our NgModule

Here’s our routes configured into our NgModule for this app: 61http://localhost:4200/#/ 



26 const routes: Routes = [

 27 // basic routes 

28 { path: '', redirectTo: 'home', pathMatch: 'full' }, 

29 { path: 'home', component: HomeComponent }, 

30 { path: 'about', component: AboutComponent }, 

31 { path: 'contact', component: ContactComponent },

 32 { path: 'contactus', redirectTo: 'contact' },


59 imports: [ 

60 BrowserModule, 

61 FormsModule, 

62 HttpModule, 

63 RouterModule.forRoot(routes), // <-- routes


65 // added this for our child module

 66 ProductsModule

 67 ],


If you want to learn Polymer JS, then Getting Started with Angular Certification on Pluaralsight is an excellent course to start with.




Keywords: angular training,angular js course,angular course,angular certification


Other related blogs

Trying to find a reliable writing service?

By : Papercoach

Trying to find a reliable writing service? Think that it is really hard to do it because of the nume..

Things to Avoid When Planning to Apply for a UK Student Visa

By : Cambridge International Academy

The UK is one of the most outstanding destinations for higher studies. Students from China, India,..

Tips for note taking

By : Innoclaz Academy

 Note taking provides a long-term access to the sources which the student has written. Not taki..

15 Commonly Asked PTE Speaking & Writing Questions by The Test-Takers

By : PTE Tutorials

PTE Academic exam takes a lot of questions to be solved and rigorous practice to achieve the desir..