Este exemplo de código mostra como colocar uma barrinha de progresso (Loading Bar) no topo da página para ser exibida quando a página está carregando ou em processamento.
Trechos tirados do site: http://chieffancypants.github.io/angular-loading-bar/#
Baixe o exemplo clicando no link abaixo.
Download exemplo
1o. crie o arquivo HTML e inclua todos os arquivos baixados no site indicado acima.
funcionamento do controle, pois ele foi criado dentro da biblioteca do Angular.
Criando o HTML e fazendo os includes certinho, já fará com que o componente apareça
assim que você carregar a página.
Outra dica é, se você utiliza UpdatePanel (Asp.Net) ou faz chamadas ajax, uma boa
dica é criar funçoes para interceptar essas chamadas e apresentar o componente
Loading Bar. Veja como:
Adicione o codigo abaixo abaixo da tag body. Esse script é responsavel por detectar o inicio
e sim de chamadas assíncronas.
var scope = angular.element(document.getElementById("body1")).scope();
scope.$apply(function () {
scope.complete();
});
Trechos tirados do site: http://chieffancypants.github.io/angular-loading-bar/#
Baixe o exemplo clicando no link abaixo.
Download exemplo
Vamos ao código!
1o. crie o arquivo HTML e inclua todos os arquivos baixados no site indicado acima.
<!doctype html> <html> <head> <title>Angular Loading Bar</title> <!-- angular --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/
angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/
angular-animate.min.js"></script>
<!-- loadingbar -->
<script src="src/loading-bar.js"></script>
<link href='src/loading-bar.css' rel='stylesheet' />
<!-- example app -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/
css/bootstrap.min.css">
<script src="app.js"></script>
<link href='app.css' rel='stylesheet' />
</head>
<body ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
<div class="jumbotron">
<h1>Angular Loading Bar</h1>
<p>An automatic loading bar using angular interceptors.<small> It works
automatically, so simply include it as a dependency and it will automatically
display the progress of your <code>$http</code> requests.</small></p>
<p>
<a href="https://github.com/chieffancypants/angular-loading-bar/archive/
master.zip" class="btn btn-primary btn-lg">
<i class="glyphicon glyphicon-download"></i> Download
</a>
<a href="https://github.com/chieffancypants/angular-loading-bar"
class="btn btn-default btn-lg">
<i class="glyphicon glyphicon-share"></i> View on GitHub
</a>
</p>
</div>
<footer ng-hide="fakeIntro">
Footer@2016
</footer>
</body>
</html>
2o. Perceba os atributos adicionados na tag body, eles são necessários para o
funcionamento do controle, pois ele foi criado dentro da biblioteca do Angular.
Criando o HTML e fazendo os includes certinho, já fará com que o componente apareça
assim que você carregar a página.
Outra dica é, se você utiliza UpdatePanel (Asp.Net) ou faz chamadas ajax, uma boa
dica é criar funçoes para interceptar essas chamadas e apresentar o componente
Loading Bar. Veja como:
Adicione o codigo abaixo abaixo da tag body. Esse script é responsavel por detectar o inicio
e sim de chamadas assíncronas.
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
/*loader bar Angular*/
var scope = angular.element(document.getElementById("body1")).scope();
scope.$apply(function () {
scope.start();
});
}
function EndRequestHandler(sender, args) {
if (args.get_error() != undefined) {
var errorMessage = args.get_error().message;
args.set_errorHandled(true);
alert(errorMessage);
}
/*loader bar Angular*/
var scope = angular.element(document.getElementById("body1")).scope();
scope.$apply(function () {
scope.complete();
});
}
</script>
O que eu fiz foi colocar a chamada ao método start() no BeginRequestHandler, e uma chamada ao metódo complete() dentro da função que detecta o fim da requisição.var scope = angular.element(document.getElementById("body1")).scope();
scope.$apply(function () {
scope.complete();
});
Espero ter ajudado.
Um abraço.
Willon Santos Félix
Comentários