What you will learn from this blog:

1. What is Angular BlockUI
2. How to use it in view and js
3. Learn how it will remove unnecessary hide and show of loader during each ajax request
4. how it will reduce line of code

If you are looking for a default loader with overlay during each ajax request, angular-block-ui is a best option. It detects $http request and will show a loader with editable caption and an overlay that will block the full screen elements, although we can change the html and css of loader and overlay using its provider’s properties.

How to install:

library can be downloaded using bower from terminal:

bower install angular-block-ui

How to use:

1. place angular-block-ui.min.css and angular-block-ui.min.js files in your css and js folder
2. Include css and js file in html file:

<link rel="stylesheet" type="text/css" href="css/angular-block-ui.min.css />
<script type="text/javascript" src="js/angular-block-ui.min.js"></script>

3. Add dependency of angular-block-ui in js file:

angular.module(app, ['blockUI'])

Now UI will be added in each request by default, but you can change configuration by using provider and manually can add this UI by injecting blockUI in required controller:

angular.module(app).controller(LoginController', function($scope, blockUI, Users) {
  $scope.onSubmit = function() {

    // show loading screen with blocking elements
    blockUI.start();

    Users.get(uid).then(function(result){
		//stop showing loader
		blockUI.stop();
	});
  };
});

BlockUI config settings:

1- Change default text of loading:
Using blockUIConfig provider in config time:

blockUIConfig.message = Loading request;

2- change BlockUI delay:

blockUIConfig.delay = 100;

3- to change the overlay UI:

blockUIConfig.template = <div>custom template</div>;
blockUIConfig.templateUrl = template url; // we can also include template by its url

4- if you want to block by default blockUI:

blockUIConfig.autoBlock = false;