1 00:00:00,540 --> 00:00:05,040 In this lecture, we are going to do an exercise for registering a route. 2 00:00:05,280 --> 00:00:08,610 It's going to be quick and easy for this exercise. 3 00:00:08,760 --> 00:00:13,330 We are going to register a route for the about page in my browser. 4 00:00:13,350 --> 00:00:16,200 I have an example of what the page should look like. 5 00:00:16,440 --> 00:00:20,040 Since this is an exercise, I want you to try it on your own. 6 00:00:22,630 --> 00:00:24,700 The process will be straightforward. 7 00:00:24,910 --> 00:00:29,770 The first step is to create a component for housing the content for the page. 8 00:00:30,100 --> 00:00:36,490 After creating a component, the template should be updated with the content from the Aboutwhat HTML 9 00:00:36,490 --> 00:00:36,970 file. 10 00:00:37,330 --> 00:00:41,770 We stored a copy of our static templates in a directory called templates. 11 00:00:42,070 --> 00:00:44,530 You can retrieve the template from this file. 12 00:00:44,800 --> 00:00:50,470 Lastly, you should register the component if you're unfamiliar with any of these steps. 13 00:00:50,830 --> 00:00:55,660 I recommend rewatching the previous lecture pass the video and good luck. 14 00:00:57,090 --> 00:00:57,900 Welcome back. 15 00:00:58,080 --> 00:01:02,850 If you were able to successfully create a route for the about page, then congrats. 16 00:01:03,000 --> 00:01:04,890 If not, that's fine as well. 17 00:01:05,099 --> 00:01:07,290 Let's tackle this exercise together. 18 00:01:07,560 --> 00:01:11,550 The first step was to generate a component in the command line. 19 00:01:11,640 --> 00:01:16,650 We will run the following command energy g component about. 20 00:01:19,190 --> 00:01:22,700 After creating the component, we will update the template. 21 00:01:23,030 --> 00:01:27,080 First, let's grab the template from the static HTML file. 22 00:01:27,350 --> 00:01:31,190 We uploaded the static template files to the template directory. 23 00:01:31,490 --> 00:01:34,120 Open the About.com HTML file. 24 00:01:36,610 --> 00:01:39,790 In this file, we have the main content section. 25 00:01:40,060 --> 00:01:43,420 We're going to copy everything from this part of the template. 26 00:01:45,860 --> 00:01:49,100 Afterward, we will open the about template file. 27 00:01:51,510 --> 00:01:54,480 Replace the current template with these static template. 28 00:01:57,010 --> 00:02:00,520 The last step is to register a route to load the component. 29 00:02:00,730 --> 00:02:02,650 Open the app routing module. 30 00:02:05,080 --> 00:02:08,860 At the top of the file, let's import the about component. 31 00:02:11,370 --> 00:02:17,550 Lastly, we will add an object to the roots array to register a new roots in this object. 32 00:02:17,640 --> 00:02:19,290 It'll have two properties. 33 00:02:19,560 --> 00:02:24,360 The first property will be Path, which is the path to match in the URL. 34 00:02:24,630 --> 00:02:27,180 We will set this property to about. 35 00:02:29,760 --> 00:02:36,840 We can exclude the Fords character at the beginning of the path, the base path will be prefixed to 36 00:02:36,840 --> 00:02:37,470 the path. 37 00:02:38,800 --> 00:02:46,390 For example, if our app were hosted on example rt.com, the full path would be example dot com slash 38 00:02:46,390 --> 00:02:46,930 about. 39 00:02:49,540 --> 00:02:52,630 There's another property we will add to this object. 40 00:02:52,870 --> 00:02:56,590 We all set the component property to the about component. 41 00:02:59,100 --> 00:03:02,550 We're finished if you tackled this exercise on your own. 42 00:03:02,760 --> 00:03:05,160 Your solution should look similar to mine. 43 00:03:05,370 --> 00:03:07,620 Let's test the route in the browser. 44 00:03:09,980 --> 00:03:15,940 If we were to access the route path, we would be presented with the correct component, the angular 45 00:03:15,940 --> 00:03:19,750 router was able to decide which component to render on the page. 46 00:03:20,020 --> 00:03:23,740 Let's update the URL to navigate to the About page. 47 00:03:26,210 --> 00:03:30,590 This time, the about component gets rendered as the main content. 48 00:03:30,860 --> 00:03:37,970 We've successfully registered a new route in the next lecture, we're going to learn how to add navigation 49 00:03:37,970 --> 00:03:38,810 to our app.