1 00:00:03,630 --> 00:00:08,225 As we have already learnt in the previous lesson, 2 00:00:08,225 --> 00:00:15,020 HTTP protocol enables us to communicate between a client and a server. 3 00:00:15,020 --> 00:00:19,770 We have seen some details about the HTTP protocol already in the previous lesson. 4 00:00:19,770 --> 00:00:25,440 In this lesson, we're going to explore Angular support for HTTP. 5 00:00:25,440 --> 00:00:29,810 Angular supports HTTP through the Angular HTTP client. 6 00:00:29,810 --> 00:00:32,700 We will look at how we can leverage 7 00:00:32,700 --> 00:00:36,725 the Angular HTTP client for client-server communication, 8 00:00:36,725 --> 00:00:38,925 in our Angular application. 9 00:00:38,925 --> 00:00:42,045 The two exercises that follow this lecture, 10 00:00:42,045 --> 00:00:45,650 we'll explore the practical use of 11 00:00:45,650 --> 00:00:49,660 the Angular HTTP client within our Angular application. 12 00:00:49,660 --> 00:00:56,020 Let's look at a little bit of the details of the HTTP client in this lecture. 13 00:00:56,020 --> 00:00:58,415 As we would expect, 14 00:00:58,415 --> 00:01:02,975 Angular leverages the HTTP protocol to enable communication between 15 00:01:02,975 --> 00:01:08,000 our Angular client and the HTTP based server. 16 00:01:08,000 --> 00:01:11,820 Most modern browsers, typically used to support 17 00:01:11,820 --> 00:01:17,820 the XMLHttpRequest or the XHR way of communicating with the server. 18 00:01:17,820 --> 00:01:22,519 Increasingly, the browsers are adopting the Fetch API, 19 00:01:22,519 --> 00:01:26,900 which is a modern replacement for XMLHttpRequest as 20 00:01:26,900 --> 00:01:32,225 a way of providing communication between the browser and the server. 21 00:01:32,225 --> 00:01:39,960 Angular leverages this for communicating with the server using the HTTP client. 22 00:01:39,960 --> 00:01:48,450 We will look at the use of the HTTP client and how we can use HttpClientModule, 23 00:01:48,450 --> 00:01:52,425 within our Angular application to enable Client-Server Communication. 24 00:01:52,425 --> 00:01:56,150 Any communication between the client and the server as we expect, 25 00:01:56,150 --> 00:01:57,770 is going to be asynchronous in nature. 26 00:01:57,770 --> 00:02:00,410 So, which means that your client needs 27 00:02:00,410 --> 00:02:03,470 to wait for the data to be delivered from the server site. 28 00:02:03,470 --> 00:02:06,620 Consequently, your client needs to be 29 00:02:06,620 --> 00:02:12,420 configured to deal with this delay in obtaining the data. 30 00:02:12,420 --> 00:02:16,295 In the previous module itself, 31 00:02:16,295 --> 00:02:19,910 we had already configured our client applications to 32 00:02:19,910 --> 00:02:24,160 be able to show the progress spinner on the UI, 33 00:02:24,160 --> 00:02:28,795 to keep the user informed about the fact that there is a delay in obtaining the data, 34 00:02:28,795 --> 00:02:31,985 before the view is rendered. 35 00:02:31,985 --> 00:02:35,210 That comes to our aid in this lesson, 36 00:02:35,210 --> 00:02:42,880 where we obviously have to deal with the delay for obtaining data from the server site. 37 00:02:42,880 --> 00:02:47,000 The data access within our Angular application, 38 00:02:47,000 --> 00:02:52,150 it is always better to delegate this responsibility to the service. 39 00:02:52,150 --> 00:02:56,450 So, we let the service deal with the interaction with the server, 40 00:02:56,450 --> 00:03:02,795 and then your component obtains the data by calling the methods of the service. 41 00:03:02,795 --> 00:03:08,405 The component service interaction we have already set up in the previous module. 42 00:03:08,405 --> 00:03:09,970 So, all that we need to do, 43 00:03:09,970 --> 00:03:16,700 is to update our services to leverage the HTTP module to communicate with the server, 44 00:03:16,700 --> 00:03:20,060 to obtain the data from the server and then thereafter, 45 00:03:20,060 --> 00:03:22,635 supply the data to the component. 46 00:03:22,635 --> 00:03:26,645 The HTTP server itself, 47 00:03:26,645 --> 00:03:30,980 will return the data to our client and 48 00:03:30,980 --> 00:03:37,245 our HTTP module returns the data to our service in the follow up observable. 49 00:03:37,245 --> 00:03:40,010 This observable, will be then processed and 50 00:03:40,010 --> 00:03:43,030 then returned as an observable to our component. 51 00:03:43,030 --> 00:03:46,760 That part we have already setup in the previous module. 52 00:03:46,760 --> 00:03:51,380 So, we will leverage that to enable us to quickly 53 00:03:51,380 --> 00:03:56,315 slipping the HTTP communication between the client and the server, 54 00:03:56,315 --> 00:04:00,145 between the service and the server site, 55 00:04:00,145 --> 00:04:03,080 and then the rest of the infrastructure 56 00:04:03,080 --> 00:04:05,900 that is already in place in our Angular application 57 00:04:05,900 --> 00:04:12,010 can easily deal with the delivery of the observable to our component, 58 00:04:12,010 --> 00:04:15,130 and the component already subscribing to that observer. 59 00:04:15,130 --> 00:04:18,200 The additional effect that we will deal with, 60 00:04:18,200 --> 00:04:21,040 is how to handle errors. 61 00:04:21,040 --> 00:04:25,340 We'll talk about that in a little more detail in the later slides. 62 00:04:25,340 --> 00:04:27,625 So, as I already mentioned, 63 00:04:27,625 --> 00:04:30,850 the HTTP client returns an observable. 64 00:04:30,850 --> 00:04:33,845 So, when you call the HTTP module, 65 00:04:33,845 --> 00:04:38,040 so you will set up your service to make use of the HTTP module, 66 00:04:38,040 --> 00:04:40,295 and with the HTTP module, 67 00:04:40,295 --> 00:04:46,290 it provides you with several methods which match the get, 68 00:04:46,290 --> 00:04:49,800 put, post, and delete verbs of the HTTP protocol. 69 00:04:49,800 --> 00:04:50,870 So, the get, put, post, 70 00:04:50,870 --> 00:04:54,960 and delete methods are automatically supported by the HTTP module. 71 00:04:54,960 --> 00:04:59,165 So, you will leverage these methods to be able to execute 72 00:04:59,165 --> 00:05:03,330 those particular operations on the server site. 73 00:05:03,330 --> 00:05:06,365 So, when you issue an HTTP get call, 74 00:05:06,365 --> 00:05:11,000 you're requesting for data to be delivered from the server to the client. 75 00:05:11,000 --> 00:05:13,195 The HTTP client in turn, 76 00:05:13,195 --> 00:05:18,170 will process the observable that is delivered through the Angular HTTP module, 77 00:05:18,170 --> 00:05:22,470 and then deliver that observable to our component. 78 00:05:22,470 --> 00:05:25,550 Within our component, we already subscribe 79 00:05:25,550 --> 00:05:28,340 to the observable that is delivered by our service, 80 00:05:28,340 --> 00:05:32,580 and so handling the data that is sent through the observable, 81 00:05:32,580 --> 00:05:35,500 is fairly straight forward for us. 82 00:05:35,500 --> 00:05:38,900 If the Angular application is 83 00:05:38,900 --> 00:05:43,705 communicating with a server that is returning the response in JSON format, 84 00:05:43,705 --> 00:05:47,280 the Angular HTTP clients get method itself 85 00:05:47,280 --> 00:05:51,750 parses the server's JSON response into an anonymous object. 86 00:05:51,750 --> 00:05:58,070 The client itself, doesn't know exactly how to interpret the shape of this object. 87 00:05:58,070 --> 00:06:04,220 So, we can aid the HTTP client by specifying the shape of the object, 88 00:06:04,220 --> 00:06:10,170 by specifying a declaration of a JavaScript class, 89 00:06:10,170 --> 00:06:13,520 which specify the shape of the object so that the output 90 00:06:13,520 --> 00:06:17,025 from the get can be consumed easily by the application. 91 00:06:17,025 --> 00:06:19,330 So, in the exercise, 92 00:06:19,330 --> 00:06:20,500 you will see me declaring. 93 00:06:20,500 --> 00:06:23,560 For example, we will say this.http.get, 94 00:06:23,560 --> 00:06:27,695 and then within angular brackets, 95 00:06:27,695 --> 00:06:29,940 I specify dish there. 96 00:06:29,940 --> 00:06:31,555 So, that way, 97 00:06:31,555 --> 00:06:37,400 the incoming data for the get request from the server site will be converted into 98 00:06:37,400 --> 00:06:41,660 a dish object and then can be consumed immediately 99 00:06:41,660 --> 00:06:47,185 by my component when it is laying out the content. 100 00:06:47,185 --> 00:06:48,990 Now, if you require, 101 00:06:48,990 --> 00:06:54,315 you can get access to the complete response coming in from the server site. 102 00:06:54,315 --> 00:06:57,810 But that would be only under specific circumstances, 103 00:06:57,810 --> 00:07:00,320 where you need access to for example, 104 00:07:00,320 --> 00:07:05,820 the headers of the incoming HTTP response message and so on. 105 00:07:05,820 --> 00:07:08,300 But for most purposes, 106 00:07:08,300 --> 00:07:11,380 just by declaring the shape of the object, 107 00:07:11,380 --> 00:07:16,100 we can easily get the JSON data automatically parsed into a way 108 00:07:16,100 --> 00:07:21,410 that can be consumed by our Angular application more easily. 109 00:07:21,410 --> 00:07:24,140 As we expect, communication 110 00:07:24,140 --> 00:07:27,845 between the client and the server is not going to be error free. 111 00:07:27,845 --> 00:07:32,060 Errors are going to crop up for many different reasons. 112 00:07:32,060 --> 00:07:36,740 It may be that the connection doesn't get established between the client and the server, 113 00:07:36,740 --> 00:07:40,130 it may be the fact that the reply from the server gets lost, 114 00:07:40,130 --> 00:07:47,660 it may be the fact that the server is unable to find the data that you're looking for, 115 00:07:47,660 --> 00:07:54,005 and so returns a 404 indicating that the server 116 00:07:54,005 --> 00:08:00,515 is unable to provide the data for you or missing data on the server site, and so on. 117 00:08:00,515 --> 00:08:04,070 So, your client needs to deal with all these errors. 118 00:08:04,070 --> 00:08:05,745 So, within our service, 119 00:08:05,745 --> 00:08:09,200 we're going to configure our service to be able to catch this error. 120 00:08:09,200 --> 00:08:13,935 So, this is where the use of the catch method that is supported by the HTTP, 121 00:08:13,935 --> 00:08:17,870 enables us to catch the error, process that error, 122 00:08:17,870 --> 00:08:21,745 and then send the error message to our component, 123 00:08:21,745 --> 00:08:24,920 and then let the component deal with the error message in 124 00:08:24,920 --> 00:08:28,340 whatever way it seemed appropriate. 125 00:08:28,340 --> 00:08:30,485 Now, within our component for example, 126 00:08:30,485 --> 00:08:33,530 we will display the error information that we 127 00:08:33,530 --> 00:08:36,980 obtained in our view to indicate to the user, 128 00:08:36,980 --> 00:08:40,755 that an error occurred in obtaining the data from the server site. 129 00:08:40,755 --> 00:08:43,210 So, within the service, 130 00:08:43,210 --> 00:08:45,015 we need to process this error. 131 00:08:45,015 --> 00:08:48,710 Now, when this error information obtained from 132 00:08:48,710 --> 00:08:52,615 the server site through the HTTP client is processed within our service, 133 00:08:52,615 --> 00:08:54,815 then we will convert that to a string, 134 00:08:54,815 --> 00:08:59,905 and that string will be passed to our component by using the observable throw method. 135 00:08:59,905 --> 00:09:02,785 So, the throw method allows us to throw an error. 136 00:09:02,785 --> 00:09:05,770 Then because in our component we 137 00:09:05,770 --> 00:09:08,770 subscribe to this observable within the subscribe method, 138 00:09:08,770 --> 00:09:10,520 then you need to deal with the error. 139 00:09:10,520 --> 00:09:12,505 So, in the subscribe part, 140 00:09:12,505 --> 00:09:17,120 earlier we have seen only one function being specified for the subscribe, 141 00:09:17,120 --> 00:09:19,820 and that deals with the normal operation. 142 00:09:19,820 --> 00:09:21,490 But together with that, 143 00:09:21,490 --> 00:09:27,270 we can also provide a second function to which the error will be delivered. 144 00:09:27,270 --> 00:09:32,450 So, you will see me configuring the subscribe part of my component 145 00:09:32,450 --> 00:09:38,480 using a second function specified within the subscribe method there, 146 00:09:38,480 --> 00:09:44,475 as an example illustrated by this code here. 147 00:09:44,475 --> 00:09:47,780 That way, the error will be caught within 148 00:09:47,780 --> 00:09:50,890 my component and then appropriate error message, 149 00:09:50,890 --> 00:09:54,380 information will be delivered to the user within the view. 150 00:09:54,380 --> 00:10:00,825 So, we will see that as part of the second exercise in this particular lesson. 151 00:10:00,825 --> 00:10:07,010 With this quick understanding of the HTTP client, 152 00:10:07,010 --> 00:10:11,335 we will now move on to the exercises where we will employ 153 00:10:11,335 --> 00:10:17,795 the Angular HTTP client provided through the HTTP module of the Angular HTTP library, 154 00:10:17,795 --> 00:10:22,740 to enable us to communicate with our server.