Jul 05, 2016

When we create websites we need to make sure that the user experience is as good as possible and providing feedback is one of the most important aspects to this. Frustration is sure to kick in when we are using a website that doesn’t provide sufficient feedback based on our actions, this feedback isn’t just the data that we request but also feedback such as loading or processing times.

In a scenario where we are querying tons of data and the process takes a few seconds to complete, we need to provide feedback to the user that there is indeed something that is happening. This feedback is critical so that your users doesn’t try to invoke the same action twice even before it has finished the first time.

With AngularJS we have the capabilities to create http interceptors, there interceptors allows us to intercepts the calls made by an http request as well as an http response. By creating these interceptors you can potentially validate and modify the data even before it ever goes to the server and also modify the response before it is presented to the user. Otherwise we can also use these interceptors to show a loading screen for our users to let them know we are processing the request.

To illustrate this I will create a basic web application that uses Angular JS 1.5.7 and ASP.Net MVC. We will start off with as empty project and add a simple Controller that can handle the server side logic, in my case the long running action that the user has to wait for to complete.

In this controller I have added a method called “LongRunningProcess”, this method will be used to simulate a long running task on the server side. Within this method I have a Thread.Sleep call that will stop execution of code for 5000ms (5 seconds). Once we have waited for 5 seconds it will then return a message from the server to the client in a JSON format.

Once I have my server side code in place I need to create an Angular App to call and also intercept any http calls made from the client, then display the loading screen to them while they are waiting for the process to be completed. To achieve this, I have added a blank JavaScript file to my project that contains the following segments of code.

In this segment of code I am creating a service in my Angular app that will handle my intercepting, this service is called “DemoInterceptor”. The previously mentioned service will execute a function when a request or a response get invoked.

Firstly, we handle the request (lines 5 – 9). By handling the request we can now show the element containing the load animation, as well as disabling the button that invoked the action so that the user cannot interact with it while we are processing.

Secondly, we handle the response (lines 10 – 14). By handling the response we can now hide the element containing the load animation, as well as enable the button again so that the user can invoke the action again.

After we have created the interceptor, we now need to register it with the $httpProvider. The following code is needed to perform the registration of the interceptor.

In this code we create a “config” stage for our Angular app so that it can perform the registration. To refer to the httpProvider we must pass it in as a dependency, this is done inline to the config declaration on line 19. In the function of the “config” stage we add our service into the “interceptors” collection on the httpProvider object.

The httpProvider allows us to modify the default behaviour of the $http service that is used to perform requests to the server from client side. The last section of code we need to add is the controller for the angular app.

In the controller I add a dependency to the $http service and the $scope service, with the $http service I will be able to request data from the server (remember this is the service where we injected our interceptors) and with the $scope service I can setup send and receive values from my user.

The logic for the controller contains a function that will call the method that needs to execute the “longrunningprocess”, we invoke this by using the get action on the $http service.

This is all there is to the implementation logic for this application, we can now take a look at the designing the markup for the interface.

In my markup I have created a simple h2 header that will contain the message received from the request, this request will be invoked by the button I created called “btncustom”. On line 7 I have created an element that will represent a loading screen while the user waits for the response to come through.

This is the starting screen for my website, when the user clicks the button it will invoke the long running action that will change the interface to the following image:

The grey lines that form a semi-circle is a gif animation that rotates around emulating a loading screen for my user, also not that the button is now disabled and cannot be pressed while the loading occurs. Finally when the process is done the loading image disappears and the header text is replaced.

This was a basic example on how to create an interceptor for you HTTP requests and responses, you can now go and create your own interceptors for your apps and include some more complex logic to fit your requirements.