When I was working on the progress bar I went through
lots of examples on the net but all of them where create it from scratch. But I
found one library on the git hub created by Wes Cruver
which is very easy and useful to create the progress bar actually you don't
need to do anything extra you just need to add the library and inject into the
file and that's it rest of the things will be taken care on its own.
Libraries to
add -
GitHub Link -
Dependency Injection -
['angular-loading-bar']
<html data-ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>
<script>
var app = angular.module('app', ['angular-loading-bar']);
app.controller('demoCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('https://rallycoding.herokuapp.com/api/music_albums').then(function (response) {
$scope.items =
response.data;
}, function (error) {
$scope.items = null;
})}]);
</script>
</head>
<body data-ng-controller="demoCtrl">
<table>
<tr>
<th>Title</td>
<th> Artist</td>
<th> Url</td>
<th>Image</td>
<th>Thumbnail Image</td>
</tr>
<tr data-ng-repeat="item in items">
<td data-ng-bind="item.title"></td>
<td data-ng-bind="item.artist"></td>
<td data-ng-bind="item.url"></td>
<td data-ng-bind="item.image"></td>
<td data-ng-bind="item.thumbnail_image"></td>
</tr>
</table>
</body>
</html>
