1
00:00:00,150 --> 00:00:06,210
In this lecture, we are going to talk about one of the more bizarre features of angular a called dependency

2
00:00:06,210 --> 00:00:06,900
injection.

3
00:00:07,140 --> 00:00:09,510
First, let's talk about what we need.

4
00:00:09,750 --> 00:00:11,640
We have a service called modal.

5
00:00:11,790 --> 00:00:13,290
Open it in your editor.

6
00:00:15,750 --> 00:00:20,280
Services or objects that can be made available to any component of our app.

7
00:00:20,550 --> 00:00:25,020
In most cases, developers like to store global data in a service.

8
00:00:25,350 --> 00:00:30,780
The mobile service will be responsible for managing our models inside this class.

9
00:00:30,990 --> 00:00:35,340
Let's define our property called visible with an initial value of false.

10
00:00:37,860 --> 00:00:43,260
The property we've created will tell other components of the model should be shown or hidden.

11
00:00:43,620 --> 00:00:44,910
There's only one problem.

12
00:00:45,150 --> 00:00:48,960
We don't know how to expose this property to other components.

13
00:00:49,260 --> 00:00:54,270
Angular has a feature called dependency injection for addressing this problem.

14
00:00:55,580 --> 00:01:00,140
Dependency injection is a programming practice for creating objects.

15
00:01:00,410 --> 00:01:02,270
It's not specific to angular.

16
00:01:02,600 --> 00:01:08,390
If you have experience with object oriented programming, you may have run across this practice.

17
00:01:08,720 --> 00:01:11,360
It's a prevalent technique among languages.

18
00:01:11,690 --> 00:01:16,880
Angular implements dependency injection into a system automated for us.

19
00:01:17,480 --> 00:01:20,150
Dependency injection has two jobs.

20
00:01:20,390 --> 00:01:24,260
The first job is to create an object out of our classes.

21
00:01:24,620 --> 00:01:30,320
The second job is to pass on these objects to our components or classes that need them.

22
00:01:30,710 --> 00:01:32,420
Let me give you an analogy.

23
00:01:32,930 --> 00:01:37,040
One day you might want to go fishing before heading out to the lake.

24
00:01:37,130 --> 00:01:41,780
You will need some equipment, you will need a boat fishing rod and some bait.

25
00:01:42,170 --> 00:01:47,360
We would need to take the time to do research by the equipment and catch some bait.

26
00:01:47,690 --> 00:01:48,800
It's a lot of work.

27
00:01:49,100 --> 00:01:52,370
We need to do a lot of things before we can go fishing.

28
00:01:52,700 --> 00:01:55,270
This is life without dependency injection.

29
00:01:55,850 --> 00:01:59,840
On the other hand, we can rent this equipment from a local shop.

30
00:02:00,170 --> 00:02:02,090
It's a hassle free experience.

31
00:02:02,300 --> 00:02:05,810
We can go fishing right away after we're done fishing.

32
00:02:06,020 --> 00:02:08,210
Other people can use the same equipment.

33
00:02:08,479 --> 00:02:11,690
It's not our responsibility to obtain the equipment.

34
00:02:11,870 --> 00:02:14,540
We simply asked for it, and we're good to go.

35
00:02:14,930 --> 00:02:17,540
This is life with dependency injection.

36
00:02:18,110 --> 00:02:21,110
We can apply this analogy to the programming world.

37
00:02:21,320 --> 00:02:24,590
Whenever we're writing code, we will need dependencies.

38
00:02:24,950 --> 00:02:28,220
Typically, dependencies are defined as classes.

39
00:02:28,490 --> 00:02:31,920
What if we need an instance from a class in JavaScript?

40
00:02:31,940 --> 00:02:37,340
We must constantly create new objects in our components by writing the new keyword.

41
00:02:37,610 --> 00:02:45,140
If the object we're creating has some configuration options, we would need to add them in angular supports

42
00:02:45,140 --> 00:02:46,550
dependency injection.

43
00:02:46,790 --> 00:02:50,300
Therefore, we don't need to create objects ourselves.

44
00:02:50,570 --> 00:02:53,180
They will automatically be created for us.

45
00:02:53,480 --> 00:02:55,910
Angular will manage our dependencies.

46
00:02:56,150 --> 00:02:59,180
If we need a dependency, we can ask angular.

47
00:02:59,510 --> 00:03:02,780
It'll inject B dependency wherever we ask for it.

48
00:03:04,100 --> 00:03:04,970
Enough theory.

49
00:03:05,150 --> 00:03:07,820
Let's see dependency injection in action.

50
00:03:08,180 --> 00:03:11,480
We will be working inside the modal component class.

51
00:03:13,950 --> 00:03:18,690
Inside the constructor function, we will add an argument called modal.

52
00:03:21,100 --> 00:03:28,150
We will annotate this argument with the mobile service class as we type, this class visual studio code

53
00:03:28,150 --> 00:03:29,890
will help the class for us.

54
00:03:30,160 --> 00:03:36,310
I always recommend letting VSC complete our code because it'll automatically import the class.

55
00:03:38,750 --> 00:03:40,910
If it doesn't, that's perfectly fine.

56
00:03:41,270 --> 00:03:46,070
You can always manually import this service after adding this argument.

57
00:03:46,100 --> 00:03:48,260
We will long be visible property.

58
00:03:50,870 --> 00:03:53,720
Believe it or not, this line of code will work.

59
00:03:53,870 --> 00:03:55,490
Let's refresh the browser.

60
00:03:57,990 --> 00:04:05,130
In the developer tools, we will open the console panel, the visible property is being logged at no

61
00:04:05,130 --> 00:04:09,090
point in our code did we create an instance of the mobile service.

62
00:04:09,480 --> 00:04:15,720
Angular created this instance for us and even knew to pass on the instance to our components.

63
00:04:17,470 --> 00:04:24,730
Angular is able to understand our app during compilation, our code runs through the TypeScript compiler

64
00:04:24,730 --> 00:04:27,520
to transform our code into JavaScript.

65
00:04:27,880 --> 00:04:30,730
It's not the only compiler our code runs through.

66
00:04:31,000 --> 00:04:32,980
Angular has its own compiler.

67
00:04:33,580 --> 00:04:38,710
During this process, it's going to look at the constructor functions of our classes.

68
00:04:39,070 --> 00:04:43,000
Angular uses the argument list to scan for dependencies.

69
00:04:43,510 --> 00:04:49,030
The most important part of the constructor function is the type annotations of our arguments.

70
00:04:49,450 --> 00:04:54,580
These annotations give insight into the type of dependencies our class needs.

71
00:04:55,000 --> 00:05:00,850
Based on the annotation, Angular will supply us with the correct instance for our arguments.

72
00:05:01,090 --> 00:05:05,470
In this example, Angular will give us an instance of the modal service.

73
00:05:05,710 --> 00:05:11,470
This entire process happens during compilation after our code is compiled.

74
00:05:11,590 --> 00:05:14,020
The app will be able to run in the browser.

75
00:05:14,350 --> 00:05:17,200
Dependency injection keeps our code clean.

76
00:05:17,620 --> 00:05:20,680
Instead of creating the service, we can ask for it.

77
00:05:20,980 --> 00:05:24,640
Our components never have to worry about creating classes.

78
00:05:24,940 --> 00:05:29,230
They can be supplied with everything they'll need in the following lecture.

79
00:05:29,320 --> 00:05:33,940
We are going to begin talking about how to make a class injectable.