[英]Spinner in Angular.js
I want to use a spinner which I can show during some of the rest api calls for a better UX. 我想使用一个微调器,可以在其余的api调用中显示该微调器,以获得更好的UX。 I have come across many existing github projects which does exactly similar things.
我遇到了许多现有的github项目,它们的功能完全相似。
https://github.com/cgross/angular-busy https://github.com/cgross/angular-busy
https://github.com/urish/angular-spinner https://github.com/urish/angular-spinner
But I'm not able to use any of the existing projects. 但是我无法使用任何现有项目。 I think before I start writing something of my own, I want to know if things which I'm looking for can be done using these projects or any other existing project.
我认为在开始编写自己的东西之前,我想知道我正在寻找的东西是否可以使用这些项目或任何其他现有项目来完成。
Requirement: 需求:
I think angular-busy demo does solves most of the above requirements except that it needs a promise param in html. 我认为忙于忙碌的演示确实解决了上述大多数要求,只是它需要html中的promise参数。 Is there anyway by which I can control the start/stop dynamically from my controller rather than giving a promise.
无论如何,我可以通过控制器动态地控制启动/停止,而不用做出承诺。
Angular-spinner demo is good but it doesn't fade out background. 角度旋转演示很好,但不会淡出背景。 Is there any way to fade out background ?
有什么方法可以淡出背景吗?
Can anyone give me some pointers how exactly can I solve my problem ? 谁能给我一些指点我该如何解决我的问题?
I always create my own spinner with this logic: 我总是使用以下逻辑创建自己的微调器:
js: JS:
app.directive('ngSpinnerBar', ['$rootScope',
function ($rootScope) {
return {
link: function (scope, element, attrs) {
// by defult hide the spinner bar
element.addClass('hide');
// count how many time requests were sent to the server
// so when they all done the spinner will be removed
scope.counter = 0;
$rootScope.$on('$stateNetworkRequestStarted', function () {
scope.counter++;
element.removeClass('hide'); // show spinner bar
// $('body').addClass('page-on-load');
});
$rootScope.$on('$stateNetworkRequestEnded', function () {
scope.counter--;
if (scope.counter <= 0) {
scope.counter = 0;
element.addClass('hide'); // show spinner bar
// $('body').removeClass('page-on-load'); // remove page loading indicator
}
});
}
};
}
])
html: HTML:
<div ng-spinner-bar></div>
As you can see every time i send a request to the api i show the spinner (css create the spinning - link ) and when result come back i send event to hide the spinner. 如您所见,每次我向api发送请求时,我都会显示微调框(css创建Spinning- link ),结果返回时,我会发送事件以隐藏微调框。
if you want to make things easier for you, you should create a service which send all the api requests (wrap $http). 如果您想让事情变得更轻松,则应该创建一个发送所有api请求的服务(包装$ http)。 that way you can ensure every request will show the spinner.
这样,您可以确保每个请求都会显示微调框。
EDIT 编辑
the first result in google gave me this - fade background in angular 第一个结果在谷歌给了我这个 -淡入背景角
It seems like http://bsalex.github.io/angular-loading-overlay/_site/ fits the requirements. 看起来http://bsalex.github.io/angular-loading-overlay/_site/符合要求。
For example: 例如:
var app = angular.module('app-http-integration-with-reference-id-and-matchers', [ 'bsLoadingOverlay', 'bsLoadingOverlayHttpInterceptor' ]) .factory('randomTextInterceptor', function(bsLoadingOverlayHttpInterceptorFactoryFactory) { return bsLoadingOverlayHttpInterceptorFactoryFactory({ referenceId: 'random-text-spinner', requestsMatcher: function(requestConfig) { return requestConfig.url.indexOf('hipsterjesus') !== -1; } }); }) .factory('randomUserInterceptor', function(bsLoadingOverlayHttpInterceptorFactoryFactory) { return bsLoadingOverlayHttpInterceptorFactoryFactory({ referenceId: 'random-user-spinner', requestsMatcher: function(requestConfig) { return requestConfig.url.indexOf('randomuser') !== -1; } }); }) .config(function($httpProvider) { $httpProvider.interceptors.push('randomTextInterceptor'); $httpProvider.interceptors.push('randomUserInterceptor'); }).run(function($sce, bsLoadingOverlayService) { bsLoadingOverlayService.setGlobalConfig({ /* It is only an example, don't use this url in production. Copy this template to your code base or use integration with Spin.js (see Docs & Examples) */ templateUrl: $sce.trustAsResourceUrl('https://raw.githubusercontent.com/bsalex/angular-loading-overlay/gh-pages/_site/loading-overlay-template.html') }); }); app.controller('HttpIntegrationWithReferenceIdAndMatchersController', function($scope, $http, $sce, bsLoadingOverlayService) { $scope.randomText = $sce.trustAsHtml('Fetch result here'); $scope.randomUser = undefined; $scope.fetchRandomText = function() { $http.get('http://hipsterjesus.com/api/') .success(function(data) { $scope.randomText = $sce.trustAsHtml(data.text); }) .error(function() { $scope.randomText = $sce.trustAsHtml('Can not get the article'); }); }; $scope.fetchRandomUser = function() { $http.get('https://randomuser.me/api/') .success(function(data) { $scope.randomUser = data.results[0]; }); }; });
.random-result { display: flex; height: 170px; margin-top: 1em; } .random-result__text, .random-result__user { position: relative; overflow: auto; border: 2px dashed #C00; flex: 1; margin: 0.5em; padding: 0.5em; text-align: center; } .user__photo { width: 100px; height: 100px; border-radius: 50%; margin: 0; } .user__name { font-size: 1.5em; margin: 0.5em; padding: 0; text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <script src="https://rawgit.com/bsalex/angular-loading-overlay/master/dist/angular-loading-overlay.js"></script> <script src="https://rawgit.com/bsalex/angular-loading-overlay-http-interceptor/master/dist/angular-loading-overlay-http-interceptor.js"></script> <div ng-app="app-http-integration-with-reference-id-and-matchers"> <div ng-controller="HttpIntegrationWithReferenceIdAndMatchersController"> <div class="well well-lg bs-loading-container"> <button ng-click="fetchRandomText()">Fetch random text</button> <button ng-click="fetchRandomUser()">Fetch random user</button> <div class="random-result"> <div class="random-result__text" bs-loading-overlay bs-loading-overlay-reference-id="random-text-spinner" bs-loading-overlay-delay="3000"> <p ng-bind-html="randomText"></p> </div> <div class="random-result__user user" bs-loading-overlay bs-loading-overlay-reference-id="random-user-spinner" bs-loading-overlay-delay="3000"> <div ng-if="randomUser"> <img ng-src="{{randomUser.picture.large}}" alt="" class="user__photo" /> <p class="user__name"> {{randomUser.name.first}} {{randomUser.name.last}} </p> </div> </div> </div> </div> </div> </div>
In the snippet above I've used integration with $http service. 在上面的代码段中,我使用了与$ http服务的集成。 It matches requests and shows spinner with specified
referenceId
. 它匹配请求并显示具有指定
referenceId
微调器。
Also, the following features are available: 此外,还提供以下功能:
bsLoadingOverlayService.start();
bsLoadingOverlayService.start();
and bsLoadingOverlayService.stop();
bsLoadingOverlayService.stop();
; bsLoadingOverlayService.wrap()
; bsLoadingOverlayService.wrap()
包装Promises以显示和隐藏微调bsLoadingOverlayService.wrap()
。 bsLoadingOverlayService.createHandler({referenceId: 'handler-overlay'});
), to keep options in one place and then just call preconfiguredHandler.start();
bsLoadingOverlayService.createHandler({referenceId: 'handler-overlay'});
),将选项保留在一个位置,然后只需调用preconfiguredHandler.start();
and preconfiguredHandler.stop();
preconfiguredHandler.stop();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.