AngularJSで$ httpリクエスト中にスピナーGIFを表示しますか？
私はAjaxリクエストをするためにAngularJSの$httpサービスを使っています。
Ajaxリクエストの実行中にスピナーGIF（または別の種類のビジーインジケーター）を表示する方法を教えてください。
AngularJSのドキュメントにはajaxstarteventのようなものは何もありません。
これが 現在 過去のAngularJSの呪文：
angular.module('SharedServices', [])
.config(function ($httpProvider) {
$httpProvider.responseInterceptors.Push('myHttpInterceptor');
var spinnerFunction = function (data, headersGetter) {
// todo start the spinner here
//alert('start spinner');
$('#mydiv').show();
return data;
};
$httpProvider.defaults.transformRequest.Push(spinnerFunction);
})
// register the interceptor as a service, intercepts ALL angular ajax http calls
.factory('myHttpInterceptor', function ($q, $window) {
return function (promise) {
return promise.then(function (response) {
// do something on success
// todo hide the spinner
//alert('stop spinner');
$('#mydiv').hide();
return response;
}, function (response) {
// do something on error
// todo hide the spinner
//alert('stop spinner');
$('#mydiv').hide();
return $q.reject(response);
});
};
});
//regular angular initialization continued below....
angular.module('myApp', [ 'myApp.directives', 'SharedServices']).
//.......
残りはこれです（HTML/CSS）.... using
$('#mydiv').show();
$('#mydiv').hide();
切り替えます。注：上記は角度モジュールでポストの始めに使用されます
#mydiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color:grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
<div id="mydiv">
<img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>
これは本当にあなたの特定のユースケースによりますが、簡単な方法はこのようなパターンに従うでしょう：
.controller('MainCtrl', function ( $scope, myService ) {
$scope.loading = true;
myService.get().then( function ( response ) {
$scope.items = response.data;
}, function ( response ) {
// TODO: handle the error somehow
}).finally(function() {
// called no matter success or failure
$scope.loading = false;
});
});
そして、あなたのテンプレートでそれに反応します：
<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>
これはdirectiveとng-hideを使ったバージョンです。
これは、Angularの$httpサービスを介した all 呼び出し中にローダーを表示します。
テンプレート内：
<div class="loader" data-loading></div>
ディレクティブ：
angular.module('app')
.directive('loading', ['$http', function ($http) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (value) {
if (value) {
element.removeClass('ng-hide');
} else {
element.addClass('ng-hide');
}
});
}
};
}]);
要素にng-hideクラスを使用することで、jqueryを回避できます。
カスタマイズ：interceptorを追加
Loading-interceptorを作成すると、条件に基づいてローダーを表示/非表示にすることができます。
ディレクティブ：
var loadingDirective = function ($rootScope) {
return function ($scope, element, attrs) {
$scope.$on("loader_show", function () {
return element.removeClass('ng-hide');
});
return $scope.$on("loader_hide", function () {
return element.addClass('ng-hide');
});
};
};
インターセプター：
- 例：
response.background === true;のときにspinnerを表示しない requestまたはresponse、あるいはその両方をインターセプトして$rootScope.$broadcast("loader_show");または$rootScope.$broadcast("loader_hide");を設定する
NgResourceを使用している場合、オブジェクトの$olved属性はローダーに役立ちます。
以下のリソースの場合：
var User = $resource('/user/:id', {id:'@id'});
var user = User.get({id: 1})
ローダをリソースオブジェクトの$olved属性にリンクすることができます。
<div ng-hide="user.$resolved">Loading ...</div>
https://github.com/wongatech/angular-http-loader はこれに適したプロジェクトです。
ここでの例 http://wongatech.github.io/angular-http-loader/
以下のコードは、リクエストが発生したときのテンプレートの例/ loader.tpl.htmlを示しています。
<div ng-http-loader template="example/loader.tpl.html"></div>
いくつかの非同期呼び出しに応じて少しローダーを表示するangular-busyディレクティブを発見したばかりです。
たとえば、GETを作成する必要がある場合は、$scope内のpromiseを参照してください。
$scope.req = $http.get('http://google.fr');
そしてそれをこんな風に呼ぶ：
<div cg-busy="req"></div>
これが GitHub。
bowerを使ってインストールすることもできます（プロジェクトの依存関係を更新することを忘れないでください）。
bower install angular-busy --save
あなたがサービス/ファクトリー内であなたのAPI呼び出しをラッピングしているなら、あなたはそこでローディングカウンターを追跡することができ（そして answer そして@JMaylinによる素晴らしい同時提案）、そしてディレクティブを通してローディングカウンターを参照できます。またはそれらの任意の組み合わせ。
APIラッパー
yourModule
.factory('yourApi', ['$http', function ($http) {
var api = {}
//#region ------------ spinner -------------
// ajax loading counter
api._loading = 0;
/**
* Toggle check
*/
api.isOn = function () { return api._loading > 0; }
/**
* Based on a configuration setting to ignore the loading spinner, update the loading counter
* (for multiple ajax calls at one time)
*/
api.spinner = function(delta, config) {
// if we haven't been told to ignore the spinner, change the loading counter
// so we can show/hide the spinner
if (NG.isUndefined(config.spin) || config.spin) api._loading += delta;
// don't let runaway triggers break stuff...
if (api._loading < 0) api._loading = 0;
console.log('spinner:', api._loading, delta);
}
/**
* Track an ajax load begin, if not specifically disallowed by request configuration
*/
api.loadBegin = function(config) {
api.spinner(1, config);
}
/**
* Track an ajax load end, if not specifically disallowed by request configuration
*/
api.loadEnd = function (config) {
api.spinner(-1, config);
}
//#endregion ------------ spinner -------------
var baseConfig = {
method: 'post'
// don't need to declare `spin` here
}
/**
* $http wrapper to standardize all api calls
* @param args stuff sent to request
* @param config $http configuration, such as url, methods, etc
*/
var callWrapper = function(args, config) {
var p = angular.extend(baseConfig, config); // override defaults
// fix for 'get' vs 'post' param attachment
if (!angular.isUndefined(args)) p[p.method == 'get' ? 'params' : 'data'] = args;
// trigger the spinner
api.loadBegin(p);
// make the call, and turn of the spinner on completion
// note: may want to use `then`/`catch` instead since `finally` has delayed completion if down-chain returns more promises
return $http(p)['finally'](function(response) {
api.loadEnd(response.config);
return response;
});
}
api.DoSomething = function(args) {
// yes spinner
return callWrapper(args, { cache: true });
}
api.DoSomethingInBackground = function(args) {
// no spinner
return callWrapper(args, { cache: true, spin: false });
}
// expose
return api;
});
スピナー指令
(function (NG) {
var loaderTemplate = '<div class="ui active dimmer" data-ng-show="hasSpinner()"><div class="ui large loader"></div></div>';
/**
* Show/Hide spinner with ajax
*/
function spinnerDirective($compile, api) {
return {
restrict: 'EA',
link: function (scope, element) {
// listen for api trigger
scope.hasSpinner = api.isOn;
// attach spinner html
var spin = NG.element(loaderTemplate);
$compile(spin)(scope); // bind+parse
element.append(spin);
}
}
}
NG.module('yourModule')
.directive('yourApiSpinner', ['$compile', 'yourApi', spinnerDirective]);
})(angular);
使用法
<div ng-controller="myCtrl" your-api-spinner> ... </div>
ページのロードやモーダルの場合、最も簡単な方法はng-showディレクティブを使用してスコープデータ変数の1つを使用することです。何かのようなもの：
ng-show="angular.isUndefined(scope.data.someObject)".
ここで、someObjectは未定義ですが、スピナーは表示されます。サービスがデータを返してsomeObjectが入力されると、スピナーは非表示状態に戻ります。
これは私が思うスピナーを追加する最も簡単な方法です： -
あなたはこれらの美しいスピナーのうちのどれかのdivタグと一緒にng-showを使うことができます http://tobiasahlin.com/spinkit/ {{これは私のページではない}}
そして、あなたはこの種の論理を使うことができます
//ajax start
$scope.finderloader=true;
$http({
method :"POST",
url : "your URL",
data: { //your data
}
}).then(function mySucces(response) {
$scope.finderloader=false;
$scope.search=false;
$scope.myData =response.data.records;
});
//ajax end
<div ng-show="finderloader" class=spinner></div>
//add this in your HTML at right placeBased on Josh David Miller response:
<body>
<header>
</header>
<div class="spinner" ng-show="loading">
<div class="loader" ></div>
</div>
<div ng-view=""></div>
<footer>
</footer>
</body>
このCSSを追加します。
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
border-bottom : 16px solid black;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
position: absolute;
top: 45%;
left: 45%;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner{
width: 100%;
height: 100%;
z-index: 10000;
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
text-align: center;
vertical-align: middle;
background: white;
opacity: 0.6;
}
そしてちょうどあなたの角度で追加：
$ rootScope.loading = false; $ rootScope.loading = true; - > $ http.getが終了したとき.
@bulltoriousからの素晴らしい答えの私のバージョンを共有し、新しいアンギュラビルド用に更新し（このコードではバージョン1.5.8を使用しました）、同時に複数の同時要求に対してロバストになるようにカウンタを使用するという@ JMaylinの考えを組み込みました。最小ミリ秒数を下回る要求に対してアニメーションの表示をスキップするオプション。
var app = angular.module('myApp');
var BUSY_DELAY = 1000; // Will not show loading graphic until 1000ms have passed and we are still waiting for responses.
app.config(function ($httpProvider) {
$httpProvider.interceptors.Push('busyHttpInterceptor');
})
.factory('busyHttpInterceptor', ['$q', '$timeout', function ($q, $timeout) {
var counter = 0;
return {
request: function (config) {
counter += 1;
$timeout(
function () {
if (counter !== 0) {
angular.element('#busy-overlay').show();
}
},
BUSY_DELAY);
return config;
},
response: function (response) {
counter -= 1;
if (counter === 0) {
angular.element('#busy-overlay').hide();
}
return response;
},
requestError: function (rejection) {
counter -= 1;
if (counter === 0) {
angular.element('#busy-overlay').hide();
}
return rejection;
},
responseError: function (rejection) {
counter -= 1;
if (counter === 0) {
angular.element('#busy-overlay').hide();
}
return rejection;
}
}
}]);
これは私にはうまくいきます：
HTML：
<div id="loader" class="ng-hide" ng-show="req.$$state.pending">
<img class="ajax-loader"
width="200"
height="200"
src="/images/spinner.gif" />
</div>
角：
$scope.req = $http.get("/admin/view/"+id).success(function(data) {
$scope.data = data;
});
$ httpから返される約束は保留中ですが、ng-showはそれを "真実"と評価します。これは約束が解決されると自動的に更新されます...これはまさに私たちが望むものです。
httpリクエストでローディングバーを表示するためにインターセプトに続いて使用 /
'use strict';
appServices.factory('authInterceptorService', ['$q', '$location', 'localStorage','$injector','$timeout', function ($q, $location, localStorage, $injector,$timeout) {
var authInterceptorServiceFactory = {};
var requestInitiated;
//start loading bar
var _startLoading = function () {
console.log("error start loading");
$injector.get("$ionicLoading").show();
}
//stop loading bar
var _stopLoading = function () {
$injector.get("$ionicLoading").hide();
}
//request initiated
var _request = function (config) {
requestInitiated = true;
_startLoading();
config.headers = config.headers || {};
var authDataInitial = localStorage.get('authorizationData');
if (authDataInitial && authDataInitial.length > 2) {
var authData = JSON.parse(authDataInitial);
if (authData) {
config.headers.Authorization = 'Bearer ' + authData.token;
}
}
return config;
}
//request responce error
var _responseError = function (rejection) {
_stopLoading();
if (rejection.status === 401) {
$location.path('/login');
}
return $q.reject(rejection);
}
//request error
var _requestError = function (err) {
_stopLoading();
console.log('Request Error logging via interceptor');
return err;
}
//request responce
var _response = function(response) {
requestInitiated = false;
// Show delay of 300ms so the popup will not appear for multiple http request
$timeout(function() {
if(requestInitiated) return;
_stopLoading();
console.log('Response received with interceptor');
},300);
return response;
}
authInterceptorServiceFactory.request = _request;
authInterceptorServiceFactory.responseError = _responseError;
authInterceptorServiceFactory.requestError = _requestError;
authInterceptorServiceFactory.response = _response;
return authInterceptorServiceFactory;
}]);
Http要求呼び出しを管理するために、角度インターセプターを使用することができます。
<div class="loader">
<div id="loader"></div>
</div>
<script>
var app = angular.module("myApp", []);
app.factory('httpRequestInterceptor', ['$rootScope', '$location', function ($rootScope, $location) {
return {
request: function ($config) {
$('.loader').show();
return $config;
},
response: function ($config) {
$('.loader').hide();
return $config;
},
responseError: function (response) {
return response;
}
};
}]);
app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $httpProvider) {
$httpProvider.interceptors.Push('httpRequestInterceptor');
}]);
</script>
異なるURL変更間の読み込みを示す別のソリューションは次のとおりです。
$rootScope.$on('$locationChangeStart', function() {
$scope.loading++;
});
$rootScope.$on('$locationChangeSuccess', function() {
$timeout(function() {
$scope.loading--;
}, 300);
});
そして、マークアップで、スピナーをng-show="loading"で切り替えるだけです。
Ajaxリクエストで表示する場合は、リクエストの開始時と終了時に$scope.loading++を追加するだけで、$scope.loading--を追加します。
インターセプターやjQueryを使わない簡単な方法
これは、サードパーティのライブラリ、インターセプター、またはjQueryを必要としないスピナーを表示するための簡単な方法です。
コントローラで、フラグを設定およびリセットします。
function starting() {
//ADD SPINNER
vm.starting = true;
$http.get(url)
.then(function onSuccess(response) {
vm.data = response.data;
}).catch(function onReject(errorResponse) {
console.log(errorResponse.status);
}).finally(function() {
//REMOVE SPINNER
vm.starting = false;
});
};
HTMLでは、フラグを使用します。
<div ng-show="vm.starting">
<img ng-src="spinnerURL" />
</div>
<div ng-hide="vm.starting">
<p>{{vm.data}}</p>
</div>
vm.startingフラグは、XHRの起動時にtrueに設定され、XHRの完了時にクリアされます。
次の方法は、すべてのリクエストを記録し、すべてのリクエストが完了した後にのみ非表示にします。
app.factory('httpRequestInterceptor', function(LoadingService, requestCount) {
return {
request: function(config) {
if (!config.headers.disableLoading) {
requestCount.increase();
LoadingService.show();
}
return config;
}
};
}).factory('httpResponseInterceptor', function(LoadingService, $timeout, error, $q, requestCount) {
function waitAndHide() {
$timeout(function() {
if (requestCount.get() === 0){
LoadingService.hide();
}
else{
waitAndHide();
}
}, 300);
}
return {
response: function(config) {
requestCount.descrease();
if (requestCount.get() === 0) {
waitAndHide();
}
return config;
},
responseError: function(config) {
requestCount.descrease();
if (requestCount.get() === 0) {
waitAndHide();
}
var deferred = $q.defer();
error.show(config.data, function() {
deferred.reject(config);
});
return deferred.promise;
}
};
}).factory('requestCount', function() {
var count = 0;
return {
increase: function() {
count++;
},
descrease: function() {
if (count === 0) return;
count--;
},
get: function() {
return count;
}
};
})あなたもこのようなことを試すことができます：
ディレクティブを作成します。
myApp.directive('loader', function () {
return {
restrict: 'A',
scope: {cond: '=loader'},
template: '<span ng-if="isLoading()" class="soft"><span class="fa fa-refresh fa-spin"></span></span>',
link: function (scope) {
scope.isLoading = function() {
var ret = scope.cond === true || (
scope.cond &&
scope.cond.$$state &&
angular.isDefined(scope.cond.$$state.status) &&
scope.cond.$$state.status === 0
);
return ret;
}
}
};
});
次にmainCtrlにこのようなものを追加します。
// Return TRUE if some request is LOADING, else return FALSE
$scope.isLoading = function() {
return $http.pendingRequests.length > 0;
};
そしてHTMLはこのようになります。
<div class="buttons loader">
<span class="icon" loader="isLoading()"></span>
</div>
このコードでディレクティブを作成します。
$scope.$watch($http.pendingRequests, toggleLoader);
function toggleLoader(status){
if(status.length){
element.addClass('active');
} else {
element.removeClass('active');
}
}
あなたがすべてのHTTPリクエストの呼び出しのためにローダーを表示したい場合は、HTTPリクエストの呼び出しを管理するために角度インターセプターを使用することができます、
これがサンプルコードです
<body data-ng-app="myApp">
<div class="loader">
<div id="loader"></div>
</div>
<script>
var app = angular.module("myApp", []);
app.factory('httpRequestInterceptor', ['$rootScope', '$location', function ($rootScope, $location) {
return {
request: function ($config) {
$('.loader').show();
return $config;
},
response: function ($config) {
$('.loader').hide();
return $config;
},
responseError: function (response) {
return response;
}
};
}]);
app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $httpProvider) {
$httpProvider.interceptors.Push('httpRequestInterceptor');
}]);
</script>
</body>
position：fixed の機能が最近変更されて以来、私はすべての要素の上にgifローダーを表示することが困難であったので、私はAngularの作り付けの jQuery を使わなければなりませんでした。
HTML
<div ng-controller="FetchController">
<div id="spinner"></div>
</div>
Css
#spinner {display: none}
body.spinnerOn #spinner { /* body tag not necessary actually */
display: block;
height: 100%;
width: 100%;
background: rgba(207, 13, 48, 0.72) url(img/loader.gif) center center no-repeat;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
body.spinnerOn main.content { position: static;} /* and whatever content needs to be moved below your fixed loader div */
コントローラー
app.controller('FetchController', ['$scope', '$http', '$templateCache', '$location', '$q',
function($scope, $http, $templateCache, $location, $q) {
angular.element('body').addClass('spinnerOn'); // add Class to body to show spinner
$http.post( // or .get(
// your data here
})
.then(function (response) {
console.info('success');
angular.element('body').removeClass('spinnerOn'); // hide spinner
return response.data;
}, function (response) {
console.info('error');
angular.element('body').removeClass('spinnerOn'); // hide spinner
});
})
お役に立てれば ：）
すべての答えは複雑であるか複雑です。またはDRYの概念を知っている場合は非常に間違った方法であるすべての要求にいくつかの変数を設定する必要があります。この簡単なインターセプターの例では、私はajaxが開始するときにマウスを待機に設定し、ajaxが終了するときにそれをautoに設定しました。
$httpProvider.interceptors.Push(function($document) {
return {
'request': function(config) {
// here ajax start
// here we can for example add some class or show somethin
$document.find("body").css("cursor","wait");
return config;
},
'response': function(response) {
// here ajax ends
//here we should remove classes added on request start
$document.find("body").css("cursor","auto");
return response;
}
};
});
コードはアプリケーション設定app.configに追加する必要があります。私はロード状態でマウスを変更する方法を示しましたが、そこでは任意のローダーコンテンツを表示/非表示にすること、またはローダーを表示しているいくつかのCSSクラスを追加、削除することが可能です。
インターセプタはすべてのajax呼び出しで実行されるので、特別なブール変数 （$ scope.loading = true/falseなど） をhttp呼び出しごとに作成する必要はありません。
これは私の実装です。ng-showやリクエストカウンターと同じくらい簡単です。
$ httpへのすべてのリクエストに新しいサービスを使用します。
myApp.service('RqstSrv', [ '$http', '$rootScope', function($http, $rootScope) {
var rqstService = {};
rqstService.call = function(conf) {
$rootScope.currentCalls = !isNaN($rootScope.currentCalls) ? $rootScope.currentCalls++ : 0;
$http(conf).then(function APICallSucceed(response) {
// Handle success
}, function APICallError(response) {
// Handle error
}).then(function() {
$rootScope.currentCalls--;
});
}
} ]);
そして、現在の呼び出し数に基づいてローダーベースを使用できます。
<img data-ng-show="currentCalls > 0" src="images/ajax-loader.gif"/>
.factory('authHttpResponseInterceptor', ['$q', function ($q) {
return {
request: function(config) {
angular.element('#spinner').show();
return config;
},
response : function(response) {
angular.element('#spinner').fadeOut(3000);
return response || $q.when(response);
},
responseError: function(reason) {
angular.element('#spinner').fadeOut(3000);
return $q.reject(reason);
}
};
}]);
.config(['$routeProvider', '$locationProvider', '$translateProvider', '$httpProvider',
function ($routeProvider, $locationProvider, $translateProvider, $httpProvider) {
$httpProvider.interceptors.Push('authHttpResponseInterceptor');
}
]);
in your Template
<div id="spinner"></div>
css
#spinner,
#spinner:after {
border-radius: 50%;
width: 10em;
height: 10em;
background-color: #A9A9A9;
z-index: 10000;
position: absolute;
left: 50%;
bottom: 100px;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}