Manage UI State with the Angular 2 Router

31 minutes

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.

pro-course-rss-logo

PRO RSS Feed

Configure Your First Angular 2 Route

Map a Second Angular 2 Route to a Component

P

Build Angular 2 Navigation with routerLink

P

Lazy Load Angular 2 Modules with the Router

P

Style the Active Angular 2 Navigation Element with routerLinkActive

P

Use Params from Angular 2 Routes Inside of Components

P

Understand the Angular 2 Base href Requirement

P

Build Dynamic Angular 2 Navigation with ngFor

P

Load Data to Build Angular 2 Navigation

P

Load Data Based on Angular 2 Route Params

P

Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

angular2 tutorial about Configure Your First Angular 2 Route

Configure Your First Angular 2 Route

3:31 angular2

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

angular2 tutorial about Map a Second Angular 2 Route to a Component

Map a Second Angular 2 Route to a Component

0:49 angular2 PRO

Mapping Angular 2 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.

angular2 tutorial about Build Angular 2 Navigation with routerLink

Build Angular 2 Navigation with routerLink

0:38 angular2 PRO

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

angular2 tutorial about Lazy Load Angular 2 Modules with the Router

Lazy Load Angular 2 Modules with the Router

5:15 angular2 PRO

Angular 2 lazy loading is a core feature of Angular 2. 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 2’s module pattern so that files that belong to each module don’t get required by other modules.

angular2 tutorial about Style the Active Angular 2 Navigation Element with routerLinkActive

Style the Active Angular 2 Navigation Element with routerLinkActive

1:53 angular2 PRO

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

angular2 tutorial about Use Params from Angular 2 Routes Inside of Components

Use Params from Angular 2 Routes Inside of Components

3:07 angular2 PRO

Angular 2’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.

angular2 tutorial about Understand the Angular 2 Base href Requirement

Understand the Angular 2 Base href Requirement

3:48 angular2 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.

angular2 tutorial about Build Dynamic Angular 2 Navigation with ngFor

Build Dynamic Angular 2 Navigation with ngFor

1:49 angular2 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 2’s *ngFor directive to build out navigation based on any set of data you provide with urls.

angular2 tutorial about Load Data to Build Angular 2 Navigation

Load Data to Build Angular 2 Navigation

3:29 angular2 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.

angular2 tutorial about Load Data Based on Angular 2 Route Params

Load Data Based on Angular 2 Route Params

5:16 angular2 PRO

You can load resource based on the url using the a combination of ActivatedRoute and Angular 2’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.

angular2 tutorial about Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

2:11 angular2

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.

Presented by:

John Lindquist

John Lindquist is a co-founder of egghead.io

John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.

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