angularjs loader

angularjs ui grid show spinner loader

Hello everyone, I am going share the code sample for how to display the angularjs ui grid show spinner loader like you can see the below image.



The Out-Put look like below ng-grid view image.


HTML show loader code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
<div ng-app="userApp">
    <div ng-controller="UserCtrl">
        <div class="col-md-3">
            <div class="input-group  pull-right">
                <img class="spinner" ng-show="loading" src="~/Content/img/loding.png" />
            </div>
        </div>
        <div id="gridView">
            <div class="ngGridStyle" ng-grid="mobileGridView"></div>
        </div>
    </div>
</div>
<div ng-app="userApp">
    <div ng-controller="UserCtrl">
        <div class="col-md-3">
            <div class="input-group  pull-right">
                <img class="spinner" ng-show="loading" src="~/Content/img/loding.png" />
            </div>
        </div>
        <div id="gridView">
            <div class="ngGridStyle" ng-grid="mobileGridView"></div>
        </div>
    </div>
</div>
AngularJs ng grid show spinner loader code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var app = angular.module('userApp', ['ngGrid']);
app.service('userService', function ($http) {
    this.getUsers = function () {
        return $http({
            method: 'GET',
            url: baseURL + 'Api/MobilePref/Get/' + uid
        })
        .success(function (resp) {
        })
        .error(function (resp) {
        });
    };
});
app.controller('UserCtrl', function ($scope, userService) {
    $scope.users = null;
    //Set loading is true at the time when load the page.
    $scope.loading = true;
    userService.getUsers().then(function (Result) {
        if (Result !== undefined) {
            $scope.users = Result;
        }
    })
    .finally(function () {
        //Here Called If services call is success or failed.
        //Set the loading is false.
        $scope.loading = false;
    });
    $scope.userGridColumns = [
            { field: 'UID', displayName: 'Account'},
            { field: 'UName', displayName: 'AlertToMobile'},
            { field: 'UEmail', displayName: 'AlertToEmail'}];
    $scope.mobileGridView = {
        data: 'users',
        columnDefs: 'userGridColumns'
    };   
});
var app = angular.module('userApp', ['ngGrid']);

app.service('userService', function ($http) {
    this.getUsers = function () {
        return $http({
            method: 'GET',
            url: baseURL + 'Api/MobilePref/Get/' + uid
        })
        .success(function (resp) {
        })
        .error(function (resp) {
        });
    };
});

app.controller('UserCtrl', function ($scope, userService) {
    $scope.users = null;

    //Set loading is true at the time when load the page.
    $scope.loading = true;

    userService.getUsers().then(function (Result) {
        if (Result !== undefined) {
            $scope.users = Result;
        }
    })
    .finally(function () {
        //Here Called If services call is success or failed.
        //Set the loading is false.
        $scope.loading = false;
    });

    $scope.userGridColumns = [
            { field: 'UID', displayName: 'Account'},
            { field: 'UName', displayName: 'AlertToMobile'},
            { field: 'UEmail', displayName: 'AlertToEmail'}];

    $scope.mobileGridView = {
        data: 'users',
        columnDefs: 'userGridColumns'
    };    
});


For output : you can go on link http://embed.plnkr.co/QHrEECtSYNaSkjSgdksr/preview
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.