1
00:00:03,700 --> 00:00:09,940
Hello, everyone, and welcome back in this lesson, we're going to talk about three Shakal providers.

2
00:00:09,940 --> 00:00:16,360
So far we have been using here to the providers property of the component decorator to generate our

3
00:00:16,360 --> 00:00:17,640
coarsest service.

4
00:00:17,690 --> 00:00:24,400
Let's talk about an alternative syntax for adding a service to our angular dependency injection system

5
00:00:24,550 --> 00:00:27,180
that does not involve the provider's property.

6
00:00:27,520 --> 00:00:31,840
These new Syntex is known as an angular clickable provider.

7
00:00:31,840 --> 00:00:37,360
And in order to understand the advantage when compared with these providers that we are declaring here,

8
00:00:37,450 --> 00:00:39,010
let's notice the following.

9
00:00:39,020 --> 00:00:44,230
We are defining the provider for this service here at the level of the application component.

10
00:00:44,290 --> 00:00:49,300
Now, in this particular application, we have injected here the service and we have used it.

11
00:00:49,420 --> 00:00:55,900
But there could be potentially situations where we define a service, for example, in a third party

12
00:00:55,900 --> 00:01:01,210
module, and that service might not get injected at all in our application.

13
00:01:01,480 --> 00:01:09,190
Imagine a generic component or a generic module that has a lot of services attached to it whenever we

14
00:01:09,190 --> 00:01:12,850
provide the service here at the level of the application component.

15
00:01:13,030 --> 00:01:19,480
We are always going to end up having the code for the unused service in the application bundle.

16
00:01:19,480 --> 00:01:26,590
So the application bundle will be larger because it contains several unused services that just happen

17
00:01:26,590 --> 00:01:29,580
to be provided by a third party component or module.

18
00:01:29,590 --> 00:01:32,620
But we have never used it in our application.

19
00:01:32,630 --> 00:01:38,980
So we want to avoid having to add that code to our application bundle is just going to make the application

20
00:01:38,980 --> 00:01:41,350
bundle larger without any need.

21
00:01:41,510 --> 00:01:48,520
Notice that if the service does not get injected anywhere on the application, then the angular dependency

22
00:01:48,520 --> 00:01:51,870
injection system is not going to instantiate the service.

23
00:01:51,880 --> 00:01:53,370
So that's not the problem.

24
00:01:53,380 --> 00:01:57,690
What we are trying to avoid is the inclusion of unused code in the bundle.

25
00:01:57,700 --> 00:02:04,060
The angular dependency injection system works in a lazy way, and if a service is not requested by any

26
00:02:04,060 --> 00:02:08,889
dependency, the provider will never get called and the service will never get creative.

27
00:02:08,889 --> 00:02:15,820
But with the syntax in the courses, service would still be added to our bundle, even if it would not

28
00:02:15,820 --> 00:02:16,480
be used.

29
00:02:16,480 --> 00:02:22,750
In order to solve this problem, we are going to remove the use of this provider's properties syntax

30
00:02:22,750 --> 00:02:29,440
and instead we are going to define here the configuration for our dependency injection system here at

31
00:02:29,440 --> 00:02:31,870
the level of the service itself.

32
00:02:31,900 --> 00:02:38,980
So if you remember before we were using here and options property bust in here to the injectable decorated

33
00:02:38,980 --> 00:02:44,920
and we were specifying here one of these properties provided in notice that we also have available here

34
00:02:44,950 --> 00:02:49,270
several other properties that are very similar to what we saw before.

35
00:02:49,300 --> 00:02:55,600
These are the properties that are needed for configuring a provider for the courses service class.

36
00:02:55,610 --> 00:02:58,030
We can specify here a factory function.

37
00:02:58,030 --> 00:02:59,980
We can specify here a class.

38
00:02:59,980 --> 00:03:02,820
We can even specify here a default value.

39
00:03:02,830 --> 00:03:09,400
These are the same properties that we were using here in our application component when defining a provider

40
00:03:09,400 --> 00:03:11,180
using the provider's property.

41
00:03:11,260 --> 00:03:16,890
So one of the properties that we can specify here, for example, is the use factory function.

42
00:03:16,900 --> 00:03:22,750
We can specify here a factory function that is going to instantiate a coarsest service.

43
00:03:22,750 --> 00:03:25,990
As we have seen, the factory function looks something like this.

