Angular 2's router comes with many features for routing based on path's and loading specific components. This course gives you an intro to how to configure your routes, navigate between them, and use services and guards when navigating to routes.

This Angular 2 course assumes knowledge of some fundamentals.
We have an Angular 2 course that will [Get you started](https://egghead.io/series/angular-2-fundamentals)

Using the Angular router requires defining routes, passing them in to the `RouterModule.forRoot` and then importing the configured `RouterModule` into your main App Module.

angular

Configure Your First Angular Route

Mapping Angular routes to components is fairly straight-forward, but if you’re not going to lazy load in modules, then you’ll need to make sure to reference each `Component` you’re using in your main App Module.

Map a Second Angular Route to a Component

Angular navigation is configured using the `routerLink` directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular’s router to navigate between your defined routes.

Build Angular Navigation with routerLink

Angular lazy loading is a core feature of Angular. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional modules as you define them in your routes. Make sure to properly organize your files into Angular’s module pattern so that files that belong to each module don’t get required by other modules.

Lazy Load Angular Modules with the Router

You can easily show the user which route they are on using Angular’s `routerLinkActive`. Whenever a route matches the `routerLink` defined on the element, then the `routerLInkActive` will add the class that you assign it to.

Style the Active Angular Navigation Element with routerLinkActive

Angular’s ActivatedRoute allows you to get the details of the current route into your components. Params on the `ActivatedRoute` are provided as streams, so you can easily `map` the param you want off of the stream and display it in your template.

Use Params from Angular Routes Inside of Components

The `<base href=”/”/>` you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use `/` as your base href, it’s important to understand what’s going on in case you need to change how you’re hosting your project.

Understand the Angular Base href Requirement

It’s often easier to build out your navigation dynamically so that you have programmatic control of which navigation elements appear (and those which don’t). You can leverage the power of Angular’s `*ngFor` directive to build out navigation based on any set of data you provide with urls.

Build Dynamic Angular Navigation with ngFor

Using the `Http` service, you can load in data to create your `routerLink` navgation. This builds on the same concepts of using `*ngFor`, but since `Http` uses streams, you’ll need to use the `| async` pipe to be able to properly display the loaded data.

Load Data to Build Angular Navigation

You can load resource based on the url using the a combination of `ActivatedRoute` and Angular’s `Http` service. Since the params and `Http` are both streams, you can use RxJS to get the data off the param then `switchMap` over to an `Http` request using that data.

Load Data Based on Angular Route Params

Each time you use the Async Pipe, you create a new subscription to the stream in the template. This can cause undesired behavior especially when network requests are involved. This lesson shows how to use a BehaviorSubject to observe the http stream so that only one request is made even though we still have two Async pipes in the template.

Manage UI State with the Angular 2 Router

John Lindquist

Course Content