Thanh tiến trình tải AngularJS

Question

Khi sử dụng AngularJS và thực hiện chuyển hướng bằng cách sử dụng $location.path('/path') trang mới mất một thời gian để tải, đặc biệt là trên thiết bị di động.

Có cách nào để thêm thanh tiến trình để tải không? Có thể một cái gì đó như YouTube có?

Answer 1

Đối với thanh tiến trình như YouTube có, bạn có thể xem ngprogress. Sau đó, ngay sau cấu hình ứng dụng của bạn (ví dụ), bạn có thể intercept route's events.

Và làm điều gì đó như:

app.run(function($rootScope, ngProgress) { 
    $rootScope.$on('$routeChangeStart', function() { 
    ngProgress.start(); 
    }); 

    $rootScope.$on('$routeChangeSuccess', function() { 
    ngProgress.complete(); 
    }); 
    // Do the same with $routeChangeError 
}); 

Answer 2

nếu đó là con đường tiếp theo mà cần có thời gian để tải ví dụ thực hiện cuộc gọi ajax trước khi bộ điều khiển chạy (giải quyết cấu hình trên tuyến đường) sau đó sử dụng $ routeChangeStart, $ routeChangeSuccess và $ routeChangeError của dịch vụ tuyến đường $.

đăng ký bộ điều khiển cấp cao nhất (bên ngoài ng-view) lắng nghe những sự kiện này và quản lý biến boolean trong phạm vi $ của nó.

sử dụng biến này với ng-show để che phủ "tải, vui lòng chờ" div.

nếu tuyến đường tiếp theo tải nhanh (tức là bộ điều khiển của nó chạy nhanh) nhưng dữ liệu được bộ điều khiển yêu cầu mất nhiều thời gian để tải, tôi sợ, bạn phải quản lý trạng thái hiển thị của người quay trong bộ điều khiển và lượt xem.

cái gì đó như:

$scope.data = null; 
$http.get("/whatever").success(function(data) { 
    $scope.data = data; 
}); 

<div ng-show="data !== null">...</div> 
<div ng-show="data === null" class="spinner"></div> 

Answer 3

sử dụng góc nạp-bar

độc bản demo ở đây .. https://github.com/danday74/angular-loading-bar-standalone-demo

Answer 4

Đây là một giải pháp làm việc mà tôi đang sử dụng trong ứng dụng của tôi. ngProgress là thư viện tốt nhất hiện có để hiển thị thanh tải khi thay đổi url.

Hãy nhớ tiêm ngProgressFactory thay vì ngProgress, trái ngược với giải pháp của Luc.

angular.module('appRoutes', []).run(function ($rootScope, ngProgressFactory) { 
    $rootScope.$on("$routeChangeStart", function() { 
     $rootScope.progressbar = ngProgressFactory.createInstance(); 
     $rootScope.progressbar.start(); 

    }); 

    $rootScope.$on("$routeChangeSuccess", function() { 
     $rootScope.progressbar.complete(); 
    }); 
}); 

Update Nov-2015 - Sau khi phân tích phương pháp này với timings chrome, tôi đã quan sát thấy rằng điều này sẽ không phải là cách đúng để thêm một thanh tải. Chắc chắn, thanh tải sẽ được hiển thị cho khách truy cập, nhưng nó sẽ không được đồng bộ với thời gian tải trang thực tế.

Answer 5

Vì anwser của @ Luc ngProgress đã thay đổi một chút và bây giờ bạn chỉ có thể tiêm ngProgressFactory, phải được sử dụng để tạo cá thể ngProgress. Cũng trái với câu trả lời @Ketan Patil của bạn chỉ nên nhanh chóng ngProgress lần:

angular.module('appRoutes', []).run(function ($rootScope, ngProgressFactory) { 

    // first create instance when app starts 
    $rootScope.progressbar = ngProgressFactory.createInstance(); 

    $rootScope.$on("$routeChangeStart", function() { 
     $rootScope.progressbar.start(); 
    }); 

    $rootScope.$on("$routeChangeSuccess", function() { 
     $rootScope.progressbar.complete(); 
    }); 
});