Chapter 7 ■ ServiCeS and Server CommuniCation
Both of these div elements make use of the ngShow directive. Only one or the other will be displayed once the
promise is resolved. The success method will set the showSuccessMessage to true or the error method will set
the showErrorMessage to true.
What we have done so far is almost enough. However, we should enhance this to provide a slightly better user
experience. Let’s add a visual cue, so that the user is aware that some work is in progress once he/she clicks the Register
button. The first thing we will do is to add a small loading animation next to our registration form’s Register button.
The other thing we will do is use the ngDisabled directive on the Register button. The ngDisabled directive is
very useful. If the value of its expression is true, it will set the disabled attribute on the element to which it is applied.
Here, we use it to prevent the user from attempting to click the button more than once.
You can see these revisions in Listing 7-10 and Listing 7-11. Take note that the animation in Listing 7-10,
a .gif image file, is inside a span whose visibility is determined by an ngShow directive.
Listing 7-10. Adding a Loading Animation and Disabling the Register Button
Listing 7-11 shows the changes we have made to the register() function.Listing 7-11. Indicating That Work Is in Progress
// If the registration form is valid, use the
// memberDataStoreService to submit the form data
if ($scope.registrationForm.$valid) {
$scope.working = true;
var promise = memberDataStoreService.doRegistration($scope.person);
promise.success(function (data, status) {
$scope.showSuccessMessage = true;
});
promise.error(function (data, status) {
$scope.showErrorMessage = true;
});
promise.finally(function () {
$scope.working = false;
});
$scope.doShow = true;
}
The first thing we do is to set $scope.working to true. So, thanks to ngShow, as soon as the user hits the Register
button, the loading animation appears (see Figure 7-3). Of course, when the work is done, we want it to go away again.
In order to achieve that, we simply set $scope.working to false. This also takes care of enabling and disabling the
Register button.