In the previous chapters, we did a great job separating concerns in our applications and adding different layers of abstraction to increase the maintainability in our Pomodoro app. However, we have neglected the visual side of things and the user experience part.
At this moment, our UI is bloated with components and stuff scattered across a single screen, and we need to provide a better navigational experience and a logical way to change the application's state intuitively.
This is the moment where routing acquires special relevance and gives us the opportunity to build a navigational narrative for our applications, allowing us to split the different areas of interest into different pages that are interconnected by a grid of links and URLs.
However, our application is only a set of components, so how do we deploy a navigation scheme between them? The Angular 2 router was built with componentization in mind. We will see how can we create our custom links and make components react to them in the following pages. In this chapter, we will:
- Discover how to define routes to switch components on and off and redirect them to other routes
- Trigger routes and load components in our views depending on the requested route
- Pass parameters to our components straight from our routes
- Look at the different component lifecycle hooks based on the routing stages
- Define different URL representation strategies
Same as we did when overviewing the Http directives and providers, all the types and tokens required for implementing routing support in our applications come from its own specific barrel. This barrel was already installed and configured back in Chapter 1, Creating Our Very First Component in Angular 2, although we found two barrels related to routing in our installation and further configuration: @angular/router and @angular/router-deprecated. This is because the Angular team introduced a revamped routing mechanism when switching versions from Beta to Release Candidate. This new routing machinery, which aims to replace the routing API that Angular had been implementing since its Alpha version, also introduced relevant breaking changes with its previous incarnation. In order to ensure that applications built on top of the previous router could upgrade to Angular 2 Release Candidate seamlessly and prevent major issues, the Angular team made available a snapshot of the Beta Router, available from the @angular/router-deprecated barrel. That is why we installed and configured two routing packages.
Tip
At the time of closing the writing of this book, the new Angular 2 Router is still in a very early stage and lacks support for several functionalities that are commonly used in our web applications on a daily basis. That is way this chapter will focus on developing applications on top of the deprecated router yet we will highlight the differences between its API and the newer Angular 2 Router whereas possible. All in all the differences are minimal and learning how to use the deprecated router interface will become priceless for getting up to speed with the new router once it becomes final. Please refer to the book code repository to check the latest version of the code.
We also need to inform Angular about the base path we want to use, so it can properly build and recognize the URLs as the user browses the website, as we will see in the next section. Our first task will be to insert a base href statement within our <HEAD> element. Append the following line of code at the end of your code statement inside the <head> tag:
index.html
<base href="/">
The base tag informs the browser about the path it should follow while attempting to load external resources, such as media or CSS files, once it goes deeper into the URL hierarchy.
Now, we can start playing around with all the goodies existing in the router library. Prior to this, we would need to inform the dependency injector about how it can instantiate the tokens we will require later on while implementing the routing features in our components. All these providers are accessible from the ROUTER_PROVIDERS symbol. In a similar fashion as we did with HTTP_PROVIDERS, we need to declare it in the providers property of the top root component so that it is available for all its child components' injectors.
Open your top component module and append the following import statement to the existing block of imported symbols. Then, add it to the providers property of the component decorator:
app/app.component.ts
...
import { SHARED_PROVIDERS } from './shared/shared';
import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
@Component({
selector: 'pomodoro-app',
directives: [ROUTER_DIRECTIVES],
providers: [SHARED_PROVIDERS, HTTP_PROVIDERS, ROUTER_PROVIDERS],
template: `
...