1
00:00:03,700 --> 00:00:05,800
Hello, everyone, and welcome back.

2
00:00:05,950 --> 00:00:11,470
In this lesson, we are going to build from scratch our very own angular module, it's going to be the

3
00:00:11,470 --> 00:00:12,550
courses module.

4
00:00:12,700 --> 00:00:18,130
In order to do that, let's head over here to the terminal and let's stop the angular CLIA for a moment.

5
00:00:18,250 --> 00:00:25,030
Now we are going to scaffold a new module by running the following command and generate module, and

6
00:00:25,030 --> 00:00:27,460
then we are going to give it the name courses.

7
00:00:27,490 --> 00:00:31,000
The module will be automatically named courses module.

8
00:00:31,270 --> 00:00:35,540
Let's run this command and have a look here at the file that was generated.

9
00:00:35,560 --> 00:00:39,610
So as you can see, this file is on the courses subfolder.

10
00:00:39,670 --> 00:00:41,800
So if we open it up, we are going to see that.

11
00:00:41,800 --> 00:00:46,710
We have here a couple of new files, the definition of the module and a test.

12
00:00:46,870 --> 00:00:51,470
Let's not jump into the courses module and have a look here at its declaration.

13
00:00:51,490 --> 00:00:58,390
So, as usual, we are using here the engie module decorator and so far we have not added any components,

14
00:00:58,390 --> 00:01:01,450
directive's pipes or services here to our module.

15
00:01:01,460 --> 00:01:04,690
So our declarations property is empty.

16
00:01:04,840 --> 00:01:08,170
We have already imported here the common module.

17
00:01:08,260 --> 00:01:14,350
The command module is going to contain the common directives, such as, for example, ENGY for NGF,

18
00:01:14,350 --> 00:01:20,710
etc. Any feature module that you will ever write will need the Commons module for sure.

19
00:01:20,860 --> 00:01:25,380
We did not include it here in our application module, but it's there.

20
00:01:25,390 --> 00:01:31,960
It's a transitive dependency to the browser module, the browser module, as its dependency on the imports

21
00:01:31,960 --> 00:01:35,210
property contains already the command module.

22
00:01:35,230 --> 00:01:40,090
So that's why we didn't have to add it here in our application root module.

23
00:01:40,120 --> 00:01:46,630
Our application route module is going to depend on the courses module, so let's import it's here at

24
00:01:46,630 --> 00:01:48,700
the level of the imports property.

25
00:01:48,710 --> 00:01:53,800
So now we need to start adding components and directives to the courses module.

26
00:01:54,040 --> 00:01:59,570
Let's start by moving the cursor component and declare it as part of this module.

27
00:01:59,680 --> 00:02:05,770
The first thing that we are going to do is we are going to move here, the cursor component folder into

28
00:02:05,770 --> 00:02:07,090
the courses folder.

29
00:02:07,270 --> 00:02:13,720
Now that we have done that, we are going to head over here to the courses module and in its declarations

30
00:02:13,720 --> 00:02:17,270
we are going to have here the core squared component.

31
00:02:17,350 --> 00:02:21,370
Now, this component is going to be part of the courses module.

32
00:02:21,550 --> 00:02:27,550
This means that we no longer have to add it here in the declarations of our root module, it will be

33
00:02:27,550 --> 00:02:32,530
implicitly added due to the dependency here with the courses module.

34
00:02:32,650 --> 00:02:35,730
Let's do that for a couple more components and directives.

35
00:02:35,740 --> 00:02:41,500
We want to move inside here to the courses folder, the course image component, and we are going to

36
00:02:41,500 --> 00:02:43,960
remove it here from the module.

37
00:02:43,990 --> 00:02:48,040
We are going to add it here at the level of the courses module.

38
00:02:48,190 --> 00:02:53,070
Now let's do something similar, but for services instead of components.

39
00:02:53,110 --> 00:02:59,290
So we are going to take here the courses service and we are also going to move it here inside the courses

40
00:02:59,290 --> 00:02:59,800
folder.

41
00:02:59,980 --> 00:03:06,400
Now, the courses services here, part of the courses module, we only have to declare it here in the

42
00:03:06,400 --> 00:03:08,570
provider's part of our module.

43
00:03:08,740 --> 00:03:09,990
Let's have it here.

44
00:03:10,090 --> 00:03:17,170
Let's declare here the courses service and let's also remove it here from the application root module.

45
00:03:17,170 --> 00:03:19,640
So no longer we will need to declare it here.

46
00:03:19,780 --> 00:03:24,040
This is also going to be included here as part of the courses module.

47
00:03:24,220 --> 00:03:29,370
Let's now quickly fix a couple of compilation errors that were caused by our refactoring.

48
00:03:29,380 --> 00:03:36,220
We're going to remove here a couple of imports from our application module as the courses service and

49
00:03:36,220 --> 00:03:39,470
the components are no longer needed in this file.

50
00:03:39,610 --> 00:03:45,870
Let's not try to use the courses module without any further modification and see if it's working.

51
00:03:45,880 --> 00:03:50,890
We are going to head over here to the terminal and we're going to start our development server with

52
00:03:50,890 --> 00:03:52,030
NPM start.

53
00:03:52,030 --> 00:03:57,420
At this point, you should still get here a couple of compilation errors caused by the refactoring.

54
00:03:57,580 --> 00:03:59,230
So let's first fix those.

55
00:03:59,230 --> 00:04:04,660
We are going to switch here to our application component and we're going to remove here this import

56
00:04:04,660 --> 00:04:06,130
to the courses service.

57
00:04:06,130 --> 00:04:09,010
Let's quickly reimported with the correct path.

58
00:04:09,010 --> 00:04:15,280
No, let's rebuild the application and let's have a look here at the error messages that we might still

59
00:04:15,280 --> 00:04:15,790
have.

60
00:04:15,790 --> 00:04:20,810
So we can see we have here another issue at the level of the coursework component.

61
00:04:20,829 --> 00:04:22,360
Let's switch into this file.

62
00:04:22,480 --> 00:04:26,620
So as we can see, we have here a couple of imports that are not correct.

63
00:04:26,620 --> 00:04:33,940
Let's quickly re-import here the course model class and let's also re-import here the courses service.

64
00:04:34,150 --> 00:04:38,560
Now we are getting here and error, which is caused by the highlighted directive.

65
00:04:38,560 --> 00:04:44,680
Let's move that also inside the module as it's tightly linked to the other Korshak components that we

66
00:04:44,680 --> 00:04:46,330
have been building so far.

67
00:04:46,360 --> 00:04:49,750
So we are going to drag and drop it here inside the courses folder.

68
00:04:49,840 --> 00:04:55,570
Let's head over here to the application module and remove here these few directives that we have been

69
00:04:55,570 --> 00:04:56,140
using.

70
00:04:56,140 --> 00:05:00,310
We are going to remove them from the imports and we are going to move these DIKLA.

71
00:05:00,350 --> 00:05:07,190
Patients here say the courses module, so here on the declaration's property, let's also define here

72
00:05:07,460 --> 00:05:14,430
the highlighted directive and the end unless directive that we have built before during the course.

73
00:05:14,600 --> 00:05:17,470
Now, let's have a look here at the highlighted directive.

74
00:05:17,480 --> 00:05:21,590
It seems that we have here a small issue at the level of the imports.

75
00:05:21,620 --> 00:05:24,710
Let's report here the courses service.

76
00:05:24,710 --> 00:05:29,750
And with these, we should have here a training application with no completion errors.

77
00:05:29,870 --> 00:05:31,070
But take a look.

78
00:05:31,070 --> 00:05:34,870
We apparently have here an angular, fatal bootstrap error.

79
00:05:34,880 --> 00:05:36,710
Let's have a look here at the message.

80
00:05:36,800 --> 00:05:37,610
Let's review it.

81
00:05:37,610 --> 00:05:41,970
Can't point to course, since it's not a non property, of course, care.

82
00:05:42,080 --> 00:05:48,340
And furthermore, if course care is an English component, then verify that it's part of this module.

83
00:05:48,350 --> 00:05:55,040
So it looks like the application root component that we are defining here at the level of our application

84
00:05:55,040 --> 00:05:59,180
module is not aware of the content of the courses module.

85
00:05:59,330 --> 00:06:06,290
So this module here, the application module is not recognizing here the course care, the custom element.

86
00:06:06,320 --> 00:06:10,930
Now let's switch here into the module and see why would that be the case.

87
00:06:10,970 --> 00:06:17,240
So the problem here is that we are declaring here the components that are part of this module, but

88
00:06:17,240 --> 00:06:24,940
we are not informing the angular module system of what subset of these components is visible outside

89
00:06:24,950 --> 00:06:25,730
this module.

90
00:06:25,740 --> 00:06:31,700
And this is because sometimes components are meant to be kept private one module, as they are private

91
00:06:31,700 --> 00:06:35,460
implementation details of a given part of our application.

92
00:06:35,480 --> 00:06:42,140
So in order to define the public API of our module, we are going to need to fill in the exports property.

93
00:06:42,140 --> 00:06:48,200
And here we are going to define what is visible for other parts of the application that import this

94
00:06:48,200 --> 00:06:48,650
module.

95
00:06:48,770 --> 00:06:53,190
Let's start by defining here the core scarred component and see what happens.

96
00:06:53,240 --> 00:06:55,940
So our application is still going to crash.

97
00:06:55,940 --> 00:06:57,500
But take a look now.

98
00:06:57,500 --> 00:07:00,530
It's not the core component that is giving the air.

99
00:07:00,620 --> 00:07:02,900
It's the course image component.

100
00:07:02,930 --> 00:07:07,400
We also need to add it here at the level of our exports clause.

101
00:07:07,580 --> 00:07:12,770
If we now re lower the application, we are going to see that this time around we don't have any error

102
00:07:12,770 --> 00:07:19,970
in the console and our courses module is being correctly imported in our application root module.

103
00:07:19,970 --> 00:07:25,380
And with this we have completed the implementation of our first angular feature module.

104
00:07:25,490 --> 00:07:31,670
This module, the course module could potentially be published independently of the application and

105
00:07:31,670 --> 00:07:37,520
be reused in other applications where we will have access to the same components and directives.

106
00:07:37,700 --> 00:07:43,150
With this feature module in place, let's not talk about some other angular advanced features.

107
00:07:43,250 --> 00:07:45,520
Let's talk about pipes a bit more.

108
00:07:45,530 --> 00:07:51,490
We have already talked about the angular built in pipes that are very useful for formatting data.

109
00:07:51,560 --> 00:07:53,720
Let's not take this one step further.

110
00:07:53,720 --> 00:07:56,750
We are going to be building our own custom pipe.