All language subtitles for 3. Modules Overview

Now that we have generated our project I want to have a quick discussion on the module system inside

of angular.

So first off what is a module module is an optional feature that we can use inside of angular to better

organized code inside of our project.

I use the term optional because it really really is.

You do not have to use the module system instead of angular.

If you do not want to you're going to find that it's a pretty useful system to make use of and the vast

vast majority of production angular applications out there do in fact use the module system.

What is the module system all about.

Well take a look at this little imaginary application right here on the left hand side is a To Do List

feature and on the right hand side is a current weather feature.

We create a separate module for each distinct feature that we expect our application to have though

in our case or in this imaginary application we've got two distinct features one for two dos one for

whether we would create a two do module and a weather module and then inside of each of these modules

we would place all the different components all the different directives and all the different types

that are needed to implement that very specific feature decided to do module I might create something

called The To Do List component it would create that content right there and then inside the weather

module I might create a weather show component it would implement the current weather display right

there when we start making use of modules there are actually five different types of modules and you

do not need to memorize these different types of modules at all you don't have to memorize this list

the only reason I'm showing you this diagram right here is because you're going to see a lot of documentation

and blog posts that refer to these different types of modules.

But again at the end of the day you really do not have to memorize these the first kind of module that

we're going to work with is a domain module or a domain module is very similar to what we just discussed

over here a domain module is a module that's going to wrap up all the different components that are

needed to implement one single feature of our application.

The second kind of module that we're going to see is something called a routed module.

This is very very similar to a domain module.

The only difference is that the components inside of here are tied to some different routes and remember

a route in the world of angular means that anytime that user goes to some specific you url.

So like a route of slash to do is or something like that you will try to show them some specific component

a routing module is very very similar in nature.

The routing module is what actually defines the very specific routing rules.

So the thing that actually says well yeah if we go to slash to dos showed a To Do List component.

The reason that I say that understanding these module types is not super important is that right away

you might be kind of confused about the difference between these first three.

Yes they are very similar in nature.

At the end of the day all three of them really do have a distinct purpose and we can really kind of

whittle down the definition of each of them.

But again at the end of the day they really are kind of similar in nature next to on here are a little

bit more different.

The Fourth we have something called a service module.

This is a module that defines some different services.

Remember a service inside of angular is something that manages or fetches data.

And then finally a widget module.

This is something that defines some set of reusable components that are intended to be used between

multiple other modules inside of our application most applications that we build are going to have at

least a domain module and a widget module.

I want to say most I'm talking about most production applications or courses in service to me for applications

inside of this course.

We're generally going to be working out of just one single module the app module.

Though many applications we're gonna work on from here towards the end of the course we're just going

to work with one single module.

But in general as you start to work with production applications you're going to see at least a domain

module and a widget one though.

How does this all apply to our application.

Well for you and I for this application we're working on we're going to create at least or separate

modules even though we are discussing these things we're saying oh yeah these are reusable components

we're going to pretend that each page that we're looking at here so that elements page elections views

and modules we're going to pretend that each of these represents one distinct feature that we're going

to create one module of the elements module a second one called collections a third called views in

a fourth called modules or maybe we can think of a better name so that we don't have to call it like

a module module because that's really confusing that's what we're gonna do inside of our application.

And again this is all about getting a better idea of how to encapsulate or kind of a wrap up together

all the different components related to one feature inside of our app okay.

Let's take a quick pause right here.

When we come back the next video we're going to take a look at how we can very easily generate a new

module using the angular CLIA.