Angular Material: Custom Loader directive

Standard

Customize Angular loader service, register within your controller and other data services and use it throughout your project. I have consolidated it through directive and service in-order to overcome boilerplate code. For html code clone my repo from github.

Github Link

Angular Code:

(function () {
    'use strict';

    var app = angular.module('app', ['ngMaterial']);

    app.controller('progressController', function (loaderService) {

        var vm = this;
        
        vm.showLoader = loaderService.getLoaderValue();

        vm.show = function () {
            vm.showLoader = loaderService.showLoader();
        };

        vm.hide = function () {
            vm.showLoader = loaderService.hideLoader();
        };
    });

})();

Angular HTML Code:

<loader></loader>

Loader Service:

(function () {
    'use strict';

    angular
        .module('app')
        .factory('loaderService', loaderService);

    loaderService.$inject = [];

    function loaderService() {

        var loaderStatus = "";

        var service = {
            showLoader: showLoader,
            hideLoader: hideLoader,
            getLoaderValue: getLoaderValue
        };

        return service;

        ////////////////////////////Implementation//////////////////////////////////////

        function showLoader() {
            loaderStatus = "indeterminate";
            return loaderStatus;
        }

        function hideLoader() {
            loaderStatus = "";
            return loaderStatus;
        }

        function getLoaderValue() {
            return loaderStatus;
        }
    }

})();

Loader Directive:

(function () {
    'use strict';

    angular
        .module('app')
        .directive('loader', loader);

    function loader() {
        var directive = {
            restrict: 'EA',
            templateUrl: '/scripts/app/loaderDirective.html',
        };

        return directive;
    }

    loaderController.$inject = [];

    function loaderController() {

        var vm = this;

        init();

        /////////////////////Implementation///////////////////////////////

        function init() {
           
        }
    }

})();

Loader Directive Html:

<md-progress-circular md-mode="{{vm.showLoader}}"></md-progress-circular>

Output:

Screenshot_3

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s