var app = angular.module('myApp', []);
app.factory('Loader', function ($rootScope, $timeout) {
return {
init: function (num) {
var rnd = Math.ceil(Math.random() * 1000 * i);
// Launch each num timer
for (var i = num; i > 0; i--) {
$timeout(
function () {
$rootScope.$broadcast('RessourceLoaded')
}, rnd);
rnd = Math.ceil(Math.random() * 10000);
}
}
};
});
function MainCtrl($scope, Loader) {
$scope.status = "Chargement en cours";
$scope.$on('RessourceFinish', function (event) {
$scope.status = "Chargement terminé!!! :D";
});
}
function LoaderCtrl($rootScope, $scope, Loader) {
$scope.numRessource = 50;
$scope.numRessourceLoaded = 0;
$scope.$on('RessourceLoaded', function (event) {
$scope.numRessourceLoaded++;
if ($scope.numRessourceLoaded == $scope.numRessource) {
$rootScope.$broadcast('RessourceFinish');
}
});
Loader.init($scope.numRessource);
}
<h2>Loader</h2>
<div ng-controller="MainCtrl">{{status}}</div>
<div ng-controller="LoaderCtrl"> <pre class="prettyprint"><center>{{numRessourceLoaded}}/{{numRessource}} ({{numRessourceLoaded*100/numRessource}}%)</center></pre>
</div>
External resources loaded into this fiddle: