1 00:00:03,760 --> 00:00:05,920 Hello, everyone, and welcome back. 2 00:00:05,950 --> 00:00:11,470 In this lesson, we are going to cover a more advanced dependency injection case where we'll see how 3 00:00:11,470 --> 00:00:15,320 to inject something that is not plain TypeScript Glass. 4 00:00:15,430 --> 00:00:21,460 So, so far, the services that we have been injecting are instances of a class service. 5 00:00:21,470 --> 00:00:26,350 But there could be situations where we would like to inject something such as, for example, a plain 6 00:00:26,350 --> 00:00:31,200 JavaScript object containing, for example, some application with configuration. 7 00:00:31,210 --> 00:00:36,940 Let's then see how could we implement this use case first, let's create here a new file. 8 00:00:36,950 --> 00:00:38,690 We are going to call it configured. 9 00:00:38,710 --> 00:00:39,130 Yes. 10 00:00:39,130 --> 00:00:42,830 And this is going to contain our application with configuration. 11 00:00:42,850 --> 00:00:49,780 Let's start first by defining here an object type, and it's going to define what the application configuration 12 00:00:49,780 --> 00:00:50,660 contains. 13 00:00:50,680 --> 00:00:55,360 Let's say that we have here an epidural property, which is a string. 14 00:00:55,360 --> 00:00:58,990 These would contain the Eurail of our back in Epper. 15 00:00:58,990 --> 00:01:02,980 That would point either to a test environment or to the production environment. 16 00:01:03,190 --> 00:01:06,940 Let's say also that our application has some caching involved. 17 00:01:06,940 --> 00:01:13,030 Let's say that we get here a certain amount of courses we're going to define here the size of the cache. 18 00:01:13,030 --> 00:01:18,210 We are going to create the property called course cache size, and we are going to make it a number. 19 00:01:18,220 --> 00:01:22,570 So now we have here the definition of our application with configuration. 20 00:01:22,690 --> 00:01:24,930 Let's create an instance of this type. 21 00:01:24,940 --> 00:01:30,160 We are going to create here a constant that we are going to call AB config and we are going to assign 22 00:01:30,160 --> 00:01:30,730 it here. 23 00:01:30,880 --> 00:01:33,100 The application config type. 24 00:01:33,100 --> 00:01:36,390 We are going to define here the values of these properties. 25 00:01:36,400 --> 00:01:38,350 Let's start with the EPA, Eurail. 26 00:01:38,500 --> 00:01:42,190 We are going to point these to localhost 9000. 27 00:01:42,340 --> 00:01:48,340 And let's define also here the second property course cache says we are going to assign it the value 28 00:01:48,340 --> 00:01:49,120 of ten. 29 00:01:49,300 --> 00:01:55,920 Now, let's take this plain JavaScript objects and let's make it injectable in our application. 30 00:01:55,930 --> 00:01:59,260 We are going to define for that an injection token. 31 00:01:59,270 --> 00:02:05,860 So as we know, everything that gets injected anywhere on an angular application has an associative 32 00:02:05,860 --> 00:02:07,140 injection token. 33 00:02:07,150 --> 00:02:09,389 So we are going to define here our token. 34 00:02:09,400 --> 00:02:14,010 We are going to define it as a constant and we are going to call it the config token. 35 00:02:14,140 --> 00:02:20,410 We are going to instantiate the class injection token and we are going to pass it a parametric type. 36 00:02:20,410 --> 00:02:25,060 So the parametric type is the type of the thing that is getting injected. 37 00:02:25,070 --> 00:02:28,160 So it's our application config object. 38 00:02:28,180 --> 00:02:33,130 Let's also add here a unique string that uniquely identifies this token. 39 00:02:33,130 --> 00:02:36,220 We are simply going to call it config tokin as well. 40 00:02:36,430 --> 00:02:39,970 Now, let's add this token to the dependency injection system. 41 00:02:39,970 --> 00:02:46,810 Let's, for example, use here our application route component and let's have here our dependency injection 42 00:02:46,810 --> 00:02:47,550 provider. 43 00:02:47,650 --> 00:02:50,190 We are going to use here a configuration object. 44 00:02:50,200 --> 00:02:56,470 We are going to see that we are providing this particular config token and we are going to provide here 45 00:02:56,470 --> 00:02:58,240 the value that is getting injected. 46 00:02:58,250 --> 00:03:06,410 We could use a factory method in order to create a function that would return the config value immediately. 47 00:03:06,430 --> 00:03:13,030 So this would look something like this is a function with no dependencies that simply returns the value 48 00:03:13,030 --> 00:03:15,640 of our application config object. 49 00:03:15,640 --> 00:03:18,120 And with this, we have configured our provider. 50 00:03:18,130 --> 00:03:19,240 Let's try this out. 51 00:03:19,240 --> 00:03:25,570 Let's first remove here a couple of logging statements that would otherwise pollute the console log. 52 00:03:25,570 --> 00:03:29,590 And let's inject here our global configuration object. 53 00:03:29,600 --> 00:03:32,190 So we are going to define here a private variable. 54 00:03:32,230 --> 00:03:37,800 It's going to be a variable named config with this type here app config. 55 00:03:37,900 --> 00:03:42,040 Let's have here some logging to see if this is working correctly. 56 00:03:42,070 --> 00:03:45,640 We are going to print to the console the configuration object. 57 00:03:45,700 --> 00:03:50,590 Now, if we try this out without further modifications, we are going to see that we are going to get 58 00:03:50,590 --> 00:03:55,020 an error and our application is going to crash reinspect here to the console. 59 00:03:55,030 --> 00:04:00,090 We are going to see that we cannot resolve all the parameters for this constructor here. 60 00:04:00,190 --> 00:04:06,940 So somehow the dependency injection system can't find what token to associate to this app config type. 61 00:04:06,940 --> 00:04:12,670 And that is because we have defined here our token as being of type, config, token. 62 00:04:12,820 --> 00:04:19,510 In this case, because Akinfeev is an object type and not a typescript class, we cannot use it as a 63 00:04:19,510 --> 00:04:21,040 dependency injection token. 64 00:04:21,070 --> 00:04:28,930 These interface type cannot be used as the unique GI of a given injectable in our dependency injection 65 00:04:28,930 --> 00:04:29,460 system. 66 00:04:29,530 --> 00:04:33,390 That's because the interface does not actually exist at runtime. 67 00:04:33,400 --> 00:04:35,700 It's a compile time construct only. 68 00:04:35,830 --> 00:04:41,500 So in order to specify the token that we need, we are going to need the inject the character that we 69 00:04:41,500 --> 00:04:42,660 have used before. 70 00:04:42,730 --> 00:04:48,520 So if we now try this out, we are going to see that this time around our configuration object gets 71 00:04:48,520 --> 00:04:49,840 correctly injected. 72 00:04:49,870 --> 00:04:51,910 The application is up and running again. 73 00:04:51,910 --> 00:04:57,640 And we have here on the console the global configuration object correctly printed out to the screen. 74 00:04:57,820 --> 00:05:00,420 As we can see, the object decorator is. 75 00:05:00,520 --> 00:05:07,720 Useful in these cases where we cannot use a class as a dependency injection token, in those cases, 76 00:05:07,720 --> 00:05:12,080 we need to specify the token here manually using the inject decorated. 77 00:05:12,220 --> 00:05:15,030 Now, another nice feature here of our provider. 78 00:05:15,040 --> 00:05:20,610 We have created here a factory method that simply returns our configuration object. 79 00:05:20,620 --> 00:05:26,560 We can instead use another property that is available here, which is called use value. 80 00:05:26,710 --> 00:05:32,650 So if we pass in here our application config object, this is going to be the value injected. 81 00:05:32,650 --> 00:05:34,800 Whenever this token gets requested. 82 00:05:34,840 --> 00:05:39,510 Let's try it out so we can see our application is still working correctly. 83 00:05:39,580 --> 00:05:46,250 And if we check here the console, no errors occur in our configuration object is still being correctly 84 00:05:46,250 --> 00:05:47,800 injected as expected. 85 00:05:47,920 --> 00:05:49,600 Now notice the following. 86 00:05:49,630 --> 00:05:55,330 This provider that we have written here, as we have learned before, is not three Shakal. 87 00:05:55,450 --> 00:06:01,570 This means that if we remove here this dependency from the application and we reload the application, 88 00:06:01,720 --> 00:06:07,100 these token configuration object is still getting added to the application bundle. 89 00:06:07,150 --> 00:06:12,390 Let's quickly confirm that we are going to switch here to a larger window and we are going to open here 90 00:06:12,410 --> 00:06:16,070 the dev tools not on the console there, but on the source system. 91 00:06:16,090 --> 00:06:22,530 We are going to quickly inspect here the main Dotty's bundle, which contains our application code. 92 00:06:22,630 --> 00:06:28,120 So as you can see, if we scroll down, we're going to see that our application configuration object 93 00:06:28,120 --> 00:06:33,850 and the configuration token are still getting included here in the application bundle, even though 94 00:06:33,850 --> 00:06:36,370 these are not being injected anywhere. 95 00:06:36,460 --> 00:06:41,820 If you cannot find them here at the beginning of the bundle, you can use here defined search box, 96 00:06:41,830 --> 00:06:45,010 you should search for config, underscore tokin. 97 00:06:45,010 --> 00:06:51,320 The type of the configuration object, which is app config won't be found anywhere in the bundle. 98 00:06:51,340 --> 00:06:54,140 This is a compile time construct only. 99 00:06:54,310 --> 00:06:58,200 Now let's refactor our provider and make it three checkable. 100 00:06:58,210 --> 00:07:04,060 We are going to remove here this configuration object and we're going to delete here the provider's 101 00:07:04,060 --> 00:07:06,640 property in order to make this token three. 102 00:07:06,640 --> 00:07:11,200 Shakiba, we are going to use here this second optional argument here. 103 00:07:11,290 --> 00:07:17,050 In the token definition, we are going to start by specifying here the provided in property are going 104 00:07:17,050 --> 00:07:19,950 to see that this is a global injectable. 105 00:07:19,960 --> 00:07:21,040 It's a singleton. 106 00:07:21,040 --> 00:07:24,040 It's the same instance in the whole application. 107 00:07:24,070 --> 00:07:27,490 And we're going to specify here the factory function. 108 00:07:27,490 --> 00:07:34,270 So this factory function is not going to have any elements and it's going to return directly our application 109 00:07:34,270 --> 00:07:40,300 config with this in place, if we know relo of our application and we expect, again, the application 110 00:07:40,300 --> 00:07:46,540 bundle, we are going to see that we have no occurrences of the application global configuration object. 111 00:07:46,570 --> 00:07:51,630 This was not included in the bundle this time around, which is exactly what we wanted. 112 00:07:51,670 --> 00:07:55,110 So these injectable is still available if we need it. 113 00:07:55,120 --> 00:08:01,960 So if we included here, for example, let's inject here again the application configuration object 114 00:08:01,960 --> 00:08:08,470 and let's add here the inject the creator and let's bring it here to the console to make sure that it's 115 00:08:08,470 --> 00:08:10,800 indeed getting correctly injected. 116 00:08:10,990 --> 00:08:16,180 If we try this out, we will see that the application is still working as expected. 117 00:08:16,180 --> 00:08:22,000 And the respect here, the application in the console, we are going to notice the global configuration 118 00:08:22,000 --> 00:08:24,130 object is being correctly injected. 119 00:08:24,140 --> 00:08:27,070 So no errors occurred here in the sources there. 120 00:08:27,130 --> 00:08:33,580 If we expect here our main bundle, then we are going to see that the configuration object and the configuration 121 00:08:33,580 --> 00:08:37,470 token have been this time around included in the bundle. 122 00:08:37,480 --> 00:08:41,380 So this is the big benefit of three Shakal providers. 123 00:08:41,380 --> 00:08:48,490 These services are only included in the bundle if they are injected, otherwise they will not be included 124 00:08:48,490 --> 00:08:49,090 in the bundle. 125 00:08:49,090 --> 00:08:53,500 So we will have a smaller bundle and a more performance application. 126 00:08:53,590 --> 00:08:57,820 Let's now continue our deep dive into angular dependency injection. 127 00:08:57,820 --> 00:09:04,510 We are now going to cover certain dependency injection decorator's that are used in special cases.