44
00:03:26,140 --> 00:03:33,640
We can create here a function that takes a parameter, which is the HTP client and passes it on here

45
00:03:33,640 --> 00:03:35,350
to the courses service.

46
00:03:35,530 --> 00:03:41,050
Notice that we are getting here and er and this is because this configuration object has amendatory

47
00:03:41,050 --> 00:03:48,550
property called provided in, so provided in is going to help us determine where should this service

48
00:03:48,550 --> 00:03:49,840
be instantiated.

49
00:03:49,930 --> 00:03:56,470
As we have seen before, the angular dependency injection system is hierarchical so we can instantiate

50
00:03:56,470 --> 00:04:01,070
a service such as the courses service in multiple levels of the application.

51
00:04:01,210 --> 00:04:06,970
So here we are going to say that we want to inject this service in the very root of the application.

52
00:04:06,980 --> 00:04:13,820
So this service will be an application wide singleton that is available to the whole application.

53
00:04:13,840 --> 00:04:17,350
Notice that these factory function also needs dependencies.

54
00:04:17,350 --> 00:04:23,800
So just like before we can specify here and the array of dependencies and in this case, the courses

55
00:04:23,800 --> 00:04:26,530
service only needs here the ECB client.

56
00:04:26,550 --> 00:04:33,490
So we are declaring it here in the Depp's property and we d we have done something very similar to what

57
00:04:33,490 --> 00:04:34,270
we did before.

58
00:04:34,280 --> 00:04:40,290
We have manually written here a provider function for our courses, service dependency.

59
00:04:40,300 --> 00:04:41,230
Let's try this out.

60
00:04:41,230 --> 00:04:46,150
If we reload here, the application, we are going to see that everything is still working as expected.

61
00:04:46,150 --> 00:04:53,800
But this time around, our application component will only need the courses service if it gets it injected

62
00:04:53,800 --> 00:04:55,030
here in the constructor.

63
00:04:55,210 --> 00:04:59,950
If we would go to the whole application and we would remove all occurrences of the.

64
00:05:00,620 --> 00:05:07,370
Of the his service, then in the end, our application bundle will not include the code for this unused

65
00:05:07,370 --> 00:05:07,860
service.

66
00:05:07,880 --> 00:05:14,090
So that's the big advantage of using these three shaquill provider, Syntex, that we are using here

67
00:05:14,090 --> 00:05:20,900
inside the injectable decorated note is that just like before, we don't need to write here our factory

68
00:05:20,900 --> 00:05:22,520
provider function manually.

69
00:05:22,700 --> 00:05:29,630
We can instead use here the use clasp property just like we were doing before, and we can define here.

70
00:05:29,630 --> 00:05:31,570
The course is service Gless.

71
00:05:31,610 --> 00:05:35,980
So if we relo the application, everything is still working as expected.

72
00:05:35,990 --> 00:05:42,010
And as you can imagine, this property here use class just like before can even be admitted.

73
00:05:42,020 --> 00:05:49,130
And if we leave only here, the mandatory property provided in our application is still working correctly.

74
00:05:49,190 --> 00:05:56,930
The question here is when should we use the traditional syntax when compared here to the syntax using

75
00:05:56,930 --> 00:05:58,460
the provider's property?

76
00:05:58,490 --> 00:06:04,460
Well, if our service does not have any state and it's an application wide singleton, such as, for

77
00:06:04,460 --> 00:06:11,200
example, the this service, then we should always use the three provider syntax that we see here.

78
00:06:11,300 --> 00:06:18,920
We should only use the provider syntax if our service has some state that is specific to the component

79
00:06:18,920 --> 00:06:25,340
that we only want to have visible at the level of the component for singletons in general, we should

80
00:06:25,340 --> 00:06:32,540
always prefer the three syntax because it results in smaller application bundles and better runtime

81
00:06:32,540 --> 00:06:33,440
performance.

82
00:06:34,010 --> 00:06:38,560
Let's now continue our deep dive into the angular dependency injection system.

83
00:06:38,810 --> 00:06:43,930
We are going to talk about how to inject objects instead of instances of classes.

84
00:06:44,240 --> 00:06:49,750
This is going to be very useful if you want to inject some global configuration in our application.

85
00:06:49,820 --> 00:06:55,490
Also, we are going to cover a series of dependency injection related angular decorator's.