1
00:00:03,760 --> 00:00:05,860
Hello, everyone, and welcome back.

2
00:00:06,010 --> 00:00:11,260
Let's get started learning angular injectable services, and the first thing that we are going to do

3
00:00:11,260 --> 00:00:16,750
is we are going to learn how to use an already existing angular built in service.

4
00:00:17,140 --> 00:00:21,040
Later on, we are going to learn how to build our own custom services.

5
00:00:21,280 --> 00:00:26,590
The service that we are going to use is the angular HTP service that we are going to be using to fetch

6
00:00:26,590 --> 00:00:28,180
some data from the back end.

7
00:00:28,180 --> 00:00:33,690
In order to use a service, you can simply inject it into our class via the constructor.

8
00:00:33,740 --> 00:00:40,090
We simply have to declare here a reference to the service and Angular will know when it instantiates

9
00:00:40,090 --> 00:00:43,130
this class that it needs to provide this dependency.

10
00:00:43,150 --> 00:00:49,420
We're going to declare this as the EDP member variable and we are going to define here the type of the

11
00:00:49,420 --> 00:00:50,410
HTP variable.

12
00:00:50,410 --> 00:00:53,970
We're going to define it as being of type HTP clients.

13
00:00:53,980 --> 00:00:57,720
HCB client is the angular HTP service.

14
00:00:57,730 --> 00:01:02,290
Later in this course, we are going to learn how to build our own custom services.

15
00:01:02,320 --> 00:01:05,290
Right now, let's see how can we use this service?

16
00:01:05,290 --> 00:01:09,140
And the good place to use it is this engie undenied method.

17
00:01:09,280 --> 00:01:14,890
This is another life-cycle hook that we are introducing here, Engy, and in it is the best place to

18
00:01:14,890 --> 00:01:20,680
put some initialization logic, such as, for example, triggering an ECB Wacken call that is going

19
00:01:20,680 --> 00:01:23,350
to fetch the data that these component needs.

20
00:01:23,380 --> 00:01:29,230
This is a life-cycle hook, which means that this method is going to be called by the angular framework

21
00:01:29,230 --> 00:01:31,640
itself and not by us directly.

22
00:01:31,690 --> 00:01:37,750
This is not meant to be called from the application called in order to instantiate the application component

23
00:01:37,780 --> 00:01:44,110
less angular is going to invoke the constructor and pass the multiple dependencies once that is done.

24
00:01:44,130 --> 00:01:47,720
The next thing that ANGULAR is going to do is to call this method.

25
00:01:47,740 --> 00:01:53,300
So in this method of envisioning it, we are sure that you already have here something present.

26
00:01:53,410 --> 00:02:00,640
So this means that these engie on init method will already have available the EDP member variable because

27
00:02:00,640 --> 00:02:02,640
it's called after the constructor.

28
00:02:02,650 --> 00:02:06,060
Let's have a look to see what can we do with the HTP method.

29
00:02:06,190 --> 00:02:12,910
We can, for example, do an HTP get we are going to pass in here the warrell that we want to hit in

30
00:02:12,910 --> 00:02:17,250
our Backlund and we're going to use Agapa courses.

31
00:02:17,380 --> 00:02:22,170
Notice that what we get back here in our target method is going to be unobservable.

32
00:02:22,180 --> 00:02:27,790
So if we tried this out, just like it's nothing will happen because it's unobservable, we need to

33
00:02:27,790 --> 00:02:30,290
subscribe to it in order to trigger it.

34
00:02:30,400 --> 00:02:31,330
So let's do that.

35
00:02:31,340 --> 00:02:36,570
We are going to call here the subscribed method and we're going to arrive here a success handler.

36
00:02:36,580 --> 00:02:44,670
So this is a function that is going to get us back the value returned by the API call to slash courses.

37
00:02:44,740 --> 00:02:46,800
Let's quickly log it out to the console.

38
00:02:46,810 --> 00:02:53,770
We are going to log out here the value and before trying anything else, let's see how this is working.

39
00:02:53,770 --> 00:02:58,960
We are going to refresh the application and we're going to open here our console to see that indeed

40
00:02:58,960 --> 00:03:03,070
we have here an array containing 10 courses as expected.

41
00:03:03,080 --> 00:03:09,400
So this data came here from the back end and not from these hard coded data that we have assigned here

42
00:03:09,400 --> 00:03:11,380
to the courses member variable.

43
00:03:11,390 --> 00:03:16,540
Let's now, instead of locking out these values to the console, let's pass these values here to the

44
00:03:16,540 --> 00:03:18,010
courses member variable.

45
00:03:18,040 --> 00:03:20,940
So initially we are going to leave it undefined.

46
00:03:20,950 --> 00:03:27,310
This means that whenever we loop here through the array of courses, nothing is present and we get here

47
00:03:27,310 --> 00:03:28,330
a blank screen.

48
00:03:28,330 --> 00:03:35,200
And if now here in our Subscribe Success Handler, we take these value, which is the array of courses

49
00:03:35,200 --> 00:03:38,640
and we assign it here to the courses member variable.

50
00:03:38,650 --> 00:03:40,480
We are going to see that again.

51
00:03:40,480 --> 00:03:42,790
We get here some data on the screen.

52
00:03:42,790 --> 00:03:50,080
But this time around the data comes here from these HTP requests and not directly from hardcoded value,

53
00:03:50,080 --> 00:03:52,000
just like we were doing so far.

54
00:03:52,000 --> 00:03:57,930
And with this, we have completed our first EVP requests since we are doing here aget requests.

55
00:03:57,940 --> 00:04:01,610
Let's take a moment to see how could we add the get parameters to it.

56
00:04:01,660 --> 00:04:06,580
So in order to have parameters to a request, we are going to define here and you constantly are going

57
00:04:06,580 --> 00:04:13,000
to call it Purim's and we are going to instantiated using the angular ENTP Prem's utility class.

58
00:04:13,060 --> 00:04:19,810
Now this class has an immutability base dippie if we want to change here, the parameters that are being

59
00:04:19,810 --> 00:04:25,660
passed, which is currently no parameters at all, we need to call here the set method.

60
00:04:25,690 --> 00:04:28,370
Now let's have here initiatory parameter.

61
00:04:28,390 --> 00:04:32,860
So this is the name of the parameter that is going to show up on the query string.

62
00:04:32,890 --> 00:04:39,280
Let's say that we would like to get page number one of the list of courses willing to pass in here.

63
00:04:39,310 --> 00:04:41,410
The value this should be a string.

64
00:04:41,410 --> 00:04:46,810
So we are going to pass here, number one, and let's say that we will like to arrive here a second

65
00:04:46,810 --> 00:04:47,530
parameter.

66
00:04:47,650 --> 00:04:50,700
In that case, we are going to call set here again.

67
00:04:50,830 --> 00:04:56,830
Let's say that the second parameter is page size and we want the first 10 courses.

68
00:04:56,830 --> 00:04:59,880
So we have here a set of HTP parameters.

69
00:04:59,890 --> 00:05:00,400
We simply.

70
00:05:00,460 --> 00:05:05,850
I have to pass them to this get coal here in the second argument of the get requests.

71
00:05:05,860 --> 00:05:11,830
So we are going to pass in here an object this object can have here multiple properties, including

72
00:05:11,830 --> 00:05:16,950
here, the Purim's property that we are filling in with the constant.

73
00:05:16,990 --> 00:05:18,510
Let's now try these out.

74
00:05:18,520 --> 00:05:22,020
We are going to switch to a larger window and we are going to relocate here.

75
00:05:22,030 --> 00:05:27,730
The application we have here to the chrome that tools opens and we are filtering here for Asia calls

76
00:05:27,730 --> 00:05:28,280
only.

77
00:05:28,330 --> 00:05:32,800
So here is the Ajax call that is being made by our application.

78
00:05:32,800 --> 00:05:39,570
And we can see here on the request you are ill that we are indeed accessing here AP courses and we have

79
00:05:39,580 --> 00:05:42,990
here the parameters, page one with page size 10.

80
00:05:43,090 --> 00:05:46,450
So as you can see, everything is working as expected.

81
00:05:46,630 --> 00:05:51,730
Let's not talk about some other features of the angular built in HTP client.

82
00:05:51,970 --> 00:05:57,880
We are going to talk about a better way of passing the data to our template using the async pipe, and

83
00:05:57,880 --> 00:06:01,420
we're going to learn how to build our own custom services.