All language subtitles for 4. Generating Modules

Now that we have a better idea of what the module system is.

Let's figure out how we can generate a new module.

We're gonna generate modules by using the angular CLIA the general command is right here.

So energy Generate Module and then the name of our module.

We can also use a little shortcut which would be N G G and then in the G stands for generate N stands

for module.

We're going to add on the dash dash routing flag to our commands that we're going to use to generate

a couple of modules right now.

The reason that we're adding on dash dash routing is that we're generating some rounded modules because

we want to make sure that we only show say this content right here when a user is at a root of slash

elements.

We only want to show this collections module.

Any time that a user is at slash collections and so on for the other pages as well.

If we were instead generating a shared or small widget module so something that defined some reusable

components then we would not add on that dash dash routing flag because we do not want to tie some reusable

components to some specific routes.

We only make use of dash dash routing when we are creating a routed or routing module.

Let's go back over to our command line.

We're going to generate four different modules using this command one for each page of our application

the back in my command line.

I'm going to change into my new ops directory the one that we've just generated.

Just a moment ago and then inside of here we're going to run four separate times and G G and then M

and then the name of our module the first one.

Once again we're going to call elements all do elements dash dash routing all then repeat that command

of N G G M.

Next one is elections

then use.

And then finally one last one though inside of the mockup right here we call this the modules page.

This is essentially showing some stuff from the module section of semantic UI rather than calling it

modules because I would be really confusing.

We're gonna call it simply mods instead.

So IMO D.S. mods just a little bit different just to make sure it's clear that hey this is a module

in the world of angular and this thing is like the mods feature of semantic UI we'll do n g g m mods

dash dash routing as well.

OK.

So there's are four different modules.

Let's now open up our code editor inside of our project directory and take a look at what was created

for us though between the last video and this one.

I've gone ahead and open up my editor inside of here.

I'm going to find my source directory and then the app folder now inside the app folder.

I'll see it there are now or sub folders inside there.

I've got collections elements mods and views all the different modules we create by default are going

to be placed inside this app folder.

Now we can open up any one these folders and we'll see that two different files have been created for

us.

First off is the module file.

So for example used up module dot T.S. and inside of here we'll see some code that looks very similar

to what we have inside of our app module.

We've taken a look at the app module once or twice but I haven't really discussed the code inside there.

This is about every module we create is going to look very similar too much just like what you see right

here.

The only difference between them is on a different configuration options.

We're going to provide to this energy module directive and we're going to discuss what these configuration

options mean in just a moment.

Now the other file that you'll notice that was generated inside of each of these directories is the

something dash routing dot module file for example views dash routing dot module dot t yes.

The purpose of this file right here is to serve as our routing module when we added on that dash dash

routing flag to that command angular decided to also create for us automatically these routing files.

So these routing files are the result of adding on dash dash routing to that energy generate command

inside of each of these routing files.

You and I are going to add in some number of configuration rules to say hey whenever a user goes to

some routes like let's say slash tattoos we want to show some component that is defined inside of our

module for example inside of our use dash routing module file we might write out some configuration

inside of here to say whenever a user comes here show the user something from our views page like say

the statistics component or the item list component and so on that's what's going on with those two

different files.

Again when we use that dash dash routing command you're generating both a routing and a routed module

simultaneously OK.

So now you've seen this generation in action.

Let's take a pause right here.

We're gonna come back the next video we're going to a quick discussion on routing in general instead

of angular and get a better idea of how this stuff really works.