角度加載動畫

Question

我只是想知道是否有人可以幫助我。我正在寫角度的應用程序，我堆棧。我在服務器端使用php和MySQL，並且所有的工作都很好。所有的http請求都在服務中。有時當請求大量數據或響應需要一段時間時，由於某種原因前端存在延遲。我已經有使用svg在css中加載動畫。我不知道如何實現它我的應用程序。當數據從服務器傳入時，顯示裝載程序的效果會更好。

我不是要求現成的解決方案，但對於在我的應用程序中實現它的最佳實踐有一些建議。

以下是我的登錄服務示例。

'use strict'; 
 

 
app.factory('loginService', function($http, $location, sessionService) { 
 
\t // Service must return 
 
\t return { 
 
\t \t login: function(user, scope) { 
 
\t \t \t // Send credential to the server 
 
\t \t \t var $promise = $http.post('http://localhost:8888/myApi/api/login/user.php', user); 
 
\t \t \t $promise.then(function(msg) { 
 
\t \t \t \t var uid = msg.data; 
 
\t \t \t \t if(uid) { 
 
\t \t \t \t \t if(uid.status == 'success') { 
 
\t \t \t \t \t \t //scope.msgtxt = uid.response.success; 
 
\t \t \t \t \t \t sessionService.set('uid', uid.session); 
 
\t \t \t \t \t \t $location.path('/home'); \t \t \t \t \t \t 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t scope.msgtxt = uid.error; 
 
\t \t \t \t \t } 
 
\t \t \t \t } else { 
 
\t \t \t \t \t $location.path('/login'); 
 
\t \t \t \t } 
 
\t \t \t }) 
 
\t \t }, 
 
\t \t logout: function() { 
 
\t \t \t sessionService.destroy('uid'); 
 
\t \t \t $location.path('/login'); 
 
\t \t }, 
 
\t \t islogged: function() { 
 
\t \t \t var $checkSessionServer = $http.post('http://localhost:8888/myApi/api/login/check_session.php'); 
 
\t \t \t return $checkSessionServer; 
 
\t \t } 
 
\t } 
 
});

Answer 1

Angular Loading Bar自動顯示加載基於你$http要求吧，所以你不必做任何事情來實現它。

想法很簡單：只要XHR 請求以角度出現，就添加一個加載欄/進度條。在同一時間 時間段內的多個請求將捆綁在一起，以便每個響應都會將 進度欄增加適當的金額。

您還可以更改進度條和微調器的HTML，這樣可以讓您以最少的工作制作一個非常棒的進度條。