Last active
August 29, 2015 14:26
-
-
Save ben-barbier/f225664f4e869fceb788 to your computer and use it in GitHub Desktop.
AngularJS - Loading page with progress bar
This file contains 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
| (function() { | |
| 'use strict'; | |
| angular.module('myApp', []); | |
| angular | |
| .module('myApp') | |
| .config(myAppConfig); | |
| myAppConfig.$inject = ['$httpProvider']; | |
| function myAppConfig ($httpProvider) { | |
| $httpProvider.interceptors.push('applicationLoadedHttpInterceptor'); | |
| } | |
| })(); |
This file contains 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
| (function() { | |
| 'use strict'; | |
| angular | |
| .module('myApp') | |
| .factory('applicationLoadedHttpInterceptor', applicationLoadedHttpInterceptor); | |
| applicationLoadedHttpInterceptor.$inject = ['$q', '$rootScope', '$timeout']; | |
| function applicationLoadedHttpInterceptor ($q, $rootScope, $timeout) { | |
| var applicationLoaded = false, | |
| requestsCounter = 0, | |
| responsesCounter = 0, | |
| applicationSeemsToBeLoaded; | |
| return { | |
| 'request': function(config) { | |
| if (!applicationLoaded) { | |
| requestsCounter++; | |
| if (applicationSeemsToBeLoaded) { | |
| $timeout.cancel(applicationSeemsToBeLoaded); | |
| } | |
| $rootScope.$broadcast('application_loading', { | |
| requests: requestsCounter, | |
| responses: responsesCounter | |
| }); | |
| } | |
| return config || $q.when(config); | |
| }, | |
| 'response': function(response) { | |
| if (!applicationLoaded) { | |
| responsesCounter++; | |
| $rootScope.$broadcast('application_loading', { | |
| requests: requestsCounter, | |
| responses: responsesCounter | |
| }); | |
| if (requestsCounter - responsesCounter < 1) { | |
| applicationSeemsToBeLoaded = $timeout(function () { | |
| $rootScope.$broadcast('application_loaded'); | |
| applicationLoaded = true; | |
| }, 200); | |
| } | |
| } | |
| return response || $q.when(response); | |
| } | |
| }; | |
| } | |
| })(); |
This file contains 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
| <!doctype html> | |
| <html> | |
| <head> | |
| </head> | |
| <body data-ng-app="myApp"> | |
| <div ng-controller="LoadingPageController"> | |
| <div ng-if="!applicationLoaded" class="loadingPage"> | |
| <div class="loadingPageLoader"> | |
| <md-progress-linear md-mode="determinate" value="{{(responsesCounter / requestsCounter) * 100}}"></md-progress-linear> | |
| <div class="percents" ng-bind-html="(responsesCounter / requestsCounter * 100).toFixed(0) + ' %'"></div> | |
| </div> | |
| <div class="informations"> | |
| <img src="common/styles/img/spid-big-logo.png" alt="SPID" /> | |
| <div ng-if="proposeReload"> | |
| <div style="margin-top: 20px;" ng-bind-html="'MyApp was not successfully loaded...'"></div> | |
| <div style="margin-top: 20px;"><md-button ng-click="reload()" class="md-raised md-primary" ng-bind-html="'Refresh'"></md-button></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| .loadingPage .loadingPageLoader { | |
| width: 100%; | |
| position: fixed; | |
| z-index: 10001; | |
| top: 0; | |
| margin-top: -5px; | |
| } | |
| .loadingPage .loadingPageLoader .percents { | |
| margin-top: 6px; | |
| position: fixed; | |
| right: 5px; | |
| } | |
| .loadingPage .informations { | |
| width: 100%; | |
| height: 100%; | |
| position: fixed; | |
| z-index: 10000; | |
| background-color: whitesmoke; | |
| top: 0; | |
| text-align: center; | |
| box-shadow: inset 0 0 200px rgba(0, 0, 0, .5); | |
| padding-top: 125px; | |
| } |
This file contains 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
| (function() { | |
| 'use strict'; | |
| angular | |
| .module('myApp') | |
| .controller('LoadingPageController', LoadingPageController); | |
| LoadingPageController.$inject = ['$scope', '$window', '$timeout']; | |
| function LoadingPageController ($scope, $window, $timeout) { | |
| var loadingProgress; | |
| var INACTIVITY_TO_PROPOSE_RELOAD = 5000; | |
| $scope.applicationLoaded = false; | |
| $scope.requestsCounter = 0; | |
| $scope.responsesCounter = 0; | |
| $scope.proposeReload = false; | |
| function resetWaitingTime () { | |
| if (loadingProgress) { | |
| $timeout.cancel(loadingProgress); | |
| } | |
| loadingProgress = $timeout(function () { | |
| $scope.proposeReload = true; | |
| }, INACTIVITY_TO_PROPOSE_RELOAD); | |
| } | |
| $scope.reload = function () { | |
| $window.location.reload(); | |
| }; | |
| $scope.$on('application_loaded', function () { | |
| $scope.applicationLoaded = true; | |
| }); | |
| $scope.$on('application_loading', function (event, counts) { | |
| resetWaitingTime(); | |
| $scope.requestsCounter = counts.requests; | |
| $scope.responsesCounter = counts.responses; | |
| }); | |
| } | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Par contre, tu ne géres pas les retours en erreur.