1
00:00:00,300 --> 00:00:05,730
In this lecture, we were going to create a user module for keeping our code clean and organized.

2
00:00:06,090 --> 00:00:09,660
We are going to be creating a lot of files related to the user system.

3
00:00:09,870 --> 00:00:14,460
Therefore, I think it would be a good idea to keep everything inside a separate module.

4
00:00:14,940 --> 00:00:17,430
We have two options for creating a module.

5
00:00:17,640 --> 00:00:20,460
We can create it manually or use the Seelye.

6
00:00:20,730 --> 00:00:23,160
I think this really is the best route to go.

7
00:00:23,460 --> 00:00:27,310
It will reduce the likelihood of an error inside the command line.

8
00:00:27,330 --> 00:00:31,650
Add the following command nji generate module user.

9
00:00:34,230 --> 00:00:37,320
We're already familiar with the Kng Generate Command.

10
00:00:37,530 --> 00:00:40,410
It's a command for generating files in our project.

11
00:00:40,710 --> 00:00:45,750
In this example, we are telling these seelye to create a module with the name user.

12
00:00:46,140 --> 00:00:48,300
We can call the module whatever we want.

13
00:00:48,510 --> 00:00:49,830
Let's run the command.

14
00:00:52,450 --> 00:00:59,170
After a few seconds, a single file has been generated by default, Angular will create modules in the

15
00:00:59,170 --> 00:01:00,130
app directory.

16
00:01:00,520 --> 00:01:04,060
It's to help us visualize the hierarchy of modules.

17
00:01:05,530 --> 00:01:12,460
As a refresher, the app module is the root module, the module system and angular enables us to export

18
00:01:12,460 --> 00:01:14,380
and import a group of files.

19
00:01:14,680 --> 00:01:17,770
The modules we create should group files by feature.

20
00:01:18,130 --> 00:01:21,100
We can visualize our modules as a hierarchy.

21
00:01:21,430 --> 00:01:23,290
The app module sits at the top.

22
00:01:23,590 --> 00:01:25,630
It's importing the user module.

23
00:01:26,110 --> 00:01:29,140
There is no limit as to how many modules can be imported.

24
00:01:29,380 --> 00:01:32,380
The user module can import additional modules.

25
00:01:32,620 --> 00:01:35,800
Those modules would be children of the user module.

26
00:01:37,150 --> 00:01:43,990
When we generated components, they were automatically registered inside the ALP module module generated

27
00:01:43,990 --> 00:01:45,970
with the Seelye are not registered.

28
00:01:46,210 --> 00:01:49,360
We need to import the module into the app module.

29
00:01:49,630 --> 00:01:54,930
Before we do, let's check out what was generated inside the app directory.

30
00:01:54,970 --> 00:01:57,730
A new directory has been created called user.

31
00:01:58,150 --> 00:02:03,640
It's recommended to store modules in dedicated directories inside this directory.

32
00:02:03,670 --> 00:02:07,390
We have a file called User Dom Module Acts.

33
00:02:09,930 --> 00:02:12,690
This module contains a normal setup for a module.

34
00:02:13,020 --> 00:02:19,440
It is a class decorated with the nji module function and object is being passed in to configure the

35
00:02:19,440 --> 00:02:20,040
object.

36
00:02:20,400 --> 00:02:23,610
There's a new module in this file called Common Module.

37
00:02:23,880 --> 00:02:25,600
We haven't gone over this module.

38
00:02:26,220 --> 00:02:30,270
The common module exports, components, directives and pipes.

39
00:02:30,570 --> 00:02:34,920
For example, the NGF directive is exported by this module.

40
00:02:35,190 --> 00:02:36,180
Hold on a second.

41
00:02:36,450 --> 00:02:38,700
Doesn't the browser module do the same thing?

42
00:02:39,030 --> 00:02:42,600
If we open the app module, we will find the browser module.

43
00:02:45,090 --> 00:02:51,270
The browser module performs a similar task to the common module, both modules will import the same

44
00:02:51,270 --> 00:02:53,730
components, directives and pipes.

45
00:02:54,090 --> 00:02:59,640
The main difference between them is that the browser module will provide additional services for running

46
00:02:59,640 --> 00:03:00,960
an app in the browser.

47
00:03:01,290 --> 00:03:05,250
The browser module should always be imported into the root module.

48
00:03:05,580 --> 00:03:08,460
Any other module can import the common module.

49
00:03:08,790 --> 00:03:15,090
In the resource section of this lecture, I provide a link to the Common Module documentation page.

50
00:03:17,770 --> 00:03:25,420
Let's read the description together, exports all the basic angular directives and pipes such as NGF

51
00:03:25,690 --> 00:03:29,110
Nji, four of decimal pipe and so on.

52
00:03:29,500 --> 00:03:35,620
RE-exported by a browser module, which is included automatically in the Root app module when you create

53
00:03:35,620 --> 00:03:38,230
a new app with the ceiling new command.

54
00:03:38,710 --> 00:03:44,740
The most important part of the description is this line that says the common module is re-exported by

55
00:03:44,740 --> 00:03:45,850
the browser module.

56
00:03:46,120 --> 00:03:50,320
Under the hood, the browser module will export this module for us.

57
00:03:50,560 --> 00:03:56,380
Therefore, when we import it into the app module, we're actually importing two modules.

58
00:03:56,710 --> 00:03:59,950
The browser module itself and the common module.

59
00:04:00,190 --> 00:04:02,080
Let's go back to our editors.

60
00:04:04,550 --> 00:04:09,950
At the moment, the user module has been created, but is not being imported into our app.

61
00:04:10,400 --> 00:04:14,720
We should import it into the app module at the top of the app file.

62
00:04:14,750 --> 00:04:16,880
We will import the user module.

63
00:04:19,320 --> 00:04:23,790
Next, we will add the user module object to the list of imports.

64
00:04:26,330 --> 00:04:31,460
The user module is ready, we can move on to creating the components for our UI.

65
00:04:31,760 --> 00:04:34,460
We will begin this process in the next lecture.