2014-12-29 27 views
6

Mô-đun/mẹo nào có thể được sử dụng để xử lý tải trong AngularJS? Về cơ bản, làm cách nào để bạn bao gồm biểu tượng tải khi trang đang được tải (ví dụ: cài đặt tài khoản của người dùng HOẶC khi trang được tải ban đầu)? Có một thủ tục tiêu chuẩn hoặc ng- module?Làm thế nào để xử lý tải trong AngularJS?

Ps. Nếu câu hỏi của tôi quá mơ hồ hoặc không phù hợp, hãy sửa tôi. Tôi nghĩ rằng nó đã vượt qua tâm trí của hầu hết người mới bắt đầu góc.

+1

Có nhiều mô-đun cho việc này. Đã đề cập trong câu trả lời là: góc-tải-bar, góc-spinner, góc-wham-spinner. Cũng có ngProgress và ngProgressLite. – Martin

Trả lời

6

Đây là phương pháp dễ nhất để chỉ ra một hoặc nhiều yêu cầu XHR đang tiến hành, nếu bạn đang sử dụng định tuyến ui, nó cũng hiển thị cho bạn các tệp HTML được tìm nạp trong các yêu cầu XHR.

http://chieffancypants.github.io/angular-loading-bar/

Đó là một thanh độ giống như chỉ số tải Youtube, và nó dễ dàng phong cách thể.

Chỉ cần bao gồm thư viện làm mô-đun, đúng vậy.

angular.module('myApp', ['angular-loading-bar']) 

Bạn có thể muốn vô hiệu hóa vòng tròn hoặc chính thanh (cả hai cùng một lúc có thể trông hơi quá nhiều).

+0

Chúc mừng năm mới tôi say quá – AMG

5

Tôi tìm thấy câu trả lời này là rất hữu ích, biếu không của Josh David Miller:

.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> 

Nguồn: https://stackoverflow.com/a/15033322/4040107

+0

Khái niệm tuyệt vời. Liệu myService.get(). Sau đó (...) luôn bao gồm một yêu cầu nhận $ http hoặc nó có thể là bất cứ điều gì khác không? Ví dụ, nếu tôi có một chức năng dịch vụ tùy chỉnh .getSomethingElse() tôi có thể làm theo nó sau đó cũng lên với .then (...) - Tôi recap rằng tôi đã gặp khó khăn với nó trong quá khứ. – AMG

+0

Hãy thử gọi .getSomethingElse() trong một biến, sau đó sử dụng sau đó() với biến. Sau đây có thể hữu ích trong tài liệu Góc: https://docs.angularjs.org/api/ng/service/$q –

3

đã trả lời câu hỏi tương tự trước đó cũng ... Nếu bạn không muốn thực hiện nó cho mình, dưới đây là vài liên kết.

angular-spinner hoặc angular-sham-spinner

cũng đọc BLOG này định chi tiết như thế nào spinner làm việc với angularjs

nếu bạn muốn thực hiện điều đó cho mình ... sau đó

app.directive("spinner", function(){ 
return: { 
restrict: 'E', 
scope: {enable:"="}, 
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div> 
} 
}); 

i havent kiểm tra mã nhưng chỉ thị sẽ không phức tạp hơn thế này ...

Các vấn đề liên quan