1
00:00:00,180 --> 00:00:06,000
In this lecture, we will create a shared module for keeping our code clean and organized.

2
00:00:06,270 --> 00:00:10,410
We already know ahead of time we will need to reuse the modal component.

3
00:00:10,740 --> 00:00:14,520
In that case, we should create the model in a separate module.

4
00:00:15,090 --> 00:00:19,080
It's common practice to create something called a shared module.

5
00:00:19,290 --> 00:00:24,360
It's a module with generic directives, classes, pipes and components.

6
00:00:24,900 --> 00:00:28,830
Developers will outsource generic features to a shared module.

7
00:00:29,160 --> 00:00:32,220
This module can be imported into other modules.

8
00:00:32,520 --> 00:00:36,180
This practice reduces clutter in our other modules.

9
00:00:36,450 --> 00:00:39,720
You will see this type of organization in most projects.

10
00:00:40,170 --> 00:00:45,120
We are going to write the code for rendering the modal inside a shared module.

11
00:00:45,450 --> 00:00:51,360
Then if an area of our app needs to render a model, we will import this module.

12
00:00:51,690 --> 00:00:58,050
Since the code for rendering a model is registered with the shared module, it'll be accessible wherever

13
00:00:58,050 --> 00:00:59,100
it is imported.

14
00:00:59,370 --> 00:01:00,630
Simple and clean.

15
00:01:01,200 --> 00:01:04,019
We have two options for creating a module.

16
00:01:04,230 --> 00:01:07,470
We can create it manually or use the SEELYE.

17
00:01:07,860 --> 00:01:10,380
I think this really is the best route to go.

18
00:01:10,800 --> 00:01:18,780
It will reduce the likelihood of an error inside the command line and the following command N.G. Generate

19
00:01:18,780 --> 00:01:20,070
module shared.

20
00:01:22,700 --> 00:01:26,000
We're already familiar with the energy generate command.

21
00:01:26,270 --> 00:01:29,570
It's a command for generating files in our project.

22
00:01:29,870 --> 00:01:35,240
In this example, we are telling the Seelye to create a module with the name shared.

23
00:01:35,540 --> 00:01:37,910
We can call the module whatever we want.

24
00:01:38,270 --> 00:01:43,700
However, it's common practice to use the name shared for shared modules.

25
00:01:43,910 --> 00:01:45,320
Let's run the command.

26
00:01:47,870 --> 00:01:51,440
After a few seconds, a single file has been generated.

27
00:01:51,680 --> 00:01:55,870
Let's check out what was generated inside the rectory.

28
00:01:56,090 --> 00:01:59,150
A new directory has been created, called Shared.

29
00:01:59,570 --> 00:02:06,540
It's recommended to have dedicated directories to modules and the related files inside this directory.

30
00:02:06,590 --> 00:02:10,729
We have a file called shared module acts.

31
00:02:13,280 --> 00:02:19,020
The next thing we will do is create a component for our model inside the command line.

32
00:02:19,070 --> 00:02:25,340
We will run the following command energy generate component shared model.

33
00:02:27,900 --> 00:02:33,570
If we look inside the shared directory, the modal component file should appear under it.

34
00:02:33,900 --> 00:02:36,570
We have two model components in our app.

35
00:02:36,870 --> 00:02:40,130
Let me add some clarity as to the differences between them.

36
00:02:42,640 --> 00:02:48,680
There are differences come from their responsibilities, the authentication model will handle the inner

37
00:02:48,680 --> 00:02:50,120
content of the model.

38
00:02:50,450 --> 00:02:56,330
It will not care about whether the model is being displayed on the page, whereas the mobile component

39
00:02:56,330 --> 00:02:59,840
in the shared module will not handle the inner content.

40
00:03:00,140 --> 00:03:02,870
It will focus on the visibility of the model.

41
00:03:05,450 --> 00:03:09,050
Before moving on, we need to export the modal component.

42
00:03:09,440 --> 00:03:14,150
By default, the Clia declares the component but does not export it.

43
00:03:14,540 --> 00:03:18,560
Exporting must be performed manually inside the decorator.

44
00:03:18,590 --> 00:03:23,420
We are going to add the exports array with the modal component passed in.

45
00:03:26,050 --> 00:03:30,250
We're exporting the component to make it accessible to other modules.

46
00:03:30,490 --> 00:03:37,150
Keep in mind, the shared module should define components, pipes and directives for different parts

47
00:03:37,150 --> 00:03:37,870
of our app.

48
00:03:38,290 --> 00:03:40,840
This module should be shared next.

49
00:03:40,930 --> 00:03:42,670
Let's open the user module.

50
00:03:45,110 --> 00:03:48,620
At the top of the file, we will import the shared module.

51
00:03:50,950 --> 00:03:54,100
Lastly, we will add it to the imports option.

52
00:03:56,630 --> 00:04:02,630
By importing the module, we'll be able to start using our reusable model in the next lecture.

53
00:04:02,750 --> 00:04:08,600
We will begin separating the responsibilities of the models into their respective components.