Tag Archive for: angular service

AngularJS – SharedDataServices & Refresh Buttons

/in /by

The use of Shared Data Service in AngularJS allows us to quickly save off information received from server so it can be re-used later, thus limiting the number of hits we need to make. This is especially useful in mobile applications where we have to be conscious of our bandwidth usage.

One of the problems these services have is that they are very tightly coupled to the state of the application, and thus an enemy of the refresh button. In most mobile applications the refresh button isn’t available so we can avoid this issue. However, in Hybrid applications we need to manage our state a little more carefully in case the user is visiting from a desktop or mobile browser.

Let’s assume the following example is one from a Customer Detail Page. This page assumes that The Customer Info is stored in our Shared Data Service, but needs to be smart enough to react if it isn’t present. To do this we can prepare for failure by passing the ID of the customer that is in sharedData in the hash.

Custom Exceptions and Angular Error Handling

/in /by

This blog covers a straight forward example of handling errors via custom exceptions from the server and displaying the exception message on the client using an angular service.

Server:

Step 1:

Create Custom Exceptions

namespace Business.Exceptions
{
  public class ProblematicWebServiceException : Exception
  {
   public ProblematicWebServiceException()
   : base()
   {

   }
   public ProblematicWebServiceException(string message)
   : base(message)
   {

   }
   public ProblematicWebServiceException(string message, Exception innerException)
   : base(message, innerException)
   {

   }
  }
}

Step 2:

Wrap code that has the potential to fail in try/catch blocks and throw custom exception with a helpful error message. This is probably going to be in the Business layer depending on the architecture of the application.

try
{
   problematicService.GetSomeStuff();
}
catch (Exception)
{
   throw new Business.Exceptions.ProblematicWebServiceException("The Problematic Web Service is temporarily down.");
}

 

Step 3:

Catch exceptions as they bubble up to the application’s service layer and return appropriate Http Status Code(Service Unavailable 503 in this case):

catch (Business.Exceptions.ProblematicWebServiceException ex)
            {
                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.ServiceUnavailable)
                {
                    Content = new StringContent(ex.Message)
                };
                throw new HttpResponseException(response);
            }

Client:

Step 4:

Create Shared Service to handle errors:


angular.module('Shared.Services.SharedDataService', [])
    .service('sharedData', ['$rootScope', '$cookies', '$http', '$location',  function ($rootScope, $cookies, $http, $location) {
   var handleFault = function (context,error) {

   if (error.status === 503 && error.data) {
                errorMessage = error.data;
            }

   return {message:errorMessage,details:errorDetails}
        };
}

Step 5:

Handle error using $resource’s error callback to display the error message to the user:

MyResource.get({ 'id': customerId },
        function (response) {
            $location.path('/customerDetails/' + customerId);
        },
        function (error) {
            $scope.isError = true;
            $scope.errorMessage = sharedData.handleFault("gettingProblematicServiceCustomer", error).message;
        });