In this lecture, we were going to create a user module for keeping our code clean and organized.
We are going to be creating a lot of files related to the user system.
Therefore, I think it would be a good idea to keep everything inside a separate module.
We have two options for creating a module.
We can create it manually or use the Seelye.
I think this really is the best route to go.
It will reduce the likelihood of an error inside the command line.
Add the following command nji generate module user.
We're already familiar with the Kng Generate Command.
It's a command for generating files in our project.
In this example, we are telling these seelye to create a module with the name user.
We can call the module whatever we want.
Let's run the command.
After a few seconds, a single file has been generated by default, Angular will create modules in the
app directory.
It's to help us visualize the hierarchy of modules.
As a refresher, the app module is the root module, the module system and angular enables us to export
and import a group of files.
The modules we create should group files by feature.
We can visualize our modules as a hierarchy.
The app module sits at the top.
It's importing the user module.
There is no limit as to how many modules can be imported.
The user module can import additional modules.
Those modules would be children of the user module.
When we generated components, they were automatically registered inside the ALP module module generated
with the Seelye are not registered.
We need to import the module into the app module.
Before we do, let's check out what was generated inside the app directory.
A new directory has been created called user.
It's recommended to store modules in dedicated directories inside this directory.
We have a file called User Dom Module Acts.
This module contains a normal setup for a module.
It is a class decorated with the nji module function and object is being passed in to configure the
object.
There's a new module in this file called Common Module.
We haven't gone over this module.
The common module exports, components, directives and pipes.
For example, the NGF directive is exported by this module.
Hold on a second.
Doesn't the browser module do the same thing?
If we open the app module, we will find the browser module.
The browser module performs a similar task to the common module, both modules will import the same
components, directives and pipes.
The main difference between them is that the browser module will provide additional services for running
an app in the browser.
The browser module should always be imported into the root module.
Any other module can import the common module.
In the resource section of this lecture, I provide a link to the Common Module documentation page.
Let's read the description together, exports all the basic angular directives and pipes such as NGF
Nji, four of decimal pipe and so on.
RE-exported by a browser module, which is included automatically in the Root app module when you create
a new app with the ceiling new command.
The most important part of the description is this line that says the common module is re-exported by
the browser module.
Under the hood, the browser module will export this module for us.
Therefore, when we import it into the app module, we're actually importing two modules.
The browser module itself and the common module.
Let's go back to our editors.
At the moment, the user module has been created, but is not being imported into our app.
We should import it into the app module at the top of the app file.
We will import the user module.
Next, we will add the user module object to the list of imports.
The user module is ready, we can move on to creating the components for our UI.
We will begin this process in the next lecture.