Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Angular BlockUI - An Overview

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3.25k
    Comment on it

    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
    		//stop showing loader


    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;


 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: