1
00:00:03,760 --> 00:00:05,810
Hello, everyone, and welcome back.

2
00:00:05,860 --> 00:00:11,890
In this lesson, we are going to write our own Provisor that is going to provide here to the application

3
00:00:11,890 --> 00:00:15,490
component, these dependancy, the courses, service dependancy.

4
00:00:15,640 --> 00:00:21,560
Remember, the goal of this exercise is to understand how dependency injection works under the hood.

5
00:00:21,730 --> 00:00:25,230
Usually we don't need to write our own providers by hand.

6
00:00:25,390 --> 00:00:27,800
They are automatically generated by include.

7
00:00:27,940 --> 00:00:34,060
The goal here is to understand how dependency injection works under the hood and also to become aware

8
00:00:34,060 --> 00:00:36,630
of all the configuration options that we have.

9
00:00:36,640 --> 00:00:39,280
Let's then start writing our provider.

10
00:00:39,370 --> 00:00:45,940
As we have discussed, our provider is simply a function that we need to pass to the angular dependency

11
00:00:45,940 --> 00:00:52,090
injection system, and that function is going to be called by the dependency injection system and it's

12
00:00:52,090 --> 00:00:55,380
going to provide the dependency that is needed.

13
00:00:55,420 --> 00:00:59,290
So in this case, we want to create the function that returns.

14
00:00:59,290 --> 00:01:06,460
Accorsi service dysfunction then needs to call here the new constructor on coarsest service, and it

15
00:01:06,460 --> 00:01:10,720
needs to provide with its own dependencies the dependency that we need.

16
00:01:10,720 --> 00:01:13,090
Here is the EVP client.

17
00:01:13,120 --> 00:01:15,280
So that's what we need to pass in here.

18
00:01:15,400 --> 00:01:21,230
Let's say that these HTP client comes from a parameter that we pass to the provider function.

19
00:01:21,250 --> 00:01:26,650
So if we add it here, we will have completed the implementation of our provider function.

20
00:01:26,680 --> 00:01:28,750
As you can see, it's simply a function.

21
00:01:28,750 --> 00:01:32,460
It returns across the service and it calls the constructor.

22
00:01:32,470 --> 00:01:35,110
That's simply what the provider is.

23
00:01:35,140 --> 00:01:40,480
Now, the question is, how is the color of this function going to get the EDP dependency?

24
00:01:40,510 --> 00:01:44,290
Well, let's remember that this is the dependency injection system.

25
00:01:44,290 --> 00:01:51,400
So it will have the missing dependency, the ETP client, and it will be able to pass it here to this

26
00:01:51,400 --> 00:01:52,060
function.

27
00:01:52,090 --> 00:01:58,000
What we need to do now is to plug this function here in the angular dependency injection system.

28
00:01:58,090 --> 00:01:59,720
There are multiple ways of doing that.

29
00:01:59,740 --> 00:02:05,830
We are going to be using here in this case, the provider's property of the component annotation.

30
00:02:05,870 --> 00:02:11,110
We are going to define here at the level of this component a provider for courses service.

31
00:02:11,290 --> 00:02:16,900
Now, if we just take here our function and we pass it here in the provider's array, we're going to

32
00:02:16,900 --> 00:02:18,370
get the computation error.

33
00:02:18,460 --> 00:02:25,150
And this is normal because the provider function by itself is not sufficient for making here this dependency

34
00:02:25,150 --> 00:02:25,720
to work.

35
00:02:25,870 --> 00:02:30,990
Instead of passing the function directly, we need to pass in a configuration object.

36
00:02:31,000 --> 00:02:37,520
And in this configuration object we are going to define at the level of the dependency injection system.

37
00:02:37,540 --> 00:02:45,070
What exactly are we providing these means that we need to give our course a service dependency and name

38
00:02:45,070 --> 00:02:47,990
a dependency injection unique name.

39
00:02:48,040 --> 00:02:52,890
These unique name of the dependency is known as an injection token.

40
00:02:52,900 --> 00:02:54,040
So let's define here.

41
00:02:54,040 --> 00:02:58,530
When we are going to give it a name, we are going to call it courses service.

42
00:02:58,540 --> 00:03:05,470
This is the name of the unique dependency injection token associated to the courses service dependency.

43
00:03:05,470 --> 00:03:08,050
And we are going to instantiate the token.

44
00:03:08,050 --> 00:03:12,640
We are simply going to call the constructor of this type that is provided by ANGULAR.

45
00:03:12,820 --> 00:03:14,860
It's called injection token.

46
00:03:14,860 --> 00:03:19,450
So the injection token is a unique identifier for a dependency.

47
00:03:19,480 --> 00:03:23,350
Each dependency has its own unique injection token.

48
00:03:23,500 --> 00:03:30,190
The injection token takes a parameter type and this is the type of the dependency being injected.

49
00:03:30,190 --> 00:03:37,320
So we are going to have here Kersee service that the dependency link to these dependency injection token

50
00:03:37,340 --> 00:03:40,480
now in the constructor, we need to pass in here a string.

51
00:03:40,480 --> 00:03:45,850
This is a unique string that uniquely identifies these dependency.

52
00:03:45,850 --> 00:03:48,730
We are going to call it causes underscore service.

53
00:03:48,730 --> 00:03:54,430
Now that we have here our dependency injection token, we can now configure the dependency injection

54
00:03:54,430 --> 00:03:54,880
system.

55
00:03:54,880 --> 00:03:59,190
We are going to say that we are going to provide the dependency for these Tolkan.

56
00:03:59,200 --> 00:04:05,200
So with these, we have uniquely identified the dependency that we are configuring and now we just need

57
00:04:05,200 --> 00:04:09,910
to pass in our provider function in order to pass in the provider function.

58
00:04:09,910 --> 00:04:13,720
We need to populate here these use factory properties.

59
00:04:13,750 --> 00:04:15,750
We are going to cover the other properties too.

60
00:04:15,790 --> 00:04:21,690
This is the one that we need to use to pass this function to the angular dependency injection system.

61
00:04:21,700 --> 00:04:25,360
So as you can see, our code is now compiling correctly.

62
00:04:25,360 --> 00:04:27,610
So let's review what we did here.

63
00:04:27,670 --> 00:04:33,730
In order to solve this error, we need to pass a function to the dependency injection system so that

64
00:04:33,730 --> 00:04:36,580
ANGULAR knows how to create a coarsest service.

65
00:04:36,580 --> 00:04:38,050
That's what's going on here.

66
00:04:38,140 --> 00:04:44,290
We have created here our provider function that simply creates the dependency that is needed here in

67
00:04:44,290 --> 00:04:45,130
the constructor.

68
00:04:45,280 --> 00:04:51,010
Each dependency in the dependency injection system needs to have a unique name.

69
00:04:51,010 --> 00:04:52,900
So we have created one here.

70
00:04:52,960 --> 00:04:55,360
This is known as an injection Tolkan.

71
00:04:55,540 --> 00:04:59,710
The injection token is like a unique identifier for a dependency.

72
00:04:59,710 --> 00:05:00,450
So after.

73
00:05:00,510 --> 00:05:08,120
Having here the dependency identifier and after having here the factory function, we have then informed

74
00:05:08,130 --> 00:05:15,270
Angular how to create a service by specifying these two things, the unique token for the dependency

75
00:05:15,270 --> 00:05:20,910
and the factory function that Angular can call in order to get here Accorsi service.

76
00:05:20,910 --> 00:05:25,720
And with these, we have here our first attempt of writing our own provider.

77
00:05:25,740 --> 00:05:31,890
So if we maltravers out, we are going to notice that we still get an error, can resolve all parameters

78
00:05:31,890 --> 00:05:33,880
for causes service provider.

79
00:05:33,900 --> 00:05:39,840
So the dependency injection system at this point, it's trying to call the factory function in order

80
00:05:39,840 --> 00:05:41,820
to create the causes service.

81
00:05:41,850 --> 00:05:43,220
That's what it's trying to do.

82
00:05:43,230 --> 00:05:47,420
But the problem is that it does not know how to get here.

83
00:05:47,430 --> 00:05:54,420
This EDP dependency ANGULAR cannot inspect the parameters of the function and determine what the penalties

84
00:05:54,420 --> 00:05:55,000
are needed.

85
00:05:55,020 --> 00:05:58,710
Instead, we need to provide here the dependencies ourselves.

86
00:05:58,860 --> 00:06:02,830
We need to use here another property called dependencies.

87
00:06:02,850 --> 00:06:09,000
So this is an array that is going to take here the multiple dependencies needed by the course service

88
00:06:09,000 --> 00:06:09,900
provider function.

89
00:06:09,930 --> 00:06:13,010
In this case, we need here the EVP client.

90
00:06:13,020 --> 00:06:18,420
So if we now try these out with the dependency field in, we are going to see that we get a different

91
00:06:18,420 --> 00:06:18,870
error.

92
00:06:18,880 --> 00:06:25,470
So we no longer have here the same error, mentioning that we did not know how to fix this dependency

93
00:06:25,470 --> 00:06:25,930
here.

94
00:06:25,950 --> 00:06:29,840
Instead, we get again the same error that we saw initially.

95
00:06:29,850 --> 00:06:36,480
No provided for this service, but we just wrote the provider and we know that the dependency injection

96
00:06:36,480 --> 00:06:40,920
system can call it with the EDP dependency and get the dependency.

97
00:06:41,010 --> 00:06:42,240
So what is going on here?

98
00:06:42,340 --> 00:06:43,320
It's very simple.

99
00:06:43,410 --> 00:06:50,340
What's going on is that here there is no way for Angular to link this request here for a coarsest service

100
00:06:50,340 --> 00:06:56,000
instance to these particular injectable that we have configured here here in the constructor.

101
00:06:56,010 --> 00:07:01,350
We are just asking here for an instance, of course, this service, but we are not seeing anywhere

102
00:07:01,500 --> 00:07:05,990
that we need the dependency link to this unique injection token.

103
00:07:06,000 --> 00:07:12,300
Let's remember the injection token is what uniquely identifies the dependency, and that's what we need

104
00:07:12,300 --> 00:07:14,640
to use in order to get a dependency.

105
00:07:14,640 --> 00:07:21,030
We need to request it via its injection token in order to identify the correct injection token.

106
00:07:21,030 --> 00:07:24,980
We are going to add here an extra decorator is called at inject.

107
00:07:24,990 --> 00:07:30,680
And here inside the decorator, we are going to specify the name of the injection token that we need.

108
00:07:30,690 --> 00:07:34,730
We need to do this here at the level of the application component class.

109
00:07:34,740 --> 00:07:38,840
And we also need to do it here at the level of the card component.

110
00:07:38,850 --> 00:07:42,890
So we have export it here, our courses, service injection token.

111
00:07:42,900 --> 00:07:49,440
So if we now switch here to the card component, we are going to again apply that, inject the decorator

112
00:07:49,440 --> 00:07:55,410
and we are going to specify that we want the courses service injection token with is in place.

113
00:07:55,410 --> 00:08:02,450
We are now ready to try out our application and this time around everything is working again as expected.

114
00:08:02,460 --> 00:08:09,360
So with this provider that we wrote here manually, we managed to inject the courses service everywhere

115
00:08:09,360 --> 00:08:10,260
that it was needed.

116
00:08:10,410 --> 00:08:16,620
Let's now quickly summarize everything that we learned in this lesson so we know the dependency injection

117
00:08:16,620 --> 00:08:21,510
system is what allows ANGULAR to inject the dependencies here in the constructor.

118
00:08:21,690 --> 00:08:28,500
Every dependency has internally an injection token, which is like a unique identifier for the dependency

119
00:08:28,530 --> 00:08:34,470
and a provider factory function that is called in order to create dependency.

120
00:08:34,470 --> 00:08:41,549
Even when we don't write these things ourselves, Angular is applying some defaults and it's doing exactly

121
00:08:41,549 --> 00:08:42,900
that under the hood.

122
00:08:42,900 --> 00:08:49,860
It's creating either an injection token implicitly or it's creating a provider function implicitly.

123
00:08:49,890 --> 00:08:51,960
We are just not aware of it directly.

124
00:08:51,960 --> 00:08:54,480
But that's what's going on under the hood.

125
00:08:54,480 --> 00:09:00,510
After configuring the angular dependency injection system with a provider like we have done here, we

126
00:09:00,510 --> 00:09:03,780
then need to specify whenever we need the dependency.

127
00:09:03,780 --> 00:09:06,540
What is the injection token that we need?

128
00:09:06,690 --> 00:09:12,690
Notice that before our version of the application was much simpler, we didn't have here a provider

129
00:09:12,690 --> 00:09:13,290
function.

130
00:09:13,290 --> 00:09:20,790
We didn't know about injection tokens and we didn't have to write our own providers or specify the injection

131
00:09:20,790 --> 00:09:21,300
token.

132
00:09:21,330 --> 00:09:28,050
Let's go back step by step from these more complex example to that simplified scenario and understand

133
00:09:28,050 --> 00:09:32,140
how angular is making the dependency injection work under the hood.

134
00:09:32,340 --> 00:09:34,800
This is coming right up in the next lesson.