Http interceptor in AngularJS : adding tokens and loading image to every http request

While creating AngularJS applications,we might need to send multiple  http requests to backend apis to fetch the data that need to be populated within our HTML.In most cases, these backend apis might be protected using token .Also we might need to add a loading image to indicate the user that the data is being fetched. HttpInterceptor helps us to a display the loader image before and hide the loader image after completing the request  and also add token to every request header.This tutorial helps us to create an HttpInterceptor in AngulaJS. We create an  app using the following code

Now we create a factory which will intercept http requests.Inside the interceptor we use a variable httpRequestNumber,which tracks the number of requests.When a new request comes up we increment it httpRequestNumber++ and on response or error we decrement it httpRequestNumber– .We also inject $q and $rootScope.$q is service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.$rootScope is the root scope .every app has single root scope. All other scopes are descendant scopes of the root scope.We also add a token to the request header using the following code.

The interceptor factory will look like this….

Angular JS 1.6 – server side pagination with sorting using Angular UI Bootstrap

Angular 1.6 SPA server side pagination of data with sort. To create a SPA which lists user data with pagination  and sorting we need the following CDN links – Angular JS 1.6.9 js CDN. – Angular JS UI bootstrap -Bootstrap components written in pure AngularJS . – Bootstrap CSS file. STEP 1 – Create file index.html and add the relevant CDN links using the following codes.

STEP 2 – CREATING ANGULAR MODULE and DEFINE THE APP create, register and retrieve Angular JS module using the following code.The name of the module is ‘userLog’.

and in the HTML.

STEP 3 – DEFINE THE CONTROLLER AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller.The name of the controller here is ‘listController’.In HTML , add the following code

STEP -4 CREATING SERVICES AND INJECTING THEM In this example we will create two services one for getting the total number of users and other for getting the data each page.The name of the first service is ‘count’ and name of the second service is ‘getloglist’

Services in both cases send HTTP requests to the APIs.For this we inject $http service.The $http service get takes a single argument which…

Share this page in social media platforms