Created
May 12, 2014 10:12
-
-
Save Dpblandin/e79c28351f4835e8733c to your computer and use it in GitHub Desktop.
AngularJS Loading Directive - Show a loading HTML element when a $http request is pending
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| app.config(['$httpProvider', function ($httpProvider) { | |
| $httpProvider.interceptors.push(function ($q, $injector) { | |
| var notificationChannel, | |
| $http; | |
| return { | |
| // optional method | |
| 'request': function (config) { | |
| // get requestNotificationChannel via $injector because of circular dependency problem | |
| notificationChannel = notificationChannel || $injector.get('requestNotificationChannel'); | |
| // send a notification requests are complete | |
| notificationChannel.requestStarted(); | |
| // do something on success | |
| return config || $q.when(config); | |
| }, | |
| // optional method | |
| 'requestError': function (rejection) { | |
| // get $http via $injector because of circular dependency problem | |
| $http = $http || $injector.get('$http'); | |
| // don't send notification until all requests are complete | |
| if ($http.pendingRequests.length < 1) { | |
| // get requestNotificationChannel via $injector because of circular dependency problem | |
| notificationChannel = notificationChannel || $injector.get('requestNotificationChannel'); | |
| // send a notification requests are complete | |
| notificationChannel.requestEnded(); | |
| } | |
| return $q.reject(rejection); | |
| }, | |
| // optional method | |
| 'response': function (response) { | |
| // get $http via $injector because of circular dependency problem | |
| $http = $http || $injector.get('$http'); | |
| // don't send notification until all requests are complete | |
| if ($http.pendingRequests.length < 1) { | |
| // get requestNotificationChannel via $injector because of circular dependency problem | |
| notificationChannel = notificationChannel || $injector.get('requestNotificationChannel'); | |
| // send a notification requests are complete | |
| notificationChannel.requestEnded(); | |
| } | |
| // do something on success | |
| return response || $q.when(response); | |
| }, | |
| // optional method | |
| 'responseError': function (rejection) { | |
| // get $http via $injector because of circular dependency problem | |
| $http = $http || $injector.get('$http'); | |
| // don't send notification until all requests are complete | |
| if ($http.pendingRequests.length < 1) { | |
| // get requestNotificationChannel via $injector because of circular dependency problem | |
| notificationChannel = notificationChannel || $injector.get('requestNotificationChannel'); | |
| // send a notification requests are complete | |
| notificationChannel.requestEnded(); | |
| } | |
| console.log('There was an AJAX error - DO SOMETHING MORE HERE') | |
| return $q.reject(rejection); | |
| } | |
| } | |
| }) | |
| }]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div loading-widget> | |
| LOADING ... PLEASE WAIT ! | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| app.directive('loadingWidget', ['requestNotificationChannel', '$timeout', function(requestNotificationChannel, $timeout){ | |
| return { | |
| restrict : 'A', | |
| link: function($scope, element) { | |
| element.css({ | |
| display: 'none' | |
| }); | |
| var startRequestHandler = function() { | |
| element.css('display', 'table'); | |
| }; | |
| var endRequestHandler = function() { | |
| // $timeout is used to show the widget for a reasonnable amount of time in order to avoid confusion | |
| $timeout(function() { | |
| element.css('display', 'none'); | |
| },200); | |
| }; | |
| requestNotificationChannel.onRequestStarted($scope, startRequestHandler); | |
| requestNotificationChannel.onRequestEnded($scope, endRequestHandler); | |
| } | |
| }; | |
| }]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| app.factory('requestNotificationChannel', ['$rootScope', function($rootScope){ | |
| var _START_REQUEST_ = '_START_REQUEST_'; | |
| var _END_REQUEST_ = '_END_REQUEST_'; | |
| var requestStarted = function() { | |
| $rootScope.$broadcast(_START_REQUEST_); | |
| }; | |
| var requestEnded = function() { | |
| $rootScope.$broadcast(_END_REQUEST_); | |
| }; | |
| var onRequestStarted = function($scope, handler) { | |
| $scope.$on(_START_REQUEST_, function(event) { | |
| handler(); | |
| }); | |
| }; | |
| var onRequestEnded = function($scope, handler) { | |
| $scope.$on(_END_REQUEST_, function(event) { | |
| handler(); | |
| }); | |
| }; | |
| return { | |
| requestStarted : requestStarted, | |
| requestEnded : requestEnded, | |
| onRequestEnded : onRequestEnded, | |
| onRequestStarted : onRequestStarted | |
| }; | |
| }]) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment