1
00:00:00,150 --> 00:00:04,140
In this lecture, we are going to begin registering roots in our app.

2
00:00:04,440 --> 00:00:09,600
The content for the page is registered by a component for every route in our app.

3
00:00:09,750 --> 00:00:12,180
We need to associate it with a component.

4
00:00:12,420 --> 00:00:16,290
As you can imagine, we will be creating a lot of components.

5
00:00:16,560 --> 00:00:19,890
Let's start by registering a route for the home page.

6
00:00:20,530 --> 00:00:23,820
First, we will create a component in the command line.

7
00:00:23,880 --> 00:00:27,090
Run the following command Njie G.

8
00:00:27,120 --> 00:00:28,410
Component Home.

9
00:00:30,850 --> 00:00:35,920
Creating a component for a page is not much different than creating a regular component.

10
00:00:36,270 --> 00:00:39,910
Next, we need to update the template for the home component.

11
00:00:40,150 --> 00:00:45,370
At the moment, we are rendering the content of the home component from the app component.

12
00:00:45,640 --> 00:00:47,710
Let's open the app template file.

13
00:00:50,240 --> 00:00:53,120
There are a total of four sections in this template.

14
00:00:53,360 --> 00:00:57,620
We have the navigation intro main and modal sections.

15
00:00:57,890 --> 00:01:02,030
The navigation and modal sections should remain inside this template.

16
00:01:02,330 --> 00:01:05,600
We want these components to be available on any page.

17
00:01:05,870 --> 00:01:10,010
Otherwise, the user will have to navigate to the home page to log in.

18
00:01:10,700 --> 00:01:14,510
You should always consider which sections of your app should be global.

19
00:01:14,750 --> 00:01:18,920
We don't want to transfer the entire template over to a page component.

20
00:01:19,250 --> 00:01:23,180
Components for pages should focus on the main content of a page.

21
00:01:23,510 --> 00:01:28,460
They shouldn't have to worry about the other page sections, such as a navigation menu.

22
00:01:28,700 --> 00:01:31,280
Let's cut the intro and main sections.

23
00:01:33,730 --> 00:01:36,460
Next, open the home template file.

24
00:01:38,910 --> 00:01:42,990
We will replace the existing template with the code we copied earlier.

25
00:01:45,500 --> 00:01:46,760
Our templates are ready.

26
00:01:46,910 --> 00:01:53,030
We can move on to registering a route Angular does not know which component to render for a specific

27
00:01:53,030 --> 00:01:53,450
route.

28
00:01:53,720 --> 00:01:56,570
We must inform angler of the routes in our app.

29
00:01:57,020 --> 00:02:01,490
The configuration for our router can be found in the app routing module.

30
00:02:03,930 --> 00:02:09,000
We've outsourced the rules into a variable called roots inside this array.

31
00:02:09,120 --> 00:02:13,600
We can add an object for each route before we start adding routes.

32
00:02:13,620 --> 00:02:15,030
We should study the type.

33
00:02:15,330 --> 00:02:20,520
The roots type will enforce a specific structure for each object in the array.

34
00:02:20,880 --> 00:02:27,630
Looking closely at the roots types, our editor will provide more information about the type of value

35
00:02:27,630 --> 00:02:29,160
we can add to this array.

36
00:02:29,760 --> 00:02:33,240
It's expecting an array of objects with the type of roots.

37
00:02:33,540 --> 00:02:35,970
Unfortunately, the info stops there.

38
00:02:36,240 --> 00:02:41,490
If we want to learn more, we should search for the root interface in the documentation.

39
00:02:41,790 --> 00:02:46,380
In the resource section of this lecture, I provide a link to this interface.

40
00:02:48,880 --> 00:02:55,630
Let's read the description together, a configuration object that defines a single route, a set of

41
00:02:55,630 --> 00:03:00,310
routes are collected any routes array to define a route or configuration.

42
00:03:00,670 --> 00:03:07,660
The router attempts to match segments of a given URL against each route using the configuration options

43
00:03:07,660 --> 00:03:09,310
defined in this object.

44
00:03:09,850 --> 00:03:15,850
Below this description, we will come across a list of properties we can add to a route object.

45
00:03:16,120 --> 00:03:19,690
In addition, we are given a description of each property.

46
00:03:20,110 --> 00:03:23,260
There's one important piece of information I want to highlight.

47
00:03:23,530 --> 00:03:28,360
It's not documented, but there is a question mark symbol next to each property name.

48
00:03:28,720 --> 00:03:31,600
This symbol indicates the property is optional.

49
00:03:31,840 --> 00:03:36,640
If you were to quickly scan through all the properties, they would be marked as optional.

50
00:03:37,240 --> 00:03:42,970
This information can be helpful when learning about the various types and interfaces from Anguilla.

51
00:03:43,300 --> 00:03:47,050
We should always check which properties are optional or required.

52
00:03:47,410 --> 00:03:50,050
Let's start adding a route for the home page.

53
00:03:50,290 --> 00:03:51,700
Go back to the editor.

54
00:03:54,180 --> 00:04:01,380
In the roots array, we will add an object the first property will define in this object will be called

55
00:04:01,380 --> 00:04:01,830
path.

56
00:04:04,450 --> 00:04:11,650
The value for the path property must be a path to match against the Earl Angular will extract B path

57
00:04:11,650 --> 00:04:12,730
from the Earl.

58
00:04:13,030 --> 00:04:18,339
After doing so, it will perform a series of matches against our registered roots.

59
00:04:18,610 --> 00:04:22,840
We can configure the path to match against by adding this property.

60
00:04:23,230 --> 00:04:26,110
This route will be associated with the home page.

61
00:04:26,410 --> 00:04:29,290
We're going to set this property to an empty string.

62
00:04:29,890 --> 00:04:34,150
Normally, we would set this property to a forward slash character.

63
00:04:34,480 --> 00:04:40,540
As we've learned in the previous lecture, Angular will prefix our paths with the base path.

64
00:04:40,930 --> 00:04:46,600
Therefore, it's redundant to add the forward slash character at the beginning of our paths.

65
00:04:47,140 --> 00:04:52,030
After adding the path, the next property we will add is called component.

66
00:04:54,590 --> 00:05:01,010
If the path in the browser's you URL matches the path in this object, angular will load a component.

67
00:05:01,340 --> 00:05:05,240
We can specify the component by adding the component property.

68
00:05:05,630 --> 00:05:09,410
The value for this property must be the component object.

69
00:05:09,740 --> 00:05:13,310
Let's import the home components at the top of the file.

70
00:05:15,850 --> 00:05:19,570
Next, we will set this property to the home component.

71
00:05:22,020 --> 00:05:23,220
We're almost finished.

72
00:05:23,430 --> 00:05:29,160
There's one final step for loading the component Angular doesn't know where to load the component.

73
00:05:29,520 --> 00:05:33,030
It does not magically inject the component in the correct location.

74
00:05:33,240 --> 00:05:37,800
We must add a placeholder to configure the location for our route components.

75
00:05:38,340 --> 00:05:44,340
Switch back to the app template file in between the navigation and authentication components.

76
00:05:44,520 --> 00:05:47,160
We will add an element called router outlet.

77
00:05:49,690 --> 00:05:52,600
This element is a directive defined by Angular.

78
00:05:52,810 --> 00:05:55,570
It acts as a placeholder for our components.

79
00:05:55,780 --> 00:06:01,840
Once the router has been initialized, this directive will load the component corresponding to the path.

80
00:06:02,170 --> 00:06:06,760
We don't need to add a series of structural directives to accomplish this task.

81
00:06:07,060 --> 00:06:12,520
The Root or outlet directive is a convenient directive for taking this action off our hands.

82
00:06:12,820 --> 00:06:15,010
Let's refresh the page in the browser.

83
00:06:17,530 --> 00:06:20,230
The implication is rendering without a problem.

84
00:06:20,530 --> 00:06:26,830
We can verify if the router is working by checking the developer tools under the elements panel.

85
00:06:26,950 --> 00:06:29,920
We will find the router outlet directive.

86
00:06:30,250 --> 00:06:33,220
This directive does not get removed from the page.

87
00:06:33,430 --> 00:06:37,850
Instead, it'll remain in the document below this directive.

88
00:06:37,870 --> 00:06:40,120
We will find our home component.

89
00:06:40,360 --> 00:06:46,420
We never added this component to the app template, nor did we export it regardless.

90
00:06:46,570 --> 00:06:51,340
The router was able to render this component based on the path in the URL.

91
00:06:51,850 --> 00:06:55,750
This is the basics of creating a route in the next lecture.

92
00:06:55,840 --> 00:06:59,710
Let's tackle an exercise before learning more about routing.