Routing in Angular2

By June 23, 2016Angular 2

In this post we will look at how Routing is done in Angular2. Router in Angular2 has changed quite a bit over the span of Angular2. When Angular2 Beta shipped it shipped with a Router which the Angular team are now deprecating in favor of the more modern Component Router. The old router is still available over a deprecated package but in this post, we will be using the new Component Router that is part of Angular RC and forward.

To start using the new Component Router in Angular2 we need first import the router library. To do this you need to use the ‘@angular/router’ npm package. You can also use SystemJs to import the Router library and the Angular Quick start has a really good starting point on how you can use SystemJs and import Router –

Notice in the above snippet in the ngPackageNames variables we are adding ‘router’ to get imported. Now if you are going to use the old deprecated library you can just add ‘router-deprecated’ to the list as well.

Once we have the Router library, the first thing we need to do is to set the base href for the application to make Angular2 routers work just like any server urls. Angular2 under the covers accomplishes this using the HTML5 pushState.

Now that we have the pre-requisites out the way, let’s look at how we start using the Router. To use the router we need to add a Router Provider which holds all the route configuration. We also need to add Router Directives to allow us to use Router Links (more on this later)

The Router Providers and Router Directives allow us to start using Router but we need to define the routes for our application. This is done using the @Routes Attribute. Each Route in this list takes a path which defines the URL at which your Component will be accessible at, here is how to use it –

In the snippet above, we added two routes, one for films and one for vehicles.

Now we just need a place in our application to show the result of these routes. This is done using a Router Outlet which basically matches the URL to component based on Routes and shows it.

That should be enough to get routing going in our Angular2 application. If we were to go to /films we will see the films component that we built in the previous blog post

latestrouterimage1

And if we were to go to /vehicles we will see our Vehicles page

latestrouterimage2

Now, let us expand our example even further and let us add a Navigation Menu to our application which allows us to navigate between our Films and Vehicles Components. This is achieved using Router Links. Router Links directive can be added to any anchor tag to tell Angular about navigating to different components. Let’s see this in action –

In the snippet above, we have to router links one that routes to Films and the other one that routes to Vehicles.

latestrouterimage3

There are lot more options with the new Component Router, to learn more about that keep an eye out on our blog where we dig even more deep into the new router.

The following two tabs change content below.
  • Vahid N.

    This method is deprecated. more info about the new router: https://angular.io/docs/ts/latest/guide/router.html

    • Venkata Koppaka

      Vahid,

      The Component Router that I mainly covered in this article is the the latest (alpha) Component Router that the Angular2 team is using. I briefly touched up on the deprecated router for anyone who is using older version of Angular2.