Chapter 7 ■ ServiCeS and Server CommuniCation
The Promises API is very sophisticated, and it aims to improve on the way this kind of work was managed in the
past. One interesting aspect of the API is the fact that you combine multiple promises into one larger promise. This is
conceptually like promising your children a trip to the zoo, a toy from the toy store, and then some ice cream on the
way home. With promises, you can write very clean and readable code that says, in essence, “When all of these things
have happened, do this other thing.” We won’t get quite as involved as that in this book, but I do encourage you to dig
deeper, if you plan to write a lot of potentially unwieldy asynchronous JavaScript code.
This is all a little abstract at the moment, but we are now ready to move on and look at server communication.
Soon, we will see how our code can use promises.
Server Communication
While we don’t have to concern ourselves too much with the back-end process that manages the incoming data,
we do have to know how to transmit that data across the network. For this task, we are going to use the Angular $http
service. This service allows you to communicate with a web server via the browser’s XMLHttpRequest object. If you
have a jQuery background, this service is similar to the jQuery Ajax method.
Take a look at Listing 7-5, some of which may make sense already, given our coverage of promises in the
last section.
Listing 7-5. A First Look at the $http Service
var promise = $http({method: 'POST', url: 'memberservices/register', data: theData});
promise.success(function (data, status, headers, config, statusText) {
// this callback will be called asynchronously
// when the response is available
});
promise.error(function (data, status, headers, config, statusText) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
As Listing 7-5 shows, the $http service is a function that takes a single argument, a configuration object. While
the configuration object lets you configure many different options, we keep it fairly simple here. We provide an
HTTP endpoint via its url property, and we use the HTTP post method via the method property. We also use the data
property to pass in the data that we want to send along to the web server. In many cases, this is all that the $http
service needs in order to do its job. However, by using the configuration object, it is possible to configure a wide range
of HTTP options as and when you need to do so.
We capture the return value of the $http service, a promise object, in a variable named promise. As a promise
object is a representation of an event that can potentially have different outcomes, we use its success and error
methods to cater to either possibility. Both of these methods accept callback functions as arguments, and each of
these functions has the same signature.
function(data, status, headers, config, statusText) { }
The callback function arguments are outlined in Table 7-1. However, we will mainly be concerned with the first
two, data and status, both of which we will see in action shortly.