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.