Angular 2's router comes with many features for routing based on path's and loading specific components. This course gives you a fast and furious intro to how to configure your routes, navigate between them, and use services and guards when navigating to routes.
This course is still in alpha so please let me know of any errors or updates you think it needs. Its pretty fast passed by design.
In the Up and Running Series Courses we dive straight into the working examples. There are little to no slides in these courses. No long running intro videos and no installation videos. This is a learn by real world working example course. These courses are set up so that in about 1 hour you will be up and running with a new technology.
This is not a beginner course. We will not go over basic angular functions this course is designed for one reason and one reason only. To go over the Angular Router. This Angular 2 course assumes knowledge of some fundamentals. If you haven't learned the fundamentals yet please use my angular 2 course Step by Step course to get started then come back.
In this course Luke Angel, a Sr. Technical Cross Platform Program Manager working at companies ranging from startups to Fortune 100's, building technology-driven marketing solutions with global reach and Netflix scale. Luke will guide through all the steps it takes to work the Angular 2 router.
In this course you will learn:
This course does not hold back by design so you need to step up and hold on as we go through information at warp speed. This is by design to get up and running within your lunch hour. So hold on to your hats!
In the Lecture I go over how you can use the Angular CLI to create our start project. I have done this for you already and its in the course exercise files under chapter 0. I thought you might find it interesting
You Can Get The Exercise Files attached to this chapter. Or through GIT at this location.
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.
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.
routerLinkdirective. 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.
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.
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
ActivatedRouteand 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.