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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book