During the js and html load. I have to put loader. so can I implement that any idea.
How do I have AngularJS show a loading spinner until the data has finished loading?
Currently data is come from local array.
-
Possible duplicate of AngularJS: How to show preload or loading until page is loaded completely?J-D– J-D2015-12-25 07:15:48 +00:00Commented Dec 25, 2015 at 7:15
Add a comment
|
2 Answers
You can make a directive, inject there http service and watch on its request pending:
(function() {
'use strict';
angular
.module('yourApp')
.directive('loader', loader);
/**
* Defines loading spinner behaviour
*
* @param {obj} $http
* @returns {{restrict: string, link: Function}}
*/
function loader($http) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(function() {
return $http.pendingRequests.length;
}, function(isLoading) {
if (isLoading) {
$(element).show();
} else {
$(element).hide();
}
});
}
};
}
})();
And use it:
<span class="spinner" data-loader></span>
