1 00:00:00,150 --> 00:00:04,140 In this lecture, we are going to add another route as an exercise. 2 00:00:04,470 --> 00:00:08,610 The new route should have some data attached to it in my browser. 3 00:00:08,670 --> 00:00:11,760 I have opened the static template for the upload page. 4 00:00:12,090 --> 00:00:17,720 This page should be accessible to authenticated users only as an exercise. 5 00:00:17,730 --> 00:00:20,550 I want you to create a component for this page. 6 00:00:20,700 --> 00:00:25,470 Update the templates and register a route during the route registration. 7 00:00:25,650 --> 00:00:28,650 Add the same data we added to the Manage page. 8 00:00:29,190 --> 00:00:32,159 We don't have to repeat the same logic for logging out. 9 00:00:32,400 --> 00:00:35,220 The logic we've written should work for any routes. 10 00:00:35,880 --> 00:00:40,170 One more thing the Manage page has a link for uploading files. 11 00:00:40,380 --> 00:00:42,390 This link should point to the new route. 12 00:00:42,660 --> 00:00:44,550 Pause the video and good luck. 13 00:00:46,080 --> 00:00:46,890 Welcome back. 14 00:00:47,100 --> 00:00:51,150 If you are able to create a route for the upload page, congrats. 15 00:00:51,360 --> 00:00:53,160 If not, that's fine as well. 16 00:00:53,400 --> 00:00:55,680 Let's tackle the implementation together. 17 00:00:55,980 --> 00:01:00,120 The first step is to create a component in the command line. 18 00:01:00,150 --> 00:01:06,000 Run the following command energy g component video slash upload. 19 00:01:08,560 --> 00:01:13,720 The component is being created under the video module before we register the route. 20 00:01:13,840 --> 00:01:19,720 Let's update the template openly upload HTML from the templates directory. 21 00:01:22,220 --> 00:01:26,690 Inside this template, search for the comment that says main content. 22 00:01:29,130 --> 00:01:35,820 We're going to copy the entire section tag next, open the upload template file for the component we 23 00:01:35,820 --> 00:01:36,510 generated. 24 00:01:39,020 --> 00:01:42,770 Replace the existing template with the template we copied earlier. 25 00:01:45,280 --> 00:01:49,600 Next, we can register the route inside the video routing module. 26 00:01:49,870 --> 00:01:51,820 Open this file in your editor. 27 00:01:54,420 --> 00:01:58,050 At the top of this file, import, the upload component. 28 00:02:00,610 --> 00:02:06,610 Afterward, add an object to the roots array, the path property will be set to upload. 29 00:02:09,199 --> 00:02:12,710 The component property will be set to the upload component. 30 00:02:15,290 --> 00:02:20,240 Lastly, we want to redirect users if they log out while they're on this page. 31 00:02:20,540 --> 00:02:22,400 We will add the data property. 32 00:02:22,670 --> 00:02:28,140 The data property will be an object associated with the roots inside the object. 33 00:02:28,190 --> 00:02:32,300 We will add the off only property with the value of true. 34 00:02:35,030 --> 00:02:37,190 The name of the property is essential. 35 00:02:37,400 --> 00:02:41,000 It's the name that will be checked by our authentication service. 36 00:02:41,240 --> 00:02:45,500 There's one final step we need to update the links in our components. 37 00:02:45,710 --> 00:02:50,690 We will start the navigation component, open the navigation template file. 38 00:02:53,200 --> 00:02:59,170 You can find the link for the upload page directly under the Manage link on the anchor element. 39 00:02:59,230 --> 00:03:03,460 We will replace the sheriff attribute with the router linked directive. 40 00:03:03,760 --> 00:03:06,790 We will set the URL to slash upload. 41 00:03:09,450 --> 00:03:12,270 Navigation links in the header should be highlighted. 42 00:03:12,510 --> 00:03:19,290 We should attach a class if the link is active, let's grab a copy of the router link active property 43 00:03:19,290 --> 00:03:20,520 from the other links. 44 00:03:20,820 --> 00:03:22,350 You will add it to this link. 45 00:03:26,280 --> 00:03:31,200 We should update be manage component to open the manage template file. 46 00:03:33,690 --> 00:03:37,530 You can find the link inside the first pair of section tags. 47 00:03:37,800 --> 00:03:43,830 It'll have a comment above it that says top bar, the anchor element does not need to be active. 48 00:03:44,100 --> 00:03:48,090 The user won't be able to see this link if they're not on this page. 49 00:03:48,420 --> 00:03:50,760 We can jump to directly adding the link. 50 00:03:51,060 --> 00:03:55,410 Let's replace the RF attribute with the Router Link directive. 51 00:03:55,770 --> 00:03:58,830 The URL will point to slash upload. 52 00:04:01,430 --> 00:04:03,770 Let's give our app a test in the browser. 53 00:04:05,140 --> 00:04:07,300 You shouldn't be logged into the application. 54 00:04:07,630 --> 00:04:11,800 Otherwise, you may not be able to view the links for the upload page. 55 00:04:12,100 --> 00:04:17,529 We should be able to navigate to this page from the navigation menu or manage page. 56 00:04:17,800 --> 00:04:19,120 Either link should work. 57 00:04:19,450 --> 00:04:24,940 We should test if the router redirects the user if they're on the upload page while logging out. 58 00:04:27,500 --> 00:04:28,130 Perfect. 59 00:04:28,340 --> 00:04:30,560 We've got a functioning upload component. 60 00:04:30,830 --> 00:04:35,270 Let's continue working on the other pages of our app in the next lecture.