Manage UI State with the Angular 2 Router

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

Watch User Created Playlist (11)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Configure Your First Angular Route

Map a Second Angular Route to a Component

P

Build Angular Navigation with routerLink

P

Lazy Load Angular Modules with the Router

P

Style the Active Angular Navigation Element with routerLinkActive

P

Use Params from Angular Routes Inside of Components

P

Understand the Angular Base href Requirement

P

Build Dynamic Angular Navigation with ngFor

P

Load Data to Build Angular Navigation

P

Load Data Based on Angular Route Params

P

Control Rx Subscriptions with Async Pipe and BehaviorSubjects

P
angular tutorial about Configure Your First Angular Route

Configure Your First Angular Route

3:31 angular

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 tutorial about Map a Second Angular Route to a Component

Map a Second Angular Route to a Component

0:49 angular PRO

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.

angular tutorial about Build Angular Navigation with routerLink

Build Angular Navigation with routerLink

0:38 angular PRO

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.

angular tutorial about Lazy Load Angular Modules with the Router

Lazy Load Angular Modules with the Router

5:15 angular PRO

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.

angular tutorial about Style the Active Angular Navigation Element with routerLinkActive

Style the Active Angular Navigation Element with routerLinkActive

1:53 angular PRO

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.

angular tutorial about Use Params from Angular Routes Inside of Components

Use Params from Angular Routes Inside of Components

3:07 angular PRO

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.

angular tutorial about Understand the Angular Base href Requirement

Understand the Angular Base href Requirement

3:48 angular PRO

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.

angular tutorial about Build Dynamic Angular Navigation with ngFor

Build Dynamic Angular Navigation with ngFor

1:49 angular PRO

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.

angular tutorial about Load Data to Build Angular Navigation

Load Data to Build Angular Navigation

3:29 angular PRO

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.

angular tutorial about Load Data Based on Angular Route Params

Load Data Based on Angular Route Params

5:16 angular PRO

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.

angular tutorial about Control Rx Subscriptions with Async Pipe and BehaviorSubjects

Control Rx Subscriptions with Async Pipe and BehaviorSubjects

2:11 angular PRO

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?