1 00:00:00,150 --> 00:00:06,060 In this lecture, we are going to take advantage of angular root parameters feature for generating a 2 00:00:06,090 --> 00:00:07,140 dynamic page. 3 00:00:07,440 --> 00:00:12,600 Currently, I have these static template for the video page opened in my browser. 4 00:00:12,870 --> 00:00:16,230 We want users to be able to share clips with their friends. 5 00:00:16,560 --> 00:00:19,680 We should assign a unique URL for each video. 6 00:00:20,220 --> 00:00:24,660 There's just one problem we don't want to register a route for every video. 7 00:00:24,900 --> 00:00:27,570 It's not a scalable or efficient solution. 8 00:00:27,840 --> 00:00:30,000 If our app had millions of clips. 9 00:00:30,150 --> 00:00:34,500 We would have millions of routes instead of generating numerous routes. 10 00:00:34,650 --> 00:00:37,800 We can generate one route to handle all clips. 11 00:00:38,070 --> 00:00:40,560 Paths can have dynamic segments. 12 00:00:41,130 --> 00:00:44,460 Wikipedia is a good example of dynamic segments. 13 00:00:44,700 --> 00:00:50,370 In another tab, I have the Wikipedia page for pizza opened in the URL. 14 00:00:50,490 --> 00:00:53,580 We can change the word pizza to hamburger. 15 00:00:56,000 --> 00:00:59,990 This simple modification will render an entirely different page. 16 00:01:00,110 --> 00:01:04,730 Wikipedia is not generating unique rules for its countless articles. 17 00:01:05,010 --> 00:01:10,580 Instead, they have one route to handle all pages before it delivers a page. 18 00:01:10,770 --> 00:01:15,980 It'll grab the dynamic portion of the URL to determine which content to render. 19 00:01:16,340 --> 00:01:19,130 We can implement similar behavior in our app. 20 00:01:19,520 --> 00:01:23,540 Angular supports dynamic segments called route parameters. 21 00:01:24,050 --> 00:01:28,160 We are going to create a route for videos with a route parameter. 22 00:01:28,520 --> 00:01:32,690 We will be able to render a video based on the parameter in the URL. 23 00:01:33,050 --> 00:01:40,340 We haven't worked on uploading videos, so we will output the route parameter in the template as a temporary 24 00:01:40,340 --> 00:01:41,180 placeholder. 25 00:01:41,450 --> 00:01:43,130 Let's open the command line. 26 00:01:45,700 --> 00:01:52,270 First, we are going to generate a component to house the content for the video page inside the command 27 00:01:52,270 --> 00:01:52,720 line. 28 00:01:52,870 --> 00:01:55,960 Run the following command Angie G. 29 00:01:55,990 --> 00:01:57,070 Component clip. 30 00:01:59,640 --> 00:02:05,280 You'll notice that we're not generating the component under the video module, watching clips will be 31 00:02:05,280 --> 00:02:07,860 a common action most users will perform. 32 00:02:08,100 --> 00:02:11,790 However, most users will probably not upload a clip. 33 00:02:12,360 --> 00:02:16,740 The action of managing and uploading videos will be a separate module. 34 00:02:16,980 --> 00:02:19,200 Let's grab the template for this component. 35 00:02:19,470 --> 00:02:23,550 Open the video HTML file in the Templates directory. 36 00:02:26,130 --> 00:02:32,250 Inside this template, we have two sections with the comments, main content and more clips. 37 00:02:32,580 --> 00:02:34,680 We are going to copy both sections. 38 00:02:37,210 --> 00:02:39,910 Next, open the clip template file. 39 00:02:42,450 --> 00:02:46,140 Replace the existing template with the template we copied earlier. 40 00:02:48,630 --> 00:02:51,900 Our component is ready, let's register a route. 41 00:02:52,200 --> 00:02:54,750 Open the app routing module file. 42 00:02:57,240 --> 00:03:00,810 At the top of the file, we will import the clip component. 43 00:03:03,280 --> 00:03:08,120 Next, we will add an object to the roots array inside this object. 44 00:03:08,140 --> 00:03:14,080 We will set the Path property to the following value clip slash colon ID. 45 00:03:20,430 --> 00:03:23,490 Pay close attention to the second segment in the past. 46 00:03:23,820 --> 00:03:27,570 We are pre fixing the name of the segment with a colon character. 47 00:03:28,020 --> 00:03:30,930 Angular will interpret this as a root parameter. 48 00:03:31,260 --> 00:03:34,440 A root parameter is a placeholder for any value. 49 00:03:34,740 --> 00:03:38,880 After the colon character, we need to give our root parameter a name. 50 00:03:39,270 --> 00:03:43,770 We will be able to reference the parameter by this name and this example. 51 00:03:43,770 --> 00:03:49,920 This portion of the URL should hold the ID of the clip before we proceed further. 52 00:03:50,010 --> 00:03:54,690 We should test if the Root is working in the browser, refresh the page. 53 00:03:57,090 --> 00:03:59,940 We haven't created a URL for this page. 54 00:04:00,060 --> 00:04:01,860 We will in a future lecture. 55 00:04:02,130 --> 00:04:06,840 For now, let's manually navigate to the page in the address bar. 56 00:04:06,930 --> 00:04:10,650 We will access the clip path with a random number. 57 00:04:13,280 --> 00:04:19,820 The page renders like any other page, unlike other routes, we have complete freedom over the value 58 00:04:19,820 --> 00:04:20,570 in the path. 59 00:04:20,930 --> 00:04:23,720 We can change this path to a different number. 60 00:04:24,050 --> 00:04:26,300 We can even use random characters. 61 00:04:26,540 --> 00:04:28,910 We're not restricted to a type of value. 62 00:04:29,210 --> 00:04:31,020 The same page gets rendered. 63 00:04:31,700 --> 00:04:32,150 Great. 64 00:04:32,480 --> 00:04:35,750 Let's learn how to retrieve the value from the URL. 65 00:04:36,080 --> 00:04:39,440 It's an encoded value we can retrieve in our components. 66 00:04:39,770 --> 00:04:43,610 Back on the ED Open the clip component class file. 67 00:04:46,260 --> 00:04:50,490 At the top of the file, we will import the activated route class. 68 00:04:52,770 --> 00:04:58,620 We've encountered this class before, it's going to give us information related to the current routes. 69 00:04:58,890 --> 00:05:05,400 Unlike before, we won't encounter as many issues, the clip component is managed by the Router Outlet 70 00:05:05,400 --> 00:05:06,090 Directive. 71 00:05:06,450 --> 00:05:10,170 The activated route service will be more cooperative than before. 72 00:05:10,410 --> 00:05:13,590 Let's inject this class into the constructor function. 73 00:05:16,030 --> 00:05:23,230 The goal is to retrieve the I.D., we should store the ID in our component above the constructor function. 74 00:05:23,290 --> 00:05:28,330 We will add a property called I.D. with an initial value of an empty string. 75 00:05:31,180 --> 00:05:39,150 Next, inside the Nji on in it function, we will update the ID property to the following value this 76 00:05:39,240 --> 00:05:41,300 micro snapshot. 77 00:05:41,320 --> 00:05:43,270 Dot params dot ID. 78 00:05:46,220 --> 00:05:52,580 We can grab information about the current route through the snapshot object inside this object. 79 00:05:52,760 --> 00:05:57,110 The parameters are conveniently stored in an object called params. 80 00:05:57,380 --> 00:06:02,270 As you might suspect, we can have multiple route parameters in a single path. 81 00:06:02,630 --> 00:06:05,180 We can reference any parameter by its name. 82 00:06:05,570 --> 00:06:12,080 If we did everything right, we should be able to output the ID in the template switch over to the eclipse 83 00:06:12,080 --> 00:06:12,710 templates. 84 00:06:13,280 --> 00:06:16,310 We will output the ID in the title of the page. 85 00:06:16,490 --> 00:06:22,490 You can find the title under the comment that says title and uploader and the H1 tag. 86 00:06:22,670 --> 00:06:25,730 We will replace these static text with an expression. 87 00:06:26,150 --> 00:06:29,000 The expression will output the ID property. 88 00:06:31,550 --> 00:06:33,110 Let's refresh the page. 89 00:06:35,550 --> 00:06:41,280 The IED gets out, put it onto the template, accessing the ID is relatively simple. 90 00:06:41,550 --> 00:06:47,820 We can inject a service defined by the route or to grab data related to the current routes in the next 91 00:06:47,820 --> 00:06:48,390 lecture. 92 00:06:48,480 --> 00:06:52,260 We will look at one common gotcha with route parameters.