Building a AngularJS Status/Loading Bar

When building any type of clientside MVC application one of the first things you(and your users) will notice is the lack of the normal browser status bar. As a user I find this really frustrating because that lack of feedback makes the application feel clunky as it’s hard to see when tasks are started and completed. Initially we attempted to useĀ toastr a notification engine that allows for large floating notifications in the top right of the screen but found the constant popups a distraction. What we actually needed was a status bar.

The code was simple and makes the app feel many times smoother. We implemented as a ‘ng-include’ in our main template.

index.html

1
<div data-ng-include="'/views/statusbar.html'"></div>

statusBar.html

1
2
3
4
5
6
<div data-ng-controller="iDsire.statusController" >     
        <div ng-show="qStatus.length > 0" class="span12 pagination-centered statusBar">
            <img src="/Content/css/select2-spinner.gif" >
            {{qStatus[0]}}
        </div>
    </div>

statusController.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function (app) {
    "use strict";
    app.controller('iDsire.statusController', ['$scope',
        function ($scope) {
 
            $scope.qStatus = [];
 
            $scope.$on('queueStatus', function (event, args) {
 
                if ($scope.qStatus.indexOf(args) == -1)
                    $scope.qStatus.push(args);
 
            });
 
            $scope.$on("dequeueStatus", function (event, args) {
 
                var index = $scope.qStatus.indexOf(args);
                if (index > -1) {
                    $scope.qStatus.splice(index, 1);
                }
 
            });
        }
    ]);
}(angular.module('iDsire.main')));

Adding Status

The statusbar uses angulars built in event dispatcher.

1
2
// queue's a status for display
$rootScope.$broadcast('queueStatus', 'logging in');
1
2
// dequeue's the status from displaying
$rootScope.$broadcast('dequeueStatus', 'logging in');

That’s it, now your AngularJS app has a simple statusbar and your users will thank you for it.

NB* with the current setup your manually queueing and dequeuing the status but it might be easier to hook into your ajax calls. In AngularJS you could look at usingĀ interceptors in the http service.

 

 

 

 

Leave a Reply