AngularJS BlockUI

AngularJS BlockUI using page loading time

Step 1

We are following some AngularJS BlockUI reference files in the below code:

  1. <link rel="stylesheet" href="path-to-block-ui/angular-block-ui.min.css"/>  
  2. <script src="path-to-block-ui/angular-block-ui.min.js"></script>  

Step2

BlockUI in your main Angular module.

  1. angular.module('myApp', ['blockUI'])  

Step3

Your AngularJS Controller.js page.

  1. angular.module('myApp').controller('MyController'function($scope, blockUI)) {  
  2.     $scope.onSave = function(item) {  
  3.         blockUI.start();  
  4.         //Here user call services or ApiServices or any other events  
  5.         blockUI.stop();  
  6.     }  
  7. }  

Just call any event from blockUI.start() and blockUI.stop().

Step4

Put this code inside your cshtml page.

  1. <div block-ui='' myBlockUI''>  
  2.    <p>Loading..</p>  
  3. </div> 

I hope this AngularJS BlockUI is helpful for you.
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now