7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.9 Adding Child Routes

In this lesson, I'll show you how to use child routes in Angular. Child routes are used to decompose large apps into separate modules; best practice is to split routes into functional groups that are implemented as child routes in their associated module.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


6.9 Adding Child Routes

Hi folks. In this lesson, we're going to take a quick look at child routes. Child routes are used as part of the architectural set-up of an application. The recommended Angular way for large applications is to divide the application into feature areas. Where each feature is an angular module with its own route component and its own routing module, its own router outlet and child routes for the different states of the feature. The example application that we're building in this course isn't really big or complex enough to warrant this type of architecture. Nevertheless, we can still take a little child roots to see how we can add and make use of them adding child roots starts with the root configuration just like regular roots. First of all then, let's open up the app.roots.ts file. So, we can see our existing root definitions there. Remember that each root is an object with keys for path and component, which maps a URL segment to a component, as well as these properties. Another property that any root object may have is children. Let's say that we wanted to divide our Help feature into a couple of smaller features. We already have the game rules, but what if we wanted to add something about strategies for playing the game. Let's start by adding a couple of new components to the Help folder using the CLI. Great. So we have our two trial components of the help component. So let's go back to the app.roots.ts file. First of all, we can import the two new components. And now we can add child routes for these two new components to the existing help route The children property takes an array and the child routes are added as objects in exactly the same way that the top level routes work. Each of them has a path and a component property. We can also add a default empty root for our child roots. We can just map the default root to the rules component like we did with the other default root earlier on just to ensure that the user isn't facing an almost empty screen. So let's make some changes to the existing help component. So first of all, let's move the content from the Help template into the Rules template. We don't need to make any changes at all. We can literally just lift and shift it and now let's open up the strategy component template. And, I've got some copy for this component in a file on my desktop. And I'm just gonna paste that straight into the strategy component template. Okay so we've got the rules and strategy components now. Let's go back to the help component itself. We'll need a router outlet to render the child components into. And we'll probably want some way for the user to switch between the two job components. So let's add a simple navigation element and let's add that above the router outlet. So we have used the routerLink directive once again and let's also make use of the routerLinkActive Directive so that we can give the roles and strategy year rows active states. So the first link goes back to the start components. Notice how we use a relative length for this one that just goes back up the tray and out of the out components all together We can use this because angular supports directory style path navigation. The other two links have root to link directives that point to each component with absolute URL's and the active class gets added with the root to link active directive. So let's take a look in the browser now. Will be redirected to the rules component and from here we should be able to switch between rules and strategy or we can choose to go back to the game. Great, so the routine itself is working. We just need to tidy up the styling slightly, let's add some styling for the nav component, and as this component is inside the help component, we can add the styling directly to help.component.scss. Okay so that should tidy up the navigation. So let's go back to the help component once again. So the navigation is tidier now, but the styles that we added for the rules content isn't being picked up. This is because the styles are scoped to the help component, but this content is now in the child rules component. So this is probably the biggest problem with scoping the styling. It's a small price to pay for the other benefits we get. So I'm not gonna make too much noise about it and it's pretty easy to fix. So let's give the containing div a class name in both the rules and strategy components. And then let's move the content styling into the _app.scss file, and change the div selector to point to the new class name. And let's just check that things are looking good back in the browser So in this lesson we've seen how easy it is to add child routes. We've made a major architectural change to the application, but only some very minor changes to the actual code itself. This is awesome, throughout the child routes, we used the children property of an existing route which is an array, and we populated this array with the new child routes. We then added a new in the parent route, and added a simple nav complete with router link and router link active directives. Thanks for watching.

Back to the top