Angular 6 Routing/Navigation – with Angular Router Service

In Angular application, how to navigation among views? Developers can achieve it with the power of Angular Router Service that helps find out a corresponding Route when having any changes of browser’s URL to determine the component to display.

Related posts:
Integrate Bootstrap with Angular
Angular 6 Service – with Observable Data for Asynchronous Operation
Angular 6 Component – How to create & integrate New Angular 6 Component

Technologies

  • Node.js – version v10.4.0
  • Angular – version 6
  • Bootstrap – 3.x & 4.x
  • Visual Studio Code – version 1.24.0

Goal

We create an Angular project as below:

angular-6-routing + angular-project-structure

-> Navigation:

– Home Page (also US Customer Component page):

– UK Customer Component page:

angular-6-routing + uk - customer

– Details Customer page:

angular-6-routing + a-customer-view-routing

– Press go Back button:

angular-6-routing + go back

Application provides a list URLs as below:

  • http://localhost:4200/
  • http://localhost:4200/customers-us
  • http://localhost:4200/customers-uk
  • http://localhost:4200/customers/:id

How to navigate among these views?

– When enter in browser address bar: http://localhost:4200 or http://localhost:4200/customers-us, the app will always redirect to http://localhost:4200/customers-us that be served by CustomerUSComponent.
– When click on each customer item’s link in CustomerUsComponent or CustomerUkComponent views, or enter the links http://localhost:4200/customers/:id in browser address bar -> The browser will show CustomerDetailComponent view with the Browser’s URL http://localhost:4200/customers/{id}.
– Press on Back button, the browser’s URL will be backed one step.

When press other URLs, PageNotFound will be appeared:

angular-6-routing + wrong-url

Angular Router

Angular project preparation

– Generate Angular project:

angular-6-routing + create-angular-project

– Generate:

  • 4 Components {CustomerUsComponent, CustomerUkComponent, CustomerDetailComponent, PageNotFoundComponent}
  • Data Service: CustomerService
  • Module: AppRoutingModule
  • Class: Customer

angular-6-routing + create-angular-generate-components-service-app-routing

– Install Bootstrap 4:

-> Configure installed Bootstrap & JQuery in angular.json file:

Angular Router
Angular Routing Module

In the AppRoutingModule file, configure routes as below:

routes array of routes describes how to navigate.
– Each Route maps a URL path to a component.
– The :id in the second route is a token for a route parameter.

Register AppRoutingModule with AppModule:

Router Outlet & Router Links

Questions:

  • How to show Componenets with Angular Routers? -> Solution: using Router Outlet
  • How to handle the routing that comes from user’s actions? (like clicks on anchor tag) -> Solution: using Router Link

-> We can achieve above functions by using Angular’s router-outlet and routerLink.

Now modify the template file app.component.html of parent AppComponenet component as below:

The RouterLinkActive directive is used to visual the anchor tag for the currently selected “active” route.
Now these components {CustomerUsComponent, CustomerUKComponent, CustomerDetailComponent, PageNotFoundComponent} will be showed under router-outlet tag.

We already had done to setup Routing configuration. -> It’s time for developement Data Service & view-Components.

Data Services implementation
Customer Data Model

Code for customer.ts class:

Customer Service

Angular Components implementation
Customer US Component

– Implement customer-us.component.ts class:

Implement CustomerUSComponent template file customer-us.component.html:

Customer UK Component

– Implement CustomerUkComponent class in file customer-uk.component.ts:

– Implement CustomerUkComponent template file customer-uk.component.html :

Customer Detail Component

– Implement CustomerDetailComponent class file customer-detail.component.ts :

Location is an Angular service for interacting with the browser. Depending on LocationStrategy, Location will either persist to the URL’s path or the URL’s hash segment.
ActivatedRoute contains the information about a route that can be used to traverse and retrieve the state of router tree.

We implement ngOnInit() to get info of a customer by service.getCustomer(params['id'])).
Using Location, a goBack() function navigates backward one step in the browser’s history stack.

– Implement CustomerDetailComponent template file customer-detail.component.html :

PageNotFound Component

Implement PageNotFoundComponent template file page-not-found.component.html :

Source Code

How to run the below sourcecode:

-> Sourcecode:

Angular-6-Routing-Navigation

By JavaSampleApproach | June 23, 2018.

Related Posts


Got Something To Say:

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

*