A simple example is given below:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<body ng-controller= "Testctrl" >
<button ng-click= "tt ()" > Click button </button>
<script src= "/ajax/libs/angularjs/1.2.0/angular.min.js" ></script>
<script src= "/angular-loading-bar/src/loading-bar.js" ></script>
<link href= '/angular-loading-bar/src/loading-bar.css ' rel= ' stylesheet '/>
<script>
Angular.module (' myApp ', [' Chieffancypants.loadingbar '])
. Controller (' Testctrl ', function ($scope, $http) {
var config = {
URL: '/test.php ',
Method: ' Get '
};
$http (config). Success (function (data) {
alert (data);
})
$scope. tt = function () {
$http (config). Success (function (data) {
alert (data);
})
}
})
</script>
</body>
The code in PHP's test.php is as follows
<?php
Sleep (3);
echo ' 3 ';
You can see that this plugin is really good, and every time you send a $http request, you can see the loading progress bar.