1
00:00:03,730 --> 00:00:05,950
Hello, everyone, and welcome back.

2
00:00:05,980 --> 00:00:10,960
In this lesson, we are going to continue to extend the EPA of the crisis service and we're going to

3
00:00:10,960 --> 00:00:17,380
have it, a data modification method we have here in the title input works that allows us to change

4
00:00:17,380 --> 00:00:19,420
the title of the current course.

5
00:00:19,420 --> 00:00:24,510
We are going to take the new value of the title and we are going to send it to the back end using an

6
00:00:24,520 --> 00:00:25,510
IEP call.

7
00:00:25,630 --> 00:00:32,380
Let's start by defining here the EPA of the service where we are going to implement these data modification

8
00:00:32,380 --> 00:00:37,830
operations we are going to have here and new methods and we are going to call it safe course.

9
00:00:37,840 --> 00:00:41,350
We are now going to define one parameter of type course.

10
00:00:41,740 --> 00:00:46,660
Now, let's call these EPA here from our application component.

11
00:00:46,840 --> 00:00:52,540
Let's switch here to the template and see that we need to detect here the event three years whenever

12
00:00:52,540 --> 00:00:54,430
we hit here, the safe course.

13
00:00:54,440 --> 00:01:00,100
But then if we expect this version of the cost curve, we're going to see that we have here a course

14
00:01:00,100 --> 00:01:01,500
changed event.

15
00:01:01,570 --> 00:01:06,640
So this code version is slightly different than the one that you have built previously.

16
00:01:06,640 --> 00:01:10,690
In this course, we are going to detect this event.

17
00:01:10,690 --> 00:01:16,690
And this event, as we can see, is going to be emitting the course that it receives this input.

18
00:01:16,690 --> 00:01:21,100
So the course linked to the car containing the modified title.

19
00:01:21,250 --> 00:01:28,480
So as you can see, we have used here the objects press operator and we have created a copy of the course.

20
00:01:28,480 --> 00:01:30,430
Then we have overeaten.

21
00:01:30,440 --> 00:01:37,960
Only the description property, the description property is coming here from on Save Click and it corresponds

22
00:01:37,960 --> 00:01:41,570
to the value of the course title input box.

23
00:01:41,590 --> 00:01:46,270
So here it is, the edit title input box we are going to grab here.

24
00:01:46,270 --> 00:01:53,470
It's value pass to on save click and from here we are going to emit these inner course changed object.

25
00:01:53,500 --> 00:01:59,270
This means that going back here to our application component, we simply have to subscribe to this course,

26
00:01:59,290 --> 00:02:05,500
change the event and react to it by calling here a method on our application component.

27
00:02:05,530 --> 00:02:08,100
We are going to call this method simply save.

28
00:02:08,139 --> 00:02:15,370
This is going to take as input a course and this is going to be received here from the changed event.

29
00:02:15,370 --> 00:02:19,180
We are going to call here the save method and we're going to pass it.

30
00:02:19,240 --> 00:02:27,090
The course emitted by the event, which is available via the Doppler event variable, as we have seen.

31
00:02:27,100 --> 00:02:33,970
So now inside here, our save method, we are going to be able to call our coarsest service safe course

32
00:02:33,970 --> 00:02:36,720
method and pass in here the course.

33
00:02:36,730 --> 00:02:39,390
Let's now implement the save course method.

34
00:02:39,400 --> 00:02:46,150
Here again, we are going to be calling the HTP clay and we are going to be doing an HTP protocol.

35
00:02:46,150 --> 00:02:51,910
So the same way that we can do aget, we can do a post, can do a delete, and we can also do aput,

36
00:02:51,910 --> 00:02:53,590
which is what we are doing here.

37
00:02:53,620 --> 00:02:58,920
So here inside our protocol, we are going to be specifying the world that we want to hit.

38
00:02:58,930 --> 00:03:05,380
So we are going to be hitting the URL, slash EPA slash courses, and here we are going to be specifying

39
00:03:05,380 --> 00:03:11,030
the idea of the course which we have available via the course input variable of this method.

40
00:03:11,100 --> 00:03:16,720
Notice that the program is not yet compiling, and that's because we need to pass in here a second argument,

41
00:03:16,720 --> 00:03:19,200
which is the body of the protocol.

42
00:03:19,210 --> 00:03:21,400
So now we have a compiling program.

43
00:03:21,410 --> 00:03:28,090
We are going to just like before return these observable here as the output of C, of course.

44
00:03:28,100 --> 00:03:35,140
And in order to trigger the safe course HTP request, we need to subscribe here to this observable just

45
00:03:35,140 --> 00:03:35,940
like before.

46
00:03:35,950 --> 00:03:40,370
So if we don't subscribe, nothing will happen and the course will not be saved.

47
00:03:40,390 --> 00:03:45,020
Let's look here to the council that the course was saved successfully.

48
00:03:45,040 --> 00:03:49,300
Let's now try results and confirm that everything is working as expected.

49
00:03:49,330 --> 00:03:52,060
We are going to rename here to the title of the course.

50
00:03:52,060 --> 00:03:54,940
Let's say that we are going to call it angular core course.

51
00:03:54,940 --> 00:03:58,830
We're going to hit save course and we're going to inspect here to the council.

52
00:03:58,840 --> 00:04:04,740
So here at the bottom of the console and I'm going to click Save Kosygin, we can see that we are saving

53
00:04:04,750 --> 00:04:06,180
this course to the back end.

54
00:04:06,190 --> 00:04:11,050
And if we head over here to the terminal, we're going to see here that in the window that is running

55
00:04:11,050 --> 00:04:17,649
our small HTP rest server, we're going to have confirmation that we are saving the course to the back

56
00:04:17,649 --> 00:04:17,940
end.

57
00:04:17,980 --> 00:04:22,830
Now, notice what happens if we re lower the application instead of angular deep.

58
00:04:22,900 --> 00:04:26,340
They've we have the new title, angular core course.

59
00:04:26,350 --> 00:04:33,910
So this confirms that our request was correctly processed and the new data was saved in the server as

60
00:04:33,910 --> 00:04:34,630
expected.

61
00:04:34,780 --> 00:04:40,570
Now, let's say that in this put request that we are doing here, Insaaf course, we would like to specify

62
00:04:40,570 --> 00:04:42,400
a customer behavior.

63
00:04:42,460 --> 00:04:48,010
Let's say that we needed to add to these requests and authentication here that is identifying the user

64
00:04:48,010 --> 00:04:52,120
so that the server can know if the operation is allowed or not.

65
00:04:52,150 --> 00:04:55,540
So in order to do that, we are going to define here a new constant.

66
00:04:55,540 --> 00:04:59,830
You're going to call it headers, and these will contain our HTP headers.

67
00:04:59,840 --> 00:05:00,250
We can.

68
00:05:00,660 --> 00:05:08,370
Our HTP Heather's in a very similar way to how we were building our HTP parameters using a class called

69
00:05:08,370 --> 00:05:13,200
HTP, Heathers D class also has an immutability based API.

70
00:05:13,200 --> 00:05:18,990
So we are going to call here our set method and we are going to specify here the name of the custom.

71
00:05:18,990 --> 00:05:24,770
Heather, we are going to follow a convention and prefix with an X that the custom Heather.

72
00:05:24,810 --> 00:05:27,570
We are going to call it the off indication, Heather.

73
00:05:27,570 --> 00:05:34,360
And let's say that we will have the value of a cookie that would allow us to authenticate this user.

74
00:05:34,380 --> 00:05:41,040
Then we would specify here the user idea now that we have here some headers already present, we need

75
00:05:41,040 --> 00:05:44,220
to pass them here to our people to request.

76
00:05:44,260 --> 00:05:50,030
We are going to do that here via the first argument of the put call into an object.

77
00:05:50,040 --> 00:05:52,500
And here we have several options available.

78
00:05:52,500 --> 00:05:53,340
In this case.

79
00:05:53,340 --> 00:05:56,810
We are going to specify the headers property and we're going to pass it.

80
00:05:56,820 --> 00:06:04,170
This instance of HTP headers, let's now confirm that our HTP here is being properly filled in.

81
00:06:04,180 --> 00:06:10,110
We want to switch to a larger window relo of the application and we are going to perform here another

82
00:06:10,110 --> 00:06:11,040
safe call.

83
00:06:11,040 --> 00:06:15,330
We are going to clear here the console and let's rename this to the angular core.

84
00:06:15,390 --> 00:06:17,760
Deep Dive are going to save our course.

85
00:06:17,760 --> 00:06:23,460
And here we have our put request if we click on it and we have a look here at the request, headers

86
00:06:23,600 --> 00:06:29,160
will see that indeed we have here our custom, however correctly, filled in as expected.

87
00:06:29,280 --> 00:06:35,400
As we can see, Angular makes it really simple to build our own custom injectable services.

88
00:06:35,430 --> 00:06:39,210
This is all based on the angular dependency injection mechanism.

89
00:06:39,390 --> 00:06:45,480
Now that we know how to build our own angular custom service, what we're going to do next is we are

90
00:06:45,480 --> 00:06:49,890
going to do a deep dive into the angular dependency injection system.

91
00:06:50,250 --> 00:06:57,150
We're going to understand exactly how this configuration here inside the injectable decorator works,

92
00:06:57,150 --> 00:07:00,450
the provided in property and much more.