1
00:00:00,120 --> 00:00:05,760
In this lecture, we are going to learn how to generate a routing module for our video feature.

2
00:00:06,120 --> 00:00:11,550
We will be creating a couple of files related to the creation and management of videos.

3
00:00:11,850 --> 00:00:14,430
These files should be grouped under a module.

4
00:00:14,760 --> 00:00:21,240
It'll be easier to manage our project by dedicating a module for features related to the videos in our

5
00:00:21,240 --> 00:00:21,630
app.

6
00:00:22,200 --> 00:00:24,780
Some of the components will act as pages.

7
00:00:25,050 --> 00:00:29,190
Along with generating a module, we should generate a routing module.

8
00:00:29,490 --> 00:00:33,930
It's perfectly acceptable to have multiple routing modules within an app.

9
00:00:34,260 --> 00:00:38,250
You may prefer multiple routing modules for easier management.

10
00:00:38,550 --> 00:00:39,600
Let's get started.

11
00:00:40,140 --> 00:00:46,410
As you might expect, Angular Seelye has an option for generating modules with an additional routing

12
00:00:46,410 --> 00:00:53,820
module and the command line right the following command Nji G module video routing.

13
00:00:56,330 --> 00:00:59,960
We're adding the routing flag to the generate module command.

14
00:01:00,200 --> 00:01:03,320
This flag will generate an additional module for routing.

15
00:01:03,590 --> 00:01:07,220
It'll automatically get imported into the video module.

16
00:01:07,460 --> 00:01:10,280
Let's run the command after a few moments.

17
00:01:10,430 --> 00:01:12,500
Two files should have been generated.

18
00:01:12,830 --> 00:01:15,050
Open both files in your editor.

19
00:01:17,620 --> 00:01:20,410
The first mile is a regular module file.

20
00:01:20,620 --> 00:01:23,170
There's nothing special to mention about this file.

21
00:01:23,470 --> 00:01:26,860
It's a regular module we've encountered numerous times.

22
00:01:27,160 --> 00:01:30,640
This module imports the video router module.

23
00:01:30,880 --> 00:01:33,800
Let's check it out inside this file.

24
00:01:33,820 --> 00:01:37,120
We have the same setup as the last routing module.

25
00:01:37,360 --> 00:01:39,370
We have an array called roots.

26
00:01:39,640 --> 00:01:42,220
We can define routes inside this array.

27
00:01:42,610 --> 00:01:46,390
The biggest difference from before is how the module is imported.

28
00:01:46,690 --> 00:01:53,500
If you look closely at the imports option, the routing module is imported with the for child function.

29
00:01:53,830 --> 00:01:56,800
It's completely different from the four root function.

30
00:01:59,350 --> 00:02:02,770
We have two functions for registering roots with our app.

31
00:02:03,100 --> 00:02:06,460
They're the four root and four child functions.

32
00:02:06,880 --> 00:02:10,630
The four root function will register a service called router.

33
00:02:10,960 --> 00:02:14,830
We will get an opportunity to use this service in a future lecture.

34
00:02:15,130 --> 00:02:18,370
It's a service for interacting with the router in our app.

35
00:02:19,000 --> 00:02:22,360
The four child function does not register this service.

36
00:02:22,600 --> 00:02:26,740
There isn't a point in registering the service if it's already been registered.

37
00:02:27,130 --> 00:02:33,460
Angular introduces another function for registering roots without having to create a new instance of

38
00:02:33,460 --> 00:02:34,660
the router object.

39
00:02:37,190 --> 00:02:42,980
In most cases, you should only call the four root function once for other routes.

40
00:02:43,130 --> 00:02:45,350
You can use the for child function.

41
00:02:45,680 --> 00:02:49,910
Let's register the video module inside the app module.

42
00:02:52,410 --> 00:02:55,650
At the top of the file import, the video module.

43
00:02:58,040 --> 00:03:01,300
Next, and this module to the imports array.

44
00:03:03,810 --> 00:03:09,720
We don't need to import the video routing module, it's already imported from the video module.

45
00:03:09,930 --> 00:03:14,670
Therefore, we will have access to the roots generated by this module.

46
00:03:14,940 --> 00:03:18,240
Let's register a new route for the Manage page.

47
00:03:18,540 --> 00:03:24,750
At the moment, the Manage link in the navigation menu will redirect the user to the home page.

48
00:03:25,020 --> 00:03:28,140
We haven't properly created a manage page.

49
00:03:28,410 --> 00:03:31,050
Let's fix that in the command line.

50
00:03:31,170 --> 00:03:34,920
We will generate a component for rendering the page content.

51
00:03:35,430 --> 00:03:41,220
Run the following command Kng G component video slash manage.

52
00:03:43,700 --> 00:03:50,450
Next, let's update the template, we can find the template for the component under the managed HTML

53
00:03:50,450 --> 00:03:52,550
file in the templates directory.

54
00:03:55,130 --> 00:03:58,130
There are three sections we are going to copy over.

55
00:03:58,340 --> 00:04:05,270
You can find them by searching for comments that say, top bar users video section and edit model.

56
00:04:07,750 --> 00:04:10,330
Copy the selections into your clipboard.

57
00:04:12,820 --> 00:04:16,480
Next, open the manage component template file.

58
00:04:18,860 --> 00:04:22,910
Lastly, replace the template with the contents from your clipboard.

59
00:04:25,440 --> 00:04:31,950
The next step is to register a route for the component, switch back to the video routing module at

60
00:04:31,950 --> 00:04:33,130
the top of the file.

61
00:04:33,150 --> 00:04:35,400
We will import the manage component.

62
00:04:37,940 --> 00:04:44,360
Afterward, we will add an object to the roots array, the path for this component will be manage.

63
00:04:46,810 --> 00:04:50,500
The component property will be set to the manage component.

64
00:04:52,900 --> 00:04:59,530
We're almost finished the final step is to update the link in the navigation component to properly link

65
00:04:59,530 --> 00:05:03,040
to this page, open the navigation template file.

66
00:05:05,470 --> 00:05:08,380
Search for the manage link we had in the template.

67
00:05:08,620 --> 00:05:14,260
We are going to update the Router Link directive to redirect the user to the managed page.

68
00:05:16,710 --> 00:05:18,240
Finally, we're finished.

69
00:05:18,480 --> 00:05:24,270
It was a lot to go through, but it should demonstrate the video routing module can register new routes

70
00:05:24,270 --> 00:05:25,080
for our app.

71
00:05:25,380 --> 00:05:27,440
Let's test the app in the browser.

72
00:05:30,030 --> 00:05:36,030
The Manage Link should appear in the navigation and you if you're logged in, we can click on this link

73
00:05:36,030 --> 00:05:38,040
to be taken to the Manage page.

74
00:05:38,250 --> 00:05:38,880
Perfect.

75
00:05:39,090 --> 00:05:45,660
We've successfully created a separate routing module for a different feature in our app and either gives

76
00:05:45,660 --> 00:05:52,290
us separation of concerns by allowing us to structure our routes in different modules in the following

77
00:05:52,290 --> 00:05:52,900
lecture.

78
00:05:52,980 --> 00:05:55,320
We will start securing our routes.