1 00:00:00,120 --> 00:00:05,910 In this lecture, we are going to explore the default configuration of the router during the creation 2 00:00:05,910 --> 00:00:07,710 process of our new project. 3 00:00:07,800 --> 00:00:12,660 We selected the routing option, the SEELYE installed the router package. 4 00:00:12,870 --> 00:00:16,530 In addition, this package has been configured in our project. 5 00:00:16,770 --> 00:00:21,120 We've been ignoring the configuration throughout the development lifecycle of our app. 6 00:00:21,360 --> 00:00:26,130 It's time to look at the files generated by this package to get started. 7 00:00:26,340 --> 00:00:31,470 We are going to look at the indexed HTML file inside these source directory. 8 00:00:33,950 --> 00:00:40,910 Inside the head section of the document, there's a new tag called Base, the base tag has one attribute 9 00:00:40,910 --> 00:00:41,960 called R&F. 10 00:00:42,260 --> 00:00:47,270 The value of this attribute will be the base path of our app during navigation. 11 00:00:47,420 --> 00:00:51,590 The base path will be prefixed to every path by default. 12 00:00:51,800 --> 00:00:54,590 The base path is set to the route of the domain. 13 00:00:54,980 --> 00:00:59,510 Let's modify the base path to learn how it affects the URLs in our app. 14 00:00:59,840 --> 00:01:02,570 We will set the attributes value to test. 15 00:01:05,080 --> 00:01:06,660 Switch over to the browser. 16 00:01:09,060 --> 00:01:15,900 In the address bar, the URL has been updated to include the base path, regardless of where we navigate 17 00:01:16,050 --> 00:01:18,720 angular will always prefix the base path. 18 00:01:19,020 --> 00:01:23,430 If we were to attempt to remove the base path, angular would add it back in. 19 00:01:25,690 --> 00:01:31,810 Configuring the base path can be useful if you want to isolate the app to a specific path for this course. 20 00:01:31,900 --> 00:01:37,870 We don't need to configure the base path back in the ED. We are going to revert the base path to the 21 00:01:37,870 --> 00:01:38,950 original value. 22 00:01:41,380 --> 00:01:47,440 We can leave the base path, as is, let's explore the routing module inside the app directory. 23 00:01:47,560 --> 00:01:49,420 Open the app routing module. 24 00:01:52,040 --> 00:01:58,310 This module shouldn't be confused with the app module routing must be configured from within a module 25 00:01:58,580 --> 00:02:01,340 as you'll soon learn routing can get messy. 26 00:02:01,580 --> 00:02:05,810 It's common practice to create a separate module for configuring the router. 27 00:02:06,080 --> 00:02:09,830 Not necessary, but recommended to keep our code base clean. 28 00:02:10,520 --> 00:02:14,300 Another practice is to add D-word routing to the file name. 29 00:02:14,660 --> 00:02:20,780 This naming convention helps other developers identify modules with configuration settings for routing. 30 00:02:21,080 --> 00:02:25,370 Once again, not necessary, but recommended for this course. 31 00:02:25,460 --> 00:02:27,590 We will be following these practices. 32 00:02:27,830 --> 00:02:32,420 They are standard in most angular apps inside this file. 33 00:02:32,510 --> 00:02:33,830 There's not much going on. 34 00:02:34,070 --> 00:02:39,870 We are declaring a module with the nji module decorator at the top of the file. 35 00:02:39,890 --> 00:02:44,750 We are importing the router module from the angular slash router package. 36 00:02:45,050 --> 00:02:51,500 This module will import services, components and directives for adding routing capabilities to an app. 37 00:02:51,830 --> 00:02:58,040 We must import this module if we want to start using its features below the import statement. 38 00:02:58,160 --> 00:03:00,530 We are creating an array called roots. 39 00:03:00,830 --> 00:03:07,040 This array will contain a list of objects with configuration settings for each root, a root prefers 40 00:03:07,040 --> 00:03:08,570 a path in our application. 41 00:03:08,840 --> 00:03:12,950 In subsequent lectures, we will explore these settings for a root. 42 00:03:13,520 --> 00:03:17,060 The roots array is being annotated with the roots type. 43 00:03:17,420 --> 00:03:20,900 This type is exported by the angular router package. 44 00:03:21,110 --> 00:03:24,560 It's a convenient type for adding type checking to our array. 45 00:03:25,160 --> 00:03:29,780 Lastly, the router module is imported into the app router module. 46 00:03:30,080 --> 00:03:35,870 The router will not become aware of our roots unless we pass them in as an argument to the four root 47 00:03:35,870 --> 00:03:36,410 function. 48 00:03:36,740 --> 00:03:43,070 It's the most important step in this entire process by passing them into the four root function. 49 00:03:43,220 --> 00:03:45,200 We are registering our roots. 50 00:03:45,770 --> 00:03:49,070 The router module is being exported by our module. 51 00:03:49,250 --> 00:03:54,380 Keep in mind, this module is meant to act as a configuration file for our router. 52 00:03:54,710 --> 00:03:59,240 We can export the configuration file by exporting the router module. 53 00:03:59,540 --> 00:04:01,760 Let's open the app module file. 54 00:04:04,300 --> 00:04:08,170 Inside this file, we are importing the app router module. 55 00:04:10,620 --> 00:04:13,950 Next, the module is added to the imports array. 56 00:04:16,529 --> 00:04:20,700 This is the minimum configuration for adding the router to our project. 57 00:04:20,910 --> 00:04:25,950 We can begin to add roots to our project before we jump in to the next lecture. 58 00:04:26,100 --> 00:04:29,250 There's one important point I want to make about the router. 59 00:04:29,550 --> 00:04:32,760 The router will handle paths for pages in our app. 60 00:04:33,090 --> 00:04:36,660 It does not handle adding routes for static asset files. 61 00:04:36,930 --> 00:04:38,520 Let's go back to the browser. 62 00:04:41,060 --> 00:04:44,450 Every file in our app is imported through JavaScript. 63 00:04:44,690 --> 00:04:45,750 There's one exception. 64 00:04:45,980 --> 00:04:52,910 The video on the home page, this file is loaded on the page through the video tag in the elements panel 65 00:04:52,910 --> 00:04:54,290 of the developer tools. 66 00:04:54,380 --> 00:04:56,060 Let's look for this element. 67 00:05:00,280 --> 00:05:03,910 Inside this element, we are adding the source to the file. 68 00:05:04,210 --> 00:05:07,810 We can right click on the file to open the file in another tab. 69 00:05:10,410 --> 00:05:12,810 We didn't add a route for this file. 70 00:05:13,050 --> 00:05:18,030 The route was generated by the development server for static asset files. 71 00:05:18,060 --> 00:05:21,180 We will let the server handle delivering these files. 72 00:05:21,510 --> 00:05:27,840 During our discussion of routing, we are going to focus on adding routes for pages, not static asset 73 00:05:27,840 --> 00:05:28,440 files. 74 00:05:28,770 --> 00:05:34,050 I'm mentioning this to make a distinction between static asset files and web pages. 75 00:05:34,440 --> 00:05:39,060 Most servers are capable of defining routes for static asset files. 76 00:05:39,330 --> 00:05:43,860 We can focus on the pages for our app in the next lecture. 77 00:05:44,010 --> 00:05:46,230 We are going to begin adding some routes. 78 00:05:46,440 --> 00:05:48,390 When you're ready, I'll see you there.