1 00:00:03,730 --> 00:00:09,130 Hello, everyone, and welcome back in this lesson, we are going to talk about angular module's. 2 00:00:09,310 --> 00:00:10,960 So what is an angular module? 3 00:00:10,960 --> 00:00:18,970 And angular module is an organizational unit where we can put together components, directives and services 4 00:00:19,180 --> 00:00:20,930 that are tightly related. 5 00:00:20,950 --> 00:00:26,200 For example, many of the components and directives that we have been building so far in this course 6 00:00:26,200 --> 00:00:27,710 are tightly related. 7 00:00:27,730 --> 00:00:33,070 For example, here, the cursor, of course, image component, also the highlighted directive. 8 00:00:33,070 --> 00:00:39,780 And even here the course is service or even a pipe that we might build related to the courses functionality. 9 00:00:39,820 --> 00:00:43,690 All of these is related to the courses business notion. 10 00:00:43,750 --> 00:00:49,750 We might want to group all of these components, directive's pipes and services into a common module 11 00:00:49,780 --> 00:00:56,270 that we can publish independently of our application and make it available for third party applications. 12 00:00:56,290 --> 00:00:57,350 So that is a module. 13 00:00:57,460 --> 00:01:02,330 Let's give a concrete example of a module that we are already using in our application. 14 00:01:02,530 --> 00:01:09,580 Now our application has this file app, that module Dotty's that is available here and there, the app 15 00:01:09,580 --> 00:01:10,180 folder. 16 00:01:10,270 --> 00:01:15,610 Now, this is the definition of the application root module, and we can see that we are using here 17 00:01:15,610 --> 00:01:18,920 the engie module, angular core decorator. 18 00:01:19,060 --> 00:01:22,440 Let's then have a look at the definition of this engine module. 19 00:01:22,510 --> 00:01:26,140 So first we have here the declarations property. 20 00:01:26,150 --> 00:01:28,280 So this is going to contain here a list. 21 00:01:28,300 --> 00:01:33,720 So this is an array containing all the components and directives that are part of the module. 22 00:01:33,730 --> 00:01:39,460 So we can see we have here the application root component, a couple of extra components, a directive. 23 00:01:39,460 --> 00:01:45,850 And we could even add here a pipe if we build a custom pipe like we are able to do later in this course. 24 00:01:45,880 --> 00:01:52,510 So in summary, this is the list of components, directives and pipes that belong to this engie module. 25 00:01:52,630 --> 00:01:55,610 Next, we have here the imports property. 26 00:01:55,750 --> 00:02:01,060 Now, here is where we are going to define the dependent modules of this module. 27 00:02:01,330 --> 00:02:08,110 So this import statement means that the engie module application module, which is the module of our 28 00:02:08,110 --> 00:02:14,680 application, also needs internally the browser module, the browser Animation's module and the ATP 29 00:02:14,680 --> 00:02:15,980 client module. 30 00:02:16,000 --> 00:02:22,090 So if, for example, we don't import here the HTP client module, then we will not have available in 31 00:02:22,090 --> 00:02:24,310 our application for injection. 32 00:02:24,430 --> 00:02:30,600 The angular EDP client service, the HDB client service is part of this module. 33 00:02:30,610 --> 00:02:37,330 If any application needs to steep decline, then they need to import this module here on the imports 34 00:02:37,360 --> 00:02:38,020 property. 35 00:02:38,020 --> 00:02:44,110 Otherwise the application will not work and we will get a dependency injection error saying that the 36 00:02:44,110 --> 00:02:50,030 HTP client service is not available for injection besides the EDP client module. 37 00:02:50,050 --> 00:02:53,070 We have also imported here the browser module. 38 00:02:53,080 --> 00:02:59,470 So this is a common angular module that is going to contain a series of services that Engelhard is going 39 00:02:59,470 --> 00:03:04,480 to need to render our application in the browser if we would be rendering on the server side. 40 00:03:04,630 --> 00:03:07,510 This would be replaced by the server module. 41 00:03:07,540 --> 00:03:13,510 The browser module will include a set of built-In angular services that are needed for rendering our 42 00:03:13,510 --> 00:03:14,950 application on the client side. 43 00:03:15,070 --> 00:03:21,880 And it will also include a series of core directives, such as, for example, Energy Core, NGF, etc.. 44 00:03:21,970 --> 00:03:28,330 So this module is absolutely essential for any Anglet application running in the browser if we want 45 00:03:28,330 --> 00:03:30,310 to add animations to our application. 46 00:03:30,430 --> 00:03:37,270 We will need the browser animations module after identifying our dependency modules here on the imports 47 00:03:37,270 --> 00:03:37,870 property. 48 00:03:38,020 --> 00:03:44,590 Next, we have here the provider's property, so here we can define providers for services that our 49 00:03:44,590 --> 00:03:45,690 application needs. 50 00:03:45,730 --> 00:03:50,620 Let's give an example in our application when the provider's property could be useful. 51 00:03:50,740 --> 00:03:56,980 Let's say that, for example, here our courses service, instead of being injected via a traditional 52 00:03:56,980 --> 00:04:02,000 provider like we are doing here, we will instead only have here the injectable decorator. 53 00:04:02,020 --> 00:04:07,120 So as we have seen before, this would mean that our courses service would have to be provided some 54 00:04:07,120 --> 00:04:07,750 other way. 55 00:04:07,870 --> 00:04:14,410 One way that we saw for providing the service would be to use here the provider's property of the application 56 00:04:14,410 --> 00:04:15,400 route component. 57 00:04:15,440 --> 00:04:20,230 So if we try this out, we're going to see that our application is still working correctly. 58 00:04:20,380 --> 00:04:26,710 Now, instead of declaring this at the level of the component, we can also declared our service here 59 00:04:26,740 --> 00:04:29,530 at the level of the application root module. 60 00:04:29,710 --> 00:04:30,820 Let's try this out. 61 00:04:30,820 --> 00:04:36,760 If we relo the application and see that everything is still working correctly and no errors that are 62 00:04:36,760 --> 00:04:43,600 being displayed on the console, the less property that our application module is using is the bootstrap 63 00:04:43,600 --> 00:04:44,270 property. 64 00:04:44,380 --> 00:04:50,760 This property is used to identify the root components of our application componentry. 65 00:04:50,800 --> 00:04:57,070 So in this case, we only have here one component, which is our application component, but we could 66 00:04:57,070 --> 00:05:00,010 have several root components in an application. 67 00:05:00,100 --> 00:05:00,400 That's why. 68 00:05:00,460 --> 00:05:06,540 This property here is an array, if we have a look here at our index of e-mail, we are going to see 69 00:05:06,540 --> 00:05:10,570 that we only have here one application component. 70 00:05:10,620 --> 00:05:17,610 It's the apple root element that corresponds here to our application component, as you can see here 71 00:05:17,670 --> 00:05:21,030 in the selected property of the component decorator. 72 00:05:21,210 --> 00:05:27,690 If by any chance our application would need a second root component here, we could, for example, 73 00:05:27,690 --> 00:05:33,180 declare it here as a separate tag, let's call it, for example, other this root. 74 00:05:33,180 --> 00:05:39,930 And it would be a matter of defining a component for this other root component and adding it here in 75 00:05:39,930 --> 00:05:43,620 the bootstrap property of our application root module. 76 00:05:43,800 --> 00:05:48,080 Most applications, however, only have one angular root component. 77 00:05:48,090 --> 00:05:52,330 So most of the times we are only providing here one component. 78 00:05:52,470 --> 00:05:56,270 Let's now continue to dive deeper into angular modules. 79 00:05:56,280 --> 00:06:02,250 What we're going to do next is we are going to refactor our application and we are going to create our 80 00:06:02,280 --> 00:06:05,400 own feature module that we are going to import here. 81 00:06:05,490 --> 00:06:11,820 This module is going to contain the cursor component, the crosscourt image, a directive and a service.