I am currently utilizing Angular with my Rails application.
I have a sample app and I am interested in displaying the response time required to load a response in Angular.
For example,
When loading a response of an array containing 100,000 elements, I would like to display a percentage that starts at 0% and gradually increments as the response loads. Once the full response is loaded, it should show 100% completion.
Here are some details on how the files are being used:
/app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Angular</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;
}
});
Please advise on how to implement displaying the loading percentage time in Angular.
Thank you in advance.