4
I’m trying to implement spinner loanding in my project in Engineering, it’s been a while! the spinner should run whenever a request is executed.
What library do I use?
4
I’m trying to implement spinner loanding in my project in Engineering, it’s been a while! the spinner should run whenever a request is executed.
What library do I use?
2
You can use it this way, it will only appear while $scope.loading
for true
.
app.controller('myCtrl', function ($scope, $http) {
// Show loading spinner.
$scope.loading = true;
$http.get('/some/awesome/content')
.success(function (data) {
// Do stuff with data.
})
.catch(function (err) {
// Log error somehow.
})
.finally(function () {
// Hide loading spinner whether our call succeeded or failed.
$scope.loading = false;
});
});
<div ng-controller="myCtrl">
<img id="mySpinner" src="/my/loading/spinner.gif" ng-show="loading" />
</div>
Or to get better yet, you can create a directive, like this:
.directive('loading', function () {
return {
restrict: 'E',
replace:true,
template: '<div class="loading"><img src="..."/>LOADING...</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val)
$(element).show();
else
$(element).hide();
});
}
}
})
Every time you set $scope.login = true;
Somewhere, there will appear the Oader.
2
You may be using this module angular-loading-bar it is very easy to implement and modify. It certainly meets your need.
It works as follows, all service requisition $http
it will "capture" and will inject into your code a progress bar and also in the bottom right a loading.
In the project’s own github there is documentation on how to implement.
First step to using it is to put your dependency
angular.module('myApp', ['angular-loading-bar'])
And also don’t forget to put your files in the project
<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='build/loading-bar.min.js'></script>
Once this is done any request will be activated.
0
There are some ways. If you want to show the spinner whenever Angular requests, implement an Interceptor Factory, as in the answer accept this question in the English OS:
This Interceptor will be executed whenever a request to the $http service is made. The key is this line here:
$httpProvider.interceptors.push('httpInterceptor');
That injects the Interceptor into the Prior.
Browser other questions tagged javascript ajax angularjs spinners
You are not signed in. Login or sign up in order to post.