Hello, everyone, and welcome back in this lesson, we are going to talk about angular module's.
So what is an angular module?
And angular module is an organizational unit where we can put together components, directives and services
that are tightly related.
For example, many of the components and directives that we have been building so far in this course
are tightly related.
For example, here, the cursor, of course, image component, also the highlighted directive.
And even here the course is service or even a pipe that we might build related to the courses functionality.
All of these is related to the courses business notion.
We might want to group all of these components, directive's pipes and services into a common module
that we can publish independently of our application and make it available for third party applications.
So that is a module.
Let's give a concrete example of a module that we are already using in our application.
Now our application has this file app, that module Dotty's that is available here and there, the app
folder.
Now, this is the definition of the application root module, and we can see that we are using here
the engie module, angular core decorator.
Let's then have a look at the definition of this engine module.
So first we have here the declarations property.
So this is going to contain here a list.
So this is an array containing all the components and directives that are part of the module.
So we can see we have here the application root component, a couple of extra components, a directive.
And we could even add here a pipe if we build a custom pipe like we are able to do later in this course.
So in summary, this is the list of components, directives and pipes that belong to this engie module.
Next, we have here the imports property.
Now, here is where we are going to define the dependent modules of this module.
So this import statement means that the engie module application module, which is the module of our
application, also needs internally the browser module, the browser Animation's module and the ATP
client module.
So if, for example, we don't import here the HTP client module, then we will not have available in
our application for injection.
The angular EDP client service, the HDB client service is part of this module.
If any application needs to steep decline, then they need to import this module here on the imports
property.
Otherwise the application will not work and we will get a dependency injection error saying that the
HTP client service is not available for injection besides the EDP client module.
We have also imported here the browser module.
So this is a common angular module that is going to contain a series of services that Engelhard is going
to need to render our application in the browser if we would be rendering on the server side.
This would be replaced by the server module.
The browser module will include a set of built-In angular services that are needed for rendering our
application on the client side.
And it will also include a series of core directives, such as, for example, Energy Core, NGF, etc..
So this module is absolutely essential for any Anglet application running in the browser if we want
to add animations to our application.
We will need the browser animations module after identifying our dependency modules here on the imports
property.
Next, we have here the provider's property, so here we can define providers for services that our
application needs.
Let's give an example in our application when the provider's property could be useful.
Let's say that, for example, here our courses service, instead of being injected via a traditional
provider like we are doing here, we will instead only have here the injectable decorator.
So as we have seen before, this would mean that our courses service would have to be provided some
other way.
One way that we saw for providing the service would be to use here the provider's property of the application
route component.
So if we try this out, we're going to see that our application is still working correctly.
Now, instead of declaring this at the level of the component, we can also declared our service here
at the level of the application root module.
Let's try this out.
If we relo the application and see that everything is still working correctly and no errors that are
being displayed on the console, the less property that our application module is using is the bootstrap
property.
This property is used to identify the root components of our application componentry.
So in this case, we only have here one component, which is our application component, but we could
have several root components in an application.
That's why.
This property here is an array, if we have a look here at our index of e-mail, we are going to see
that we only have here one application component.
It's the apple root element that corresponds here to our application component, as you can see here
in the selected property of the component decorator.
If by any chance our application would need a second root component here, we could, for example,
declare it here as a separate tag, let's call it, for example, other this root.
And it would be a matter of defining a component for this other root component and adding it here in
the bootstrap property of our application root module.
Most applications, however, only have one angular root component.
So most of the times we are only providing here one component.
Let's now continue to dive deeper into angular modules.
What we're going to do next is we are going to refactor our application and we are going to create our
own feature module that we are going to import here.
This module is going to contain the cursor component, the crosscourt image, a directive and a service.