Angular 2 Routing: Up And Running
4.0 (103 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
4,106 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 Routing: Up And Running to your Wishlist.

Add to Wishlist

Angular 2 Routing: Up And Running

Get Up To Speed With Angular 2 Routing In just A Quick 30 Minutes
4.0 (103 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
4,106 students enrolled
Created by BTree Press
Last updated 2/2017
English
English [Auto-generated]
Price: Free
Includes:
  • 37 mins on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build A Angular Route
  • Map Routes To Components
  • Work WIth Router Links
  • Lazy Load Modules With Angular 2 Router
  • How To Use The Router Link Active To Style The Angular 2 Navigation Elements
  • Build Dynamic Navigation With Angular 2 Ng For
  • Dynamically Create Navigation With Angular 2 Router
  • Use Route Params To Load Data In Angular 2 Router
  • Managing Rx Subscriptions With Async Pipe And Behavior Subjects
View Curriculum
Requirements
  • Angular Basics
  • Javascript Basics
  • That they want to kick some router but
Description

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:

  1. The First Angular 2 Route
  2. Mapping Routes To A Components
  3. How To Work With Router Link In Angular 2 Navigation
  4. Lazy Load Modules With Angular 2 Router
  5. How To Use The Router Link Active To Style The Angular 2 Navigation Elements
  6. Use Route Params Inside Of Components In Angular 2
  7. Build Dynamic Navigation With Angular 2 Ng For
  8. Dynamically Create Navigation With Angular 2 Router
  9. Use Route Params To Load Data In Angular 2 Router
  10. Managing Rx Subscriptions With Async Pipe And Behavior Subjects

 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!

Who is the target audience?
  • People who want to know more about angular router
  • People who like angular
  • People who love angular
  • People who want to build kick but applications
Compare to Other Angular Courses
Curriculum For This Course
+
Up And Running
9 Lectures 22:41
Introduction
01:49

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

Angular CLI vs Google Seed Project
02:04

You Can Get The Exercise Files attached to this chapter. Or through GIT at this location.

https://github.com/bTreePress/Angular-2-Router-Up-And-Running-Course/



Exercise Files
01:29

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.

The First Angular 2 Route
03:54

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.

Mapping Routes To A Components
01:03

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.
How To Work With Router Link In Angular 2 Navigation
00:55

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.

Lazy Load Modules With Angular 2 Router
05:37

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.


How To Use The Router Link Active To Style The Angular 2 Navigation Elements
02:15

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.

Use Route Params Inside Of Components In Angular 2
03:35
+
Dynamic Routing
2 Lectures 06:18

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.

Build Dynamic Navigation With Angular 2 Ng For
02:15

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.

Dynamically Create Navigation With Angular 2 Router
04:03
+
Advanced Topics - Reactive Programming
2 Lectures 07:48

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.

Use Route Params To Load Data In Angular 2 Router
05:26

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.

Managing Rx Subscriptions With Async Pipe And Behavior Subjects
02:22
About the Instructor
BTree Press
4.1 Average rating
101 Reviews
4,106 Students
1 Course