Basic Routing in Angular 2

Basic Routing in Angular 2

Editor’s node: This post has been updated to angular-2.0.0-rc.6

We use routing to separate different parts of our app, generally (but not always) by using the URL to denote our location. Angular 2’s router is super easy to use, and below I’ll share some of the basics.

The idea is that we might put our login page at the URL /login and our dashboard page at /dashboard. In Angular 2, we’d have a LoginComponent for the /login page and a DashboardComponent for the /dashboard page. In the common case, a router lets us map these URLs to a component.

There are three main components that we use to configure routing in Angular:

  • Routes describes our application’s routes
  • RouterOutlet is a “placeholder” component that gets expanded to each route’s content
  • RouterLink is used to link to routes

Routes

Routes is an object that we use on our application component that describes the routes we want to use. For instance, we could write our routes like this:

Notice here that we:

  • use path to specify the URL
  • we specify the component we want to route to
  • we can redirect using the redirectTo option

Providing our Router

To install our router into our app we use the RouterModule.forRoot() function in the imports key of our NgModule:

Notice that we give our routes as the argument to RouterModule.forRoot().

When we put RouterModule in our imports it means that we’re able to use the RouterOutlet and RouterLink components in this module. Here’s what each of those do:

RouterOutlet

The RouterOutlet directive tells our router where to render the content in the view.

For instance, if we have a view:

Then whenever we switch routes, our content will be rendered in place of the router-outlet tag. That is, if we were switching to the /login page, the content rendered by the LoginComponent would be placed there.

If we want to navigate between routes, we use the RouterLink directive. So if we wanted to link to our login and dashboard page from a navigation, we could change our view above to something like this:

If you’ve used ui-router before, you’ll notice that router-link is similar to the ui-sref directive.

The argument to router-link is an array with the route name as the first element (e.g. "['home']" or "['about']"). This indicates which route to navigate to when we click the element. Notice that we put the name of the route here and not the URL.

It might seem a little odd that the value of router-link is a string with an array containing a string ("['home']", for example). This is because there are more things you can provide when linking to routes, but we’ll look at this into more detail when we talk about child routes and route parameters in the book.

Locating the imports

To find all of the constants we used above, we use the following:

Summary

There we go! That’s more-or-less all the basics you need to know to get routing up and running for Angular 2.

In the book we cover more sophisticated concepts like nested routes, protected routes, route lifecycles, query parameters etc. Each one of those concepts is part of a full, runnable sample app. So definitely check out the code samples!

  • przemeko

    The content is litte bit outdated 🙂 In latest releases Angular uses providers to setup fe.

    bootstrap(AppCmp, [
    ROUTER_PROVIDERS
    ]);

    and that all. You may use router config in your code.

    • https://ng-book.com/2 Fullstack.io

      Whoops! Yes we’ll fix that

  • Michalis Argyriou

    How about hiding the Login link when you login? How can you achieve this?

  • e.wad

    Can you update to angular 2 – RC ?

  • Daniel Lim

    It appears to be broken now, time for an update?

  • Aamir

    ‘ Terminal : true ‘ in redirect method is now deprecated, use pathMatch: “full” instead.