1 00:00:03,820 --> 00:00:06,130 Hello, everyone, and welcome back. 2 00:00:06,160 --> 00:00:13,120 In the last lesson, we saw how to use a built in angular service HTP client, as you can see, we just 3 00:00:13,120 --> 00:00:19,360 injected here in our constructor and we have access here to an EPA that we are going to do now is we 4 00:00:19,360 --> 00:00:22,600 are going to create our own custom angular service. 5 00:00:22,660 --> 00:00:28,030 This is going to be a custom angular service that we are going to write ourselves from scratch. 6 00:00:28,240 --> 00:00:31,660 Let's then see what an angular custom service looks like. 7 00:00:31,660 --> 00:00:37,210 We are going to head over here to our terminal and we are going to quickly scaffold a new service by 8 00:00:37,210 --> 00:00:40,150 running the following command and generate. 9 00:00:40,150 --> 00:00:46,060 We are going to use the service template and we're going to place the service in a service folder. 10 00:00:46,120 --> 00:00:48,720 This is going to be the course service. 11 00:00:48,730 --> 00:00:52,530 This scaffolding command is going to generate here a couple of files. 12 00:00:52,540 --> 00:00:55,590 Let's have a look here at the courses service file. 13 00:00:55,600 --> 00:01:02,610 So as you can see, this is a plain typescript class where we have added here an injectable decorator. 14 00:01:02,680 --> 00:01:11,110 This means that this service here is injectable in our component, just like the HTP client going back 15 00:01:11,110 --> 00:01:13,240 here to our coarsest service. 16 00:01:13,250 --> 00:01:19,740 You can see here that inside the injectable decorator we have here are provided in property. 17 00:01:20,080 --> 00:01:25,290 We are going to cover in detail what this property means later in this course. 18 00:01:25,480 --> 00:01:32,080 Right now, what is important to retain is that this is an injectable service that is compatible with 19 00:01:32,080 --> 00:01:35,150 the angular dependency injection system. 20 00:01:35,260 --> 00:01:37,600 Let's talk a bit about dependency injection. 21 00:01:37,600 --> 00:01:43,690 So as you can see, our class here does not have to create its own dependencies, such as, for example, 22 00:01:43,840 --> 00:01:45,060 ETP client. 23 00:01:45,220 --> 00:01:52,330 This depends on the atypical end because it needs it internally in order to preform some of its functions. 24 00:01:52,510 --> 00:01:56,130 Now, the class will not create the HTP client. 25 00:01:56,140 --> 00:02:00,790 The class will be provided the ETP client via the constructor. 26 00:02:00,850 --> 00:02:07,360 Notice that the class does not know where the HTP client is coming from, how it was created, and it 27 00:02:07,360 --> 00:02:12,850 doesn't even know if this is a test implementation or if it's the real HTP client. 28 00:02:12,880 --> 00:02:19,810 All that it knows is that somehow this dependency was created and it was provided to the class via the 29 00:02:19,810 --> 00:02:20,550 constructor. 30 00:02:20,560 --> 00:02:23,350 So the class does not create its dependencies. 31 00:02:23,350 --> 00:02:28,960 It gets them injected via the constructor that is called dependency injection. 32 00:02:29,020 --> 00:02:35,230 ANGULAR has a powerful dependency injection system that we are going to cover it in detail in this course. 33 00:02:35,230 --> 00:02:42,190 This configuration property here means that we should create an instance of the service and only one 34 00:02:42,190 --> 00:02:48,600 instance, of course, is service and have it available at the root of the dependency injector. 35 00:02:48,730 --> 00:02:53,860 This means that there will be only one instance available for the whole application. 36 00:02:54,010 --> 00:03:00,310 If we head over here to our application component, we will see that we can even already inject this 37 00:03:00,310 --> 00:03:02,520 dependency here in the constructor. 38 00:03:02,530 --> 00:03:05,190 Let's try this out to see if this is working. 39 00:03:05,320 --> 00:03:12,460 We simply have to add here the courses service type annotation and this is all the information needed 40 00:03:12,460 --> 00:03:17,910 by ANGULAR in order to be able to inject here an instance, of course, this service. 41 00:03:17,920 --> 00:03:19,930 Let's then confirm that this is working. 42 00:03:19,930 --> 00:03:24,250 We are going to log here to the console the value of this service. 43 00:03:24,250 --> 00:03:29,800 If we know reload the application and we open the console, we are going to see that indeed we can see 44 00:03:29,800 --> 00:03:30,130 here. 45 00:03:30,130 --> 00:03:34,150 An instance, of course, is service injected via the constructor. 46 00:03:34,300 --> 00:03:40,300 Now, notice the following if we need here discuses service elsewhere, such as, for example, here 47 00:03:40,300 --> 00:03:45,120 in the course card component, we can add it here as a dependency in the constructor. 48 00:03:45,160 --> 00:03:51,040 Let's not confirm that the car service is also available for injection at the level of the course Garthe 49 00:03:51,040 --> 00:03:51,830 component. 50 00:03:51,940 --> 00:03:55,000 Let's now refresh the browser and try these out. 51 00:03:55,000 --> 00:03:57,160 We have here several logging statements. 52 00:03:57,160 --> 00:04:01,660 We have one coarsest service logging statement for the application component. 53 00:04:01,660 --> 00:04:08,230 And then we have here multiple logging occurrences of this line here, one for each character in our 54 00:04:08,230 --> 00:04:12,630 application, because as we can see, we have here multiple cards. 55 00:04:12,640 --> 00:04:19,089 Now, the question is, are these different instances of the courses service class or is this all the 56 00:04:19,089 --> 00:04:26,170 same instance due to our configuration here provided in root, we are sharing only one instance, as 57 00:04:26,170 --> 00:04:27,040 we have discussed. 58 00:04:27,040 --> 00:04:32,470 And the best way to confirm this is to have here some logging at the level of the constructor. 59 00:04:32,500 --> 00:04:38,620 We are going to log here simply creating this service and we are going to run these and see what we 60 00:04:38,620 --> 00:04:39,610 get in the console. 61 00:04:39,790 --> 00:04:45,880 The first statement that we would expect to see here is the creation of the service, and that is indeed 62 00:04:45,880 --> 00:04:46,420 the case. 63 00:04:46,420 --> 00:04:53,110 So here the constructor was called and again, it was called by angular and not by our application code. 64 00:04:53,110 --> 00:05:00,370 And we have here the injection of the application component courses service, which is the same instance. 65 00:05:00,490 --> 00:05:06,250 As the one that is getting injected here at the level of each Korsakov, the constructor, as we can 66 00:05:06,250 --> 00:05:12,520 see on the log, was only called once, which confirms to us that there is indeed only one instance. 67 00:05:12,520 --> 00:05:17,410 Of course, this service, these type of service is known as an application. 68 00:05:17,410 --> 00:05:21,400 Singleton Singleton simply means that there is only one instance. 69 00:05:21,550 --> 00:05:28,060 So now that we have here the skeleton implementation of our Cursi service and that we have an initial 70 00:05:28,060 --> 00:05:33,930 understanding of how dependency injection works, let's continue the implementation of this service. 71 00:05:34,180 --> 00:05:39,520 We are now going to see how can we implement our backend goal using this class.