Percentage load time in angular js with $ http request
I am using angular with rails app
I have a demo application. I need to show the response time it takes to load the response in angular
As an example.
I am uploading an array response of 100k elements. I want to show percentage start from 0% and gain as response load. When the complete answer is loaded, it completes 100% response time
File Usage Details
/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;
}
});
Let me know how it would be possible to show the percentage load time as a percentage
Thank you very much in advance
you can use this library because here is the best example for you.
http://nervgh.github.io/pages/angular-file-upload/examples/image-preview/
source to share