1 00:00:03,700 --> 00:00:09,940 Hello, everyone, and welcome back in the U.S., we are going to do a deep dive on the angular dependency 2 00:00:09,940 --> 00:00:11,110 injection system. 3 00:00:11,220 --> 00:00:15,460 The dependency injection is a critical part of the angular ecosystem. 4 00:00:15,490 --> 00:00:17,530 We have been using it so far here. 5 00:00:17,530 --> 00:00:23,440 For example, we are injecting the courses service directly here in our application component. 6 00:00:23,530 --> 00:00:26,140 This is what dependency injection looks like. 7 00:00:26,140 --> 00:00:31,600 Any dependencies that are given class has such as, for example, a component or a directive can be 8 00:00:31,600 --> 00:00:34,220 injected directly via the constructor. 9 00:00:34,300 --> 00:00:39,040 So the component class itself does not know how to create its dependency. 10 00:00:39,040 --> 00:00:44,800 The this service dependency is provided to the class via the constructor. 11 00:00:44,830 --> 00:00:51,160 A dependency class such as for example, the courses service class can also have its own dependencies 12 00:00:51,160 --> 00:00:53,970 injected in the constructor and so forth. 13 00:00:53,980 --> 00:00:57,730 These dependency injection system has multiple advantages. 14 00:00:57,760 --> 00:01:03,430 For example, it's easier to test these classes because we can have here injected a dependency that 15 00:01:03,430 --> 00:01:08,950 we don't know if it's an actual service, that it's connecting to the Bakken and fetching data or a 16 00:01:08,950 --> 00:01:10,850 mock test implementation. 17 00:01:10,870 --> 00:01:13,990 So that's one of the benefits of dependency injection. 18 00:01:14,110 --> 00:01:20,020 Another benefit in the context of building you guys with a lot of nested components is that if, for 19 00:01:20,020 --> 00:01:25,480 example, one of our dependencies, such as, for example, the course care that these deeply nested 20 00:01:25,480 --> 00:01:32,470 inside our UI, if that dependency also leads to this service, we can inject it here directly via the 21 00:01:32,470 --> 00:01:36,520 constructor and we don't have to pass it as an input property. 22 00:01:36,520 --> 00:01:42,250 If in order to access our dependencies, we would need to receive them as inputs, that would mean that 23 00:01:42,250 --> 00:01:46,150 we would have to pass the dependency all the way down the componentry. 24 00:01:46,180 --> 00:01:51,550 In this case, they're only a couple of levels, but in a more complex way, you will have several levels 25 00:01:51,550 --> 00:01:57,250 of component nesting, which would mean that these courses service here would have to be passed all 26 00:01:57,250 --> 00:02:03,100 the way down the componentry until it reaches the leaf component, such as, for example, the Corsair 27 00:02:03,130 --> 00:02:08,330 component, as you can imagine, that would very quickly become cumbersome for larger applications. 28 00:02:08,350 --> 00:02:15,130 So this way of injecting dependencies transparently via the constructor is much easier to reason about 29 00:02:15,130 --> 00:02:16,150 and maintain. 30 00:02:16,180 --> 00:02:19,670 Let's now think about how angular obtains these dependency. 31 00:02:19,690 --> 00:02:23,260 So again, the class does not instantiate the courses service. 32 00:02:23,260 --> 00:02:26,320 It gets the courses service injected by ANGULAR. 33 00:02:26,350 --> 00:02:30,640 The question here is how is angular creating these courses service? 34 00:02:30,880 --> 00:02:36,520 Well, we see that we were using here this special provide in syntax that we say that will get back 35 00:02:36,520 --> 00:02:37,510 to later on. 36 00:02:37,600 --> 00:02:40,820 Now is the moment to understand exactly what is going on here. 37 00:02:40,930 --> 00:02:47,210 Let's for a moment remove here this provide in and run our application to see what happens. 38 00:02:47,260 --> 00:02:51,470 So if we lower the application, we can see that now the application is broken. 39 00:02:51,490 --> 00:02:56,350 And if we have a look here at our console, we are going to see the following error message. 40 00:02:56,470 --> 00:02:59,200 No provider for courses service. 41 00:02:59,230 --> 00:03:02,470 So let's understand exactly what this means. 42 00:03:02,500 --> 00:03:07,810 So what this message means is that somewhere in our application, for example here, the application 43 00:03:07,810 --> 00:03:14,710 component we are trying to inject here a dependency called courses service and the dependency injection 44 00:03:14,710 --> 00:03:18,990 system of ANGULAR does not know how to create these dependency. 45 00:03:19,000 --> 00:03:23,000 And it says so with the message no provider for courses service. 46 00:03:23,020 --> 00:03:26,050 So the question here is, what is the provider? 47 00:03:26,260 --> 00:03:33,000 The provider is what creates the dependency on behalf of the angular dependency injection system. 48 00:03:33,010 --> 00:03:37,660 So somehow the dependency injection system needs to create an instance. 49 00:03:37,660 --> 00:03:42,550 Of course, this service, the way to create that dependency is the provider. 50 00:03:42,700 --> 00:03:49,570 The provider will give the angular dependency injection system a function known as a factory function 51 00:03:49,720 --> 00:03:51,910 that creates a dependency. 52 00:03:51,940 --> 00:03:58,150 The angular dependency injection system will then call the factory function, generates the dependency 53 00:03:58,150 --> 00:04:03,490 when it sees that it needs it and passes it on to parts of the application, such as, for example, 54 00:04:03,490 --> 00:04:06,340 the application component via the constructor. 55 00:04:06,400 --> 00:04:12,580 So in order to solve this error, we need to create a dependency injection provider for these class 56 00:04:12,580 --> 00:04:13,780 courses service. 57 00:04:13,780 --> 00:04:16,170 And that is exactly what we were going to do. 58 00:04:16,180 --> 00:04:22,360 We are going to write this provider manually as an exercise to understand how the dependency injection 59 00:04:22,360 --> 00:04:23,500 system works. 60 00:04:23,530 --> 00:04:30,010 This error here and the provider for this service also means that before when we were using this special 61 00:04:30,010 --> 00:04:37,450 syntax provided in route, we were implicitly behind the scenes and without knowing we were creating 62 00:04:37,450 --> 00:04:40,990 the provider, we are going to revisit this syntax later on. 63 00:04:41,110 --> 00:04:45,280 This syntax allows us to create what is known as a three shakal provider. 64 00:04:45,370 --> 00:04:51,640 But before understanding the syntax, we need to understand exactly what the provider is by writing 65 00:04:51,640 --> 00:04:52,750 it ourselves. 66 00:04:52,810 --> 00:04:57,520 Let's now fix the error by manually creating our own provider. 67 00:04:57,640 --> 00:05:00,340 This is coming right up in the next lesson.