带有 $http 请求的 Angular js 中的百分比加载时间答案

【问题标题】：Percentage Loading Time in angular js with $http request带有 $http 请求的 Angular js 中的百分比加载时间
【发布时间】：2017-08-14 05:17:51
【问题描述】：

我正在使用 Angular 和 Rails 应用程序

我有一个演示应用程序。我需要显示加载角度响应所需的响应时间

举个例子。

我正在加载包含 100 k 个元素的数组的响应。我想显示百分比从 0% 开始并作为响应负载递增。加载完整响应后，它会完成 100% 的响应时间

文件使用说明

/app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
<title>Anguler</title>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
    <%= yield %>
</body>
</html>

/app/views/pages/index.html.erb

<div ng-app="myApp" ng-controller="customersCtrl">
    <ul>
        <li ng-repeat="x in myData">
            {{ x }}
        </li>
    </ul>
</div>

/app/controllers/pages_controller.rb

class PagesController < ApplicationController
   def index
       @arr = []
       for n in 1..100000
           @arr.push(n)
       end
       return render json: @arr
   end
end

/app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
    # Prevent CSRF attacks by raising an exception.
    # For APIs, you may want to use :null_session instead.
    protect_from_forgery with: :exception
end

/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular.min
//= require custom.min

/assets/javascripts/custom.js

var app = angular.module('myApp');
app.controller('customersCtrl', function($scope, $http) {
    $http.get("/").then(function (response) {
        $scope.myData = response.data.records;
    }
});

让我知道如何以百分比显示加载时间百分比

提前致谢

【问题讨论】：

为什么要在页面上呈现100k 元素，在这种情况下浏览器会死掉，因为ng-repeat 有效，使用分页或在向下滚动时延迟加载记录会有效
这不是我将设法减少数据的问题。我在演示应用程序中使用了 100000，因为在我的实时应用程序中，我必须使用这个百分比响应，并且没有大量记录。

标签： javascript ruby-on-rails angularjs ruby

【解决方案1】：

你可以使用这个库，因为这里是你最好的例子。

http://nervgh.github.io/pages/angular-file-upload/examples/image-preview/

【讨论】：

这不是 Ruby 想要的。

【解决方案2】：

angular-loading-bar 是一个很好的插件来帮助你实现它。

【讨论】：

这个不错，已经在用了。但它只会显示一个加载栏而不是百分比。
@techprat 百分比不可预测
@hooks zhang，我需要显示百分比。我已经集成了角度加载杆。工作正常。但现在需要在完成时显示 1%、10% 和 100% 等百分比。
紧急！你能帮我找到 angular-loading-bar 中百分比响应的可用资源吗非常感谢提前
@RubyZero RailsZero 一个关键问题——没有人知道加载它花费了很多时间，所以百分比是不可预测的。