I’ve just finished a 700h Angular 2/4 project on my own and I was bit by Angular more than once either because there were bugs, bad design, poor documentation, or assumptions that were made incorrectly.

In this post, I am talking about the routing system in Angular. We won’t hide from it; routing frameworks are complicated to do. Not only do you want to cover everybody’s scenario, but technology keeps changing at a rapid pace. When Angular 2 shipped, Angular Router was already misaligned with Angular Core as it released its version 3. After playing with it, it definitely felt like a beta version of how things were supposed to work. Documentation was scarce. To top it all off, they kept making breaking changes in patches. I had to lock package.json on a specific version so as to not be surprised on deployment.

Even after following all of their advice, I messed it up. Hopefully you can do something early enough in your project to prevent this mishap.

Before starting with Angular, let’s step back and see what the best HTML practice to create links should be.

The Basics

Choose your correct HTML element

This “click” event came a long way in JavaScript/HTML. Remember this onclick attribute, that was awesome! (not?). Then addEventListener('click') showed up, then jQuery chimed in, etc.

There are so many ways to make things clickable on the page, however, so many people get this wrong. Tutorials, Stackoverflow, even the Angular Documentation. My biggest recommendation is: Stop setting your click events on non-navigational elements.

You should restrict your events to <a> and <button>. THAT’S IT! How can I get my whole <div> to be clickable? Wrap an <a> tag around it. In HTML5, the <a> tag became a “transparent element” (http://w3c.github.io/html-reference/a.html#a-changes), you can wrap anything with it (almost anything… I’m still waiting on the <tr> element).

If you plan to handle a click event on something other than these two elements, you should handle all ARIA accessibility concerns and handle all keyboard combinations that the users expect. Good luck! Make sure to try it with screen readers too: you’ll be surprised.

DON’T:

<li onclick="pieceOfJavaScript(event)">
<li id="myElement"> -- $('#myElement').click(function() {});

1 2	<li onclick="pieceOfJavaScript(event)"> <li id="myElement"> -- $('#myElement').click(function() {});

<a href="...">
<button id="willAttachClickEvent">

1 2	<a href="..."> <button id="willAttachClickEvent">

So, <a> elements or <button> elements?

With all Single Application Pages (SPA) popping up, you “technically” never navigate away. So then, you might think <button> is the way to go. Also, <button> gives you the ability out of the box to NOT show the status link in the bottom left. Advantage? Maybe. However, your button is not a link; if you hope search engines will catch that, you’re out of luck.

Use <a> tags when you navigate to another page.

Use <button> when you open a little popover or a dialog that is not reachable from the URL. I’m done talking about the buttons. Use it with parsimony when you do NOT navigate.

DON’T:

<button> -- window.location.href = "/new-page"; // or pushState()

1	<button> -- window.location.href = "/new-page"; // or pushState()

DO:

<a href="/new-page">

1	<a href="/new-page">

Where should I navigate to?

Unfortunately, the common practice I have seen is to set the href attribute to #, javascript:;, javascript:void(0) or a another variant, then handle the click event by code. I’m guilty: I have done the same thing too often. Your link should reflect the page URL it will navigate to. That way, your user will be able to CTRL+click on the link, or right click then “Open in a new tab”.

DON’T:

<a href="#">
<a href="javascript:;">

1 2	<a href="#"> <a href="javascript:;">

DO:

<a href="/meaningful-url">

1	<a href="/meaningful-url">

Let me bubble

If you inconveniently used the # technique, your code most likely uses preventDefault() on the link. If you use jQuery, they recommend to use return false. If you do so, you actually stop the click event from bubbling.

On a SPA page, all clicks should bubble properly since we are never refreshing the page. Another component on the page might be listening to the <body> to close a popover, or change its state.

So, the recommendation, don’t stop bubbling, and don’t use #.

DON’T:

$('#myLink').on('click', function(evt) { return false; });

1	$('#myLink').on('click', function(evt) { return false; });

DO:

<a href="/meaningful-url">

1	<a href="/meaningful-url">

Then Angular Router Way

The documentation they provide is getting quite beefy, written most likely by some Angular Experts, but they are not aware of these subtleties or are simply ignoring good practice to make the documentation slimmer.

The Angular Routing system is using the pushState technology which allows you to stay on the same page while you still navigate to different URL. It’s a little harder to setup, but a lot more useful when you start deep-linking your site to other web sites or e-mail messages.

Don’t use router.navigate()

Angular Router recommends putting your (click) attributes on <li> then using the router to navigate by code. Not only will this element not be tab-able, but you just lost the functionality to right click and open in a new tab. Use [routerLink] appropriately to create the correct link.

DON’T:

this.router.navigate(['/hero', hero.id]);

1	this.router.navigate(['/hero', hero.id]);

DO:

<a [routerLink]="['/hero', hero.id]">My Hero</a>

1	<a [routerLink]="['/hero', hero.id]">My Hero</a>

My links are all string based – I hate it

This is not new to Angular. It’s a problem I see in all the frameworks I have worked with. With the usage of a typed language, I find it sad that we still make important decisions about linking our pages with something that is not compiled and duplicated.

If you decide to change your link in the routing system, you’ll have to check the usage of that sad string everywhere.

Maybe your HTML is not compiled (that’s for another post), but at least start being DRY and use a compiled variable to point to your link.

DO:

@Injectable()
export class CrisisCenterRoutingLinks {
    constructor(
    ) { } 

    get crisisCenter(): string {
        return 'crisis-center';
    }

    get heroCenter(): string {
        return 'hero';
    }
}

let crisisCenterRoutingLinks = new CrisisCenterRoutingLinks();
const appRoutes: Routes = [
    { path: crisisCenterRoutingLinks.crisisCenter, component: CrisisListComponent },
    { path: crisisCenterRoutingLinks.heroCenter + '/:id', component: HeroDetailComponent },
    //...
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    CrisisCenterRoutingLinks
  ]
})

@Component({
  selector: 'my-app',
  template: `
    <h1>Angular Router</h1>
    <nav>
      <a [routerLink]="['/', crisisCenterRoutingLinks.linkCenter]" routerLinkActive="active">Crisis Center</a>
      <a [routerLink]="['/’, crisisCenterRoutingLinks.heroCenter, hero.id]" routerLinkActive="active">A specific Hero</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class CrisisListComponent {
    constructor(
        private crisisCenterRoutingLinks: CrisisCenterRoutingLinks
    ) {
    }
}

@Injectable()

export class CrisisCenterRoutingLinks {

constructor(

) { }

get crisisCenter(): string {

return 'crisis-center';

}

get heroCenter(): string {

return 'hero';

}

let crisisCenterRoutingLinks = new CrisisCenterRoutingLinks();

const appRoutes: Routes = [

{ path: crisisCenterRoutingLinks.crisisCenter, component: CrisisListComponent },

{ path: crisisCenterRoutingLinks.heroCenter + '/:id', component: HeroDetailComponent },

//...

];

@NgModule({

imports: [

RouterModule.forRoot(appRoutes)

providers: [

CrisisCenterRoutingLinks

]

})

@Component({

selector: 'my-app',

template: `

<h1>Angular Router</h1>

<nav>

<a [routerLink]="['/', crisisCenterRoutingLinks.linkCenter]" routerLinkActive="active">Crisis Center</a>

<a [routerLink]="['/’, crisisCenterRoutingLinks.heroCenter, hero.id]" routerLinkActive="active">A specific Hero</a>

</nav>

<router-outlet></router-outlet>

})

export class CrisisListComponent {

constructor(

private crisisCenterRoutingLinks: CrisisCenterRoutingLinks

) {

}

One day, if you start compiling your HTML template, you will be thankful the link is actually defined in one spot.

Your code knows too much about how it should route

The coupling we created might scare you, but without it you are at the mercy of runtime errors. You will need to have a good series of integration testing to catch these issues.

One more problem with the code above is this logic in ['/’, crisisCenterRoutingLinks.heroCenter, hero.id]. Your component is very much aware of how to create a link to reach the “heroCenter” in this case. That’s not very good. Let’s try it with a function.

In CrisisCenterRoutingLinks class, let’s add this method

generateHeroCenter(id: string | number): any { // I wish Angular typed this return.
    return ['/', this.heroCenter, +id];
}

get heroCenterRoute(): string {
    return 'hero/:id';
}

private get heroCenter(): string {
    return 'hero';
}

generateHeroCenter(id: string | number): any { // I wish Angular typed this return.

return ['/', this.heroCenter, +id];

}

get heroCenterRoute(): string {

return 'hero/:id';

}

private get heroCenter(): string {

return 'hero';

}

Notice we made heroCenter private: we wouldn’t want people to reach it because it’s actually not a valid URL. You’ll need to update the routing page too to get the heroCenterRoute.

Our HTML would look like this:

<a [routerLink]="generateHeroCenter(hero.id)" routerLinkActive="active">A specific Hero</a>

1	<a [routerLink]="generateHeroCenter(hero.id)" routerLinkActive="active">A specific Hero</a>

If you need to pass more things to the function, you might want to accept another argument with a typed interface to pass in your currentRoute in order to handle the relativeTo functionality for example.

Complication with re-usable components

I might have a component that is re-used across the site, but still need to get some routing data handled. Let’s say, for example, a <tn-help> component that creates a help link with a cute little image. This time, we don’t want to be too permissive on this approach and accept any kind of string. We should restrict its usage and try to avoid using providers that are too global. (This help button does not need to know how to reach into the CrisisCenterRoutingLinks!)

In my previous project, I was using a EventEmitter to finally use this.router.navigate. You should avoid that based on the recommendations I have provided above.

export enum HelpLink {
    HowToCreateHero,
    HowToCreateGreatLinks
}

@Injectable()
export class HelpLinkService {
    constructor(
        private linkCenterCrisisRouting: LinkCenterCrisisRouting,
        private anotherSectionOfSiteRouting: AnotherSectionRouting
    ) {
    }

    getLink(helpLink: HelpLink): any {
        switch (helpLink) {
            case HelpLink.HowToCreateGreatLinks:
                this.linkCenterCrisisRouting.crisisCenterHelp;
            case HelpLink.HowToCreateGreatLinks:
                this.anotherSectionOfSiteRouting.createLinkHelp;
        }

        // Potentially throw!

        return [];
    }
}


@Component({
    selector: 'tn-help',
    template: '<a [routerLink]="helpLinkService.getLink(helpLink)">
      <img src="/images/help.png" alt="" />
      <ng-content><ng-content>
    </a>',
    styleUrls: ['tn.component.css']
})
export class HelpComponent {
    @Input()
    helpLink: HelpLink;

    // Don't do this, especially if you are about to do this.router.navigate
    // In the component who created this HelpComponent.
    ////@Output()
    ////linkClick: EventEmitter<void> = new EventEmitter<void>();

    constructor(private helpLinkService: HelpLinkService) {
    }
}

export enum HelpLink {

HowToCreateHero,

HowToCreateGreatLinks

}

@Injectable()

export class HelpLinkService {

constructor(

private linkCenterCrisisRouting: LinkCenterCrisisRouting,

private anotherSectionOfSiteRouting: AnotherSectionRouting

) {

}

getLink(helpLink: HelpLink): any {

switch (helpLink) {

case HelpLink.HowToCreateGreatLinks:

this.linkCenterCrisisRouting.crisisCenterHelp;

case HelpLink.HowToCreateGreatLinks:

this.anotherSectionOfSiteRouting.createLinkHelp;

}

// Potentially throw!

return [];

}

@Component({

selector: 'tn-help',

template: '<a [routerLink]="helpLinkService.getLink(helpLink)">

<ng-content><ng-content>

</a>',

styleUrls: ['tn.component.css']

})

export class HelpComponent {

@Input()

helpLink: HelpLink;

// Don't do this, especially if you are about to do this.router.navigate

// In the component who created this HelpComponent.

////@Output()

////linkClick: EventEmitter<void> = new EventEmitter<void>();

constructor(private helpLinkService: HelpLinkService) {

}

I will let you manage your imports and file placements. You might want to separate the enum from the service.

Now all knowledge about how to create links is encapsulated in one place AND it is compiled.

Go even further?

I just scratched the surface on how you can make an abstraction layer on top of the Angular Router to handle links properly. You might even be able to do this with all your /images/ links?

It’s important to create abstractions as such for a big website so that if you need to change something everywhere you will not have to scavenge for the information. However, make sure you understand the functionality if you want to avoid any bad assumptions on how Angular works.

Jean-Sébastien Goupil (11 Posts)

Web Architect Consultant - Passionate about web projects! Expert in barcodes, automation, and JavaScript

M	T	W	T	F	S	S
« Jul
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30