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
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.
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.
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.
<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.
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.
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.
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.
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.
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.