Angular Routing

Name: Angular Routing
Author: Michaela Ochnich

This chapter will cover Angular’s routing services. You’ll learn how to create child routes, as well as restricted routes that only certain users can access.

Preview the first lesson free — get full access to all 6 lessons.

Request a demo Sign in

Course: On-Demand

This lesson is going to demonstrate how to pass and retrieve parameter values from the angular router. So the app I have here was generated with routing with the CLI tool. So this routing module file is already configured and imported into the route module of the application. The router module that's imported from angular here includes different directives and providers that allow for in application navigation. This includes the router link, router link active, and the router outlet directives, as well as the router service. So for this demo, say you're creating a web application for a real estate company. One of the features you may need is a page that lists the available properties, and then clicking that property listing should take the user to a page with more details about that particular property. So to set that up, I'm first going to generate a component that displays a list of the properties and then a component that will display the details of our property. So here, the item list component will be for displaying all of the listings and the item component will be for displaying an individual listing. I'm also gonna generate a component to act as a home page. So now to create routes for those three components, I first have to import them into this app routing module file. Next down here, and the routes are right. I'm gonna first define a route for the home page. And then next I'll create a route for the item list component. Now for the item component, I need to pass the ID of the item in the route . This way if this app was attached to a back-end, it could use that ID to retrieve the data for the listing, from the database. To denote a parameter in a route path, put a colon in front of the parameter name. This way, the angular router knows that this is a parameter that's going to be passed. And it doesn't try to match the path to the word ID. When it looks for a matching route. And that parameter value will be passed in the link When a user clicks on a specific item from the list. Since there's no actual back-end for this app, I created a service that will return some basic mock data just for demonstration purposes. There's two functions defined in the service. One that returns all of the listing data, and one that takes an ID and returns that particular listing data . And to finish setting up that router. I also need to add the router outlet. So I'm gonna open up the route component template, and delete all of the starter code, and then replace that with that router outlet. So now that there is an outlet to display the routes in the view, I'm gonna create a link from the homepage component to that list component. Now to create a link for the angular router, you don't want to use the H-ref attribute. This is a single page application, so we don't want to navigate to a new HTML page. Instead, the router link directive is used.

Intermediate Provider : Michaela Ochnich 6 Lessons · 33m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

This chapter will cover Angular’s routing services. You’ll learn how to create child routes, as well as restricted routes that only certain users can access. You’ll learn how creating relative links in your Angular application can help when refactoring, and how to retrieve the current route parameters from a component class.

What You'll Learn

Create different types of Angular routes using Angular's routing services
Build child routes within an Angular application
Restrict access to routes so that only certain users can access them
Create relative links to make refactoring easier
Retrieve the current route parameters from a component class

Key Takeaways

Angular provides routing services for creating and managing routes in an application.
Routes can be configured as child routes and as restricted routes that only certain users can access.
Using relative links in an Angular application can help when refactoring.
The current route parameters can be retrieved from within a component class.

Frequently Asked Questions

What does this Angular Routing chapter cover?

It covers Angular's routing services, including how to create child routes and restricted routes that only certain users can access, how relative links help when refactoring, and how to retrieve the current route parameters from a component class.

What will I be able to do after completing this course?

You will understand how to create different types of Angular routes and learn how to restrict access to a route.

What lessons are included in this chapter?

The chapter includes Route Info Part 1, Route Info Part 2, Route Info Part 3, Relative Routes, Child Routes, and Restricted Route.

Does this course explain how to limit who can reach a route?

Yes. It teaches how to create restricted routes that only certain users can access and how to restrict access to a route.