1 00:00:00,240 --> 00:00:04,740 In this lecture, we are going to learn a couple more things about query parameters. 2 00:00:04,950 --> 00:00:09,990 At the moment, we are updating the query parameter whenever the user selects an option. 3 00:00:10,290 --> 00:00:14,820 We're able to update the query parameter with the navigate by URL function. 4 00:00:15,180 --> 00:00:16,590 This solution works great. 5 00:00:16,920 --> 00:00:22,560 However, there are other solutions at our disposal for adding query parameters to a URL. 6 00:00:22,920 --> 00:00:25,770 Let's explore those options in your editor. 7 00:00:25,800 --> 00:00:28,290 Open the Manage Component Class file. 8 00:00:30,720 --> 00:00:36,780 Inside the SALT method, we are going to replace the navigate by URL function with a function called 9 00:00:36,780 --> 00:00:37,530 Navigate. 10 00:00:40,000 --> 00:00:44,170 Angular defines two methods for performing navigation programmatically. 11 00:00:44,470 --> 00:00:47,830 They navigate by URL function is the simpler of the two. 12 00:00:48,340 --> 00:00:55,300 It accepts a string as the path to redirect the user to the navigate function is more complex but powerful, 13 00:00:55,570 --> 00:00:58,780 and allows us to customize the behavior of the router. 14 00:00:59,080 --> 00:01:04,510 Unlike the URL function, the first argument of this function is an array of paths. 15 00:01:07,010 --> 00:01:10,280 We can construct a path by passing in each segment. 16 00:01:10,610 --> 00:01:16,970 For example, let's say we want to navigate the user to the clip, slash a path we can pass in these 17 00:01:16,970 --> 00:01:18,620 segments as strings. 18 00:01:21,170 --> 00:01:24,230 The URL will be constructed based on these values. 19 00:01:24,440 --> 00:01:26,780 By default, the path is absolute. 20 00:01:27,140 --> 00:01:33,200 We can override this behavior by passing in an object as the second argument to the navigate function. 21 00:01:35,780 --> 00:01:41,870 The object can't contain configuration settings for the router in the resource section of this lecture, 22 00:01:42,050 --> 00:01:44,360 I provide a link to the navigate function. 23 00:01:46,910 --> 00:01:53,600 Under the list of parameters, the second argument is referred to as extras in the second column of 24 00:01:53,600 --> 00:01:54,290 this table. 25 00:01:54,410 --> 00:01:57,470 We will find the type annotation for this argument. 26 00:01:57,770 --> 00:02:02,120 We can click on this annotation to learn more about the structure of this object. 27 00:02:02,390 --> 00:02:09,380 According to the documentation, it says the following options that modify the route or navigation strategy 28 00:02:09,620 --> 00:02:15,860 supply an object containing any of these properties to a route or navigation function to control how 29 00:02:15,860 --> 00:02:21,770 the target URL should be constructed or interpreted as far as helpful information goes. 30 00:02:21,980 --> 00:02:25,610 This page doesn't provide more info in these cases. 31 00:02:25,790 --> 00:02:28,430 I always recommend checking out the code snippet. 32 00:02:28,730 --> 00:02:31,790 Looking closely, we will find a pair of comments. 33 00:02:32,060 --> 00:02:35,780 These comments will tell us where these properties are inherited from. 34 00:02:36,170 --> 00:02:41,300 It's likely that documentation for these properties can be found from these interfaces. 35 00:02:41,900 --> 00:02:46,880 We're interested in learning about the relative to property, according to the comments. 36 00:02:47,120 --> 00:02:51,840 It'll tell us this property comes from the URL create options interface. 37 00:02:52,010 --> 00:02:53,030 Let's click on it. 38 00:02:55,610 --> 00:03:01,520 On this page, if we scroll down to the properties section, we will find the documentation for this 39 00:03:01,520 --> 00:03:02,120 property. 40 00:03:02,480 --> 00:03:02,930 Great. 41 00:03:03,230 --> 00:03:06,590 It's always good to learn how to navigate the documentation. 42 00:03:06,920 --> 00:03:09,650 Angular is exceptionally well documented. 43 00:03:09,980 --> 00:03:15,740 You can discover documentation for everything if you know how to search through the documentation. 44 00:03:16,340 --> 00:03:22,550 The property we're looking at will allow us to change the path from an absolute path to a relative path. 45 00:03:22,910 --> 00:03:27,860 The type of value it's expecting is an instance of the activated route function. 46 00:03:28,250 --> 00:03:29,480 It just so happens. 47 00:03:29,480 --> 00:03:32,270 We have an instance of this class and our components. 48 00:03:32,600 --> 00:03:34,280 Let's go back to our ED. 49 00:03:36,780 --> 00:03:41,680 Inside the configuration object, we all add the relative to property. 50 00:03:42,000 --> 00:03:45,330 Its value will be the this root object. 51 00:03:47,830 --> 00:03:51,670 We injected the activated route service into our component. 52 00:03:51,910 --> 00:03:58,570 We assigned it under the alias of roots by adding this property, angular will apply the path relative 53 00:03:58,570 --> 00:03:59,440 to this roots. 54 00:03:59,740 --> 00:04:03,310 It'll be able to extract the current route from this instance. 55 00:04:03,730 --> 00:04:08,170 Let's empty out the array in the first argument of the navigate function. 56 00:04:10,650 --> 00:04:16,740 We're not interested in redirecting the user to a different page, instead, we want to apply some query 57 00:04:16,740 --> 00:04:17,550 parameters. 58 00:04:18,029 --> 00:04:24,660 We can add a query parameter by adding the query params property to the configuration object. 59 00:04:27,060 --> 00:04:33,720 This property will be an object of query parameter if you'd like to set query parameters, use a key 60 00:04:33,720 --> 00:04:40,140 value system, the properties name will be the key for the query and the property's value will be the 61 00:04:40,140 --> 00:04:41,220 queries value. 62 00:04:41,490 --> 00:04:46,860 The router will take care of converting this from an object to a stream after conversion. 63 00:04:47,040 --> 00:04:49,380 The string will be appended to the URL. 64 00:04:49,620 --> 00:04:52,190 Let's try testing our app in the browser. 65 00:04:54,710 --> 00:04:57,080 We can toggle the value in the drop down. 66 00:04:57,230 --> 00:05:01,340 The result is the same query parameters are added to the path. 67 00:05:01,670 --> 00:05:04,070 There's one more option I want to explore. 68 00:05:04,370 --> 00:05:08,180 Query parameters can be added to the Router Link Directive. 69 00:05:08,450 --> 00:05:11,780 We may want to configure the query parameter from the beginning. 70 00:05:12,080 --> 00:05:15,890 Back in the editor, open the navigation template file. 71 00:05:18,360 --> 00:05:20,760 Search for the link to the Manage page. 72 00:05:21,000 --> 00:05:24,540 We are going to bind a property called query params. 73 00:05:27,010 --> 00:05:33,520 The query params property is a part of the router linked directive, we can add query parameters through 74 00:05:33,520 --> 00:05:34,450 this property. 75 00:05:34,810 --> 00:05:42,130 The value for this property must be an object like before we will add the sort parameter with the value 76 00:05:42,130 --> 00:05:42,760 of one. 77 00:05:45,470 --> 00:05:51,650 The router linked DirecTV will convert the object to a string and appending the query to the URL. 78 00:05:52,010 --> 00:05:54,200 Let's refresh the page in the browser. 79 00:05:56,890 --> 00:06:03,850 We can navigate to different pages to check if the query parameter gets added, as you can see whenever 80 00:06:03,850 --> 00:06:08,710 we're on a page other than the Manage page, the query parameter goes away. 81 00:06:09,040 --> 00:06:12,760 The moment we click on the Manage link, the query appears. 82 00:06:13,060 --> 00:06:15,580 It's the exact behavior we were looking for. 83 00:06:15,880 --> 00:06:20,560 Angular gives us a lot of flexibility and freedom for working with paths. 84 00:06:22,390 --> 00:06:27,340 We previously learned about path parameters for storing values in the URL. 85 00:06:27,700 --> 00:06:34,240 It was helpful to use path parameters because we were able to create a dynamic route for various clips. 86 00:06:34,600 --> 00:06:39,970 We could have used path parameters to implement this solution, but it's not exactly ideal. 87 00:06:40,270 --> 00:06:41,650 Let me explain further. 88 00:06:42,130 --> 00:06:46,450 We have two options for storing dynamic values in our URLs. 89 00:06:46,750 --> 00:06:49,390 The first is by using query parameters. 90 00:06:49,690 --> 00:06:54,520 I'm showing a very simplified example of what a clip URL would look like. 91 00:06:54,850 --> 00:06:58,540 We're going to use the ID to generate a unique URL. 92 00:06:58,930 --> 00:07:03,070 Storing the value in a query parameter is one way to go about it. 93 00:07:03,610 --> 00:07:10,510 And the second example I'm using a path parameter rather than storing the ID in a query parameter. 94 00:07:10,570 --> 00:07:17,380 We could store the ID in a path segment that's completely possible because the angular router supports 95 00:07:17,380 --> 00:07:18,460 dynamic paths. 96 00:07:18,850 --> 00:07:21,130 It's a common feature in most routers. 97 00:07:21,430 --> 00:07:25,270 In addition, it looks cleaner compared to query parameters. 98 00:07:25,750 --> 00:07:31,870 The question is why is using path parameters a more viable option than query parameters? 99 00:07:32,170 --> 00:07:36,700 Technically, either solution works angular won't throw an error. 100 00:07:37,060 --> 00:07:42,790 Search engines won't have a problem with indexing our site if we use query parameters. 101 00:07:43,300 --> 00:07:47,020 It's not so much about errors, but what is considered good practice. 102 00:07:47,230 --> 00:07:54,820 The general rule of thumb is this path parameters are used to retrieve a single or multiple resources 103 00:07:55,210 --> 00:07:55,600 query. 104 00:07:55,600 --> 00:08:01,690 Parameters are used to filter or sort through data and resources for sorting clips. 105 00:08:01,930 --> 00:08:08,710 Using query parameters made sense because we were sorting the clips on the page for a single clip. 106 00:08:08,980 --> 00:08:15,490 Using a path parameter would make sense because we're retrieving a single resource by following this 107 00:08:15,490 --> 00:08:16,150 practice. 108 00:08:16,390 --> 00:08:19,450 You can achieve a more organized route structure. 109 00:08:19,810 --> 00:08:22,690 It's a pattern you'll see in most applications. 110 00:08:23,260 --> 00:08:27,280 Not every company uses this pattern for one reason or another. 111 00:08:27,640 --> 00:08:33,309 Older apps may have adopted a different pattern because the pattern I mentioned is still relatively 112 00:08:33,309 --> 00:08:33,669 new. 113 00:08:34,090 --> 00:08:37,210 Determining which to use will come with experience. 114 00:08:37,539 --> 00:08:38,620 We'll leave it here. 115 00:08:38,830 --> 00:08:41,559 We'll continue our work in the next lecture.