Routing

Angular: The Full Gamut Edition

Charlie Greenman

September 07, 2020

4 min read

Routing is an integral part of any single page application:

[^1]

The idea is that routing is that it is its own internal state machine. There are two things that are unique to state with regards to routing:

Data to be pulled in based on page.
UI to be shown based on page.

Base Href

In any Angular application, there is going to be an initial point of entry for routing. In your src/index.html you will need to add an <base href="/">. This is added by the CLI by default, and not something you have to worry about.

RouterModule

Routes in Angular, are singleton instance.

import { NgModule } from '@angular/core';import { RouterModule } from '@angular/router';import { AppComponent } from './app.component';@NgModule({
  imports: [
    RouterModule.forRoot( [{
        path: '',
        component: AppComponent
      },{
        path: 'draw',
        component: PxGridComponent
      },{
        path: '**',
        component: PageNotFoundComponent
      }], { initialNavigation: 'enabled' })],})export class PixelAngstAppRoutingModule {}

We are supplying all routes within the app routing module.

RouterModule Options

Let's break down all the possible options that can be passed to the router:

url
```
{
  path: &#39;draw&#39;,
  component: GridComponent
},
```
Here we are using the url for draw. So, for instance, let's say the url of our application is razroo.com, then razroo.com/draw, will display the grid component.
id Many times within our backend, we are going to retrieve data, based on the user's id. Alternatively, it might also be the id for a specific api. Being able to tie in the id for that particular api, into the route is very powerful. Angular routing allows for this to happen:
```
{
  path: &#39;hero/:id&#39;, 
  component: HeroDetailComponent 
},
```
The syntax of colon, following by text(does not have to be id), means that if we were to navigate to razroo.com/draw/123, it would register within our app, that we want to call the id of '123', withinthe draw route.
Within our app, we are going to use this, so that we can use the custom pixel illustrator settings, that our user opted into.
data - Allows us to place static data, that we can retrieve that is specific to the route. E.g. page titles, breadcrumb text, other read-only static data.
```
{
  path: &#39;css&#39;, 
  component: cssComponent.
  data: { title: &#39;CSS&#39; }
},
```
empty path - An empty path is our default route. I.e. when the app loads for the first time.
```
{
  path: &#39;&#39;, 
  component: HeroDetailComponent 
},
```
** path Two asterisks means that the route is a wildcard. It is particularly advantageous for error reporting:
```
   {
     path: &#39;**&#39;,
     component: PageNotFoundComponent 
   }
```
Router Outlet

[^2]

&lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;!-- Routed components go here --&gt;

Let's say now we were to go to razroo/com/draw, the component for the draw route will be placed as a sibling component i.e.

&lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;px-grid&gt;&lt;/px-grid&gt;

Router Links

In order to actually navigate from one route to the next, you will need to use the Angular equivalent of href. However, instead of the classic functionality of href, routerLink, will instead reload the component, based on the new url.

&lt;h1&gt;Px Illustrator&lt;/h1&gt;
&lt;nav&gt;
  &lt;a routerLink=&quot;/draw&quot;&gt;Draw&lt;/a&gt;
&lt;/nav&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;

Active Router Links

In addition, Angular offers a way for determining what is the current active link. Something that is very valuable from a UX perspective when the app needs to show to the user, what menu item is currently selected.

&lt;h1&gt;Px Illustrator&lt;/h1&gt;
&lt;nav&gt;
  &lt;a routerLink=&quot;/draw&quot; routerLinkActive=&quot;active&quot;&gt;Draw&lt;/a&gt;
&lt;/nav&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;

Now if the draw route is triggered, the class active will be added to the \<a> tag. The .active class can obviously be styled.

Multiple active router link classes can be added for a particular active route as well:

&lt;h1&gt;Px Illustrator&lt;/h1&gt;
&lt;nav&gt;
  &lt;a routerLink=&quot;/draw&quot; routerLinkActive=&quot;&#39;active &#39;&quot;&gt;Draw&lt;/a&gt;
&lt;/nav&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;

Router State

After each successful navigation lifecycle, Angular's internal system updates what's called the ActivateRoute object. This can beaccessed by using the Router service. Inside of the router service, by accessing the routerState property, we can get to the plethora of properties.

Router Events

When a route get's triggered, Angular will internally trigger a series of events, from when the navigation starts to where it ends. Angular also exposes these series of events by using theRouter.eventsproperty. Once again, there is no need to go into all of the events, but at this time, they total 17.

[^1]: Angular Documentation - Routing & Navigation https://angular.io/guide/router

[^2]: Angular Documentation - Routing & Navigation https://angular.io/guide/router

Subscribe to the Razroo Angular Newsletter!

Razroo takes pride in it's Angular newsletter, and we really pour heart and soul into it. Pass along your e-mail to recieve it in the mail. Our commitment, is to keep you up to date with the latest in Angular, so you don't have to.