In case we need to make XMLHttpRequest requests to a server, AngularJS has a simple to use API for all our needs in the $http service.
In this example, we also need a server-side script to handle our requests. In this case the chosen language is PHP, but could be anything else of course. Even if you don't know PHP, the server-side part should be easy to understand.
In point 1 we start with a very simple case. It shows how we can make a GET request and how to handle a success and a failure. We can call the simpleGetCall function defined inside mainController in two ways: making it be successful or making it fail. The $http service provides a get method that accepts an URL. We can register a success handler with the success method and a failure handler with the error method. Both the methods give us some information about the server response: we have the data sent back by the server, the HTTP status, the HTTP headers of the response, the config object (we're going to talk about it later). To make it easier to see the data received in the response handler functions, we've defined the logResult function that simply prints all the data, including the JSON objects. Here we use the built-in jsonFilter to automatically print a readable version of the JSON objects and this is very useful for debugging purposes. When the simpleGetCall function is called with withSuccess = true, the server-side script server.php is requested in the URL and the call is successful, while when withSuccess = false the invalid-url.php page is requested and that file doesn't actually exist on the server so we can simulate a failure.
Point 4 of the example shows that we can set a timeout in a server request. The getCallTimeout function sets a timeout of 1 second with the timeout property of the configuration object (the value of the property is expressed in milliseconds, so 1000 means 1 second) and a sleep parameter is passed to the server just to tell the server.php script that it should sleep for 3 seconds so our timeout of 1 second will make the error handler method be called.
Point 5 shows that we can send custom headers to the server by simply using the headers property of the configuration object. We need to pass an object to that property, the headers variable in this case, and each property name inside this object represents the name of a header. As you can see in the example, the value of a header can be specified as a string (the Custom header 1 value value of the Custom-Header-1 header) or as a function returning the value (the customHeaderFunc function returns the value of the My-Header-2 header). The server.php script decodes the received custom headers and sends them back as a string just to show that the values specified in the client have been received correctly by the server.
In point 6, we see that we can execute some transformation functions to manipulate the data being sent in a server request before it's actually sent and to manipulate the data received by the server in the response. We can do this with the transformRequest and the transformResponse properties of the configuration object. Here we've registered a customTransformRequestFunc function that leaves the request data as is, and an array of response manipulation functions. The functions in the array are executed in the same order they appear in the array, so customTransformResponseFunc1 is executed first and then comes the customTransformResponseFunc2. The first one shows also how we can get the value of a response header by simply using the headersGetter function available as a parameter of every transformation function.
The points 7, 8, 9 and 10 of the example simply show the other server request functions that the $http service makes available, so we have functions to make POST, PUT, DELETE and HEAD requests respectively. The post and put functions accept also a parameter to specify the data that has to be sent to the server, while the delete and head functions accept the same parameters of the get function. Note that the head function is not expected to return some data from the server so the data parameter of the success and error handler functions will always be empty.