Loading with Angularjs

Question

Loading with Angularjs

Asked 7 years, 1 month ago

Viewed 1,485 times

1

I have an object that indicates that the page is being loaded. However, it is not working properly, it follows code:

HTML:

<div class="fundo_login">
  <div class="carregando_inicio" ng-if="carregando == true"> //Quando carregando for TRUE mostra o spinner
    <img src="/provas/app/imagens/spinning-circles.svg"/>
  </div>
  <div class="box_login" ng-if="carregando == false"> //Quando for false, mostra o conteúdo.
    <div class="painel_cadastro">
      <div class="logo_fabet">
        <img src="app/imagens/logo_fabet.jpg">
      </div>
    </div>
  </div>
</div>

JS:

$scope.carregando = true;

$scope.acabou = function() {
    $timeout(function(){
        $scope.carregando = false;
    }, 3000);
}

$scope.acabou();

Notice that caregando starts as TRUE so that soon the spinner appears, after 3 seconds its status is changed to FALSE, thus making disappear the spinner and appear the content. Parts of it are working. What is wrong is that when the page starts loading, the two appear together (for a few thousandths of a second), not respecting ng-if, as image below:

Another question, as I could do to disappear the spinner and show content only when the page is fully loaded?

You can post your full controller code?

– Jackson

2017/10/20 at 19:11

2 answers

1

Friend,

Apparently you didn’t insert the $timeout in your controller. it needs to be injected so that you can use it within your controller, such as $scope is.

I made a PLUNKER with practically the same code you did, but injecting the $timeout in the controller.

Regarding your other question, if you disappear with the body, you won’t be able to show spinner. Enclose your Content in a div and make the spinner uncoupled. Follow example below:

<body ng-app="meuApp">

   <div ng-if="!bodyCarregou"> meu spinner </div> 

   <div ng-if="bodyCarregou"> // mostrar se for true
      // Progame sua página dentro deste DIV
   </div>

</body>

I leave here the documentation of $TIMEOUT for reading.

I hope I’ve helped.

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.

by Alisson • **1,422** points · Answer 1 · 2017-05-18T21:33:12+00:00

I believe the problem is your scripts being loaded inside the tag <body>.

When the html is rendered in the browser, the scripts within the tag <body> containing the angular and your controller have not yet been loaded, so the ng-if has not yet been interpreted. When the script is interpreted, then everything will happen correctly. These thousandths of a second you’re noticing, that’s how long it takes the browser to run your scripts.

To force your scripts to run before the <body> be loaded, you need to put them inside the tag <head> in your html. Ex:

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
    <script type="text/javascript" src="angular/controller.js"></script>
</head>
<body>
    <div class="fundo_login">
      <div class="carregando_inicio" ng-if="carregando == true"> //Quando carregando for TRUE mostra o spinner
        <img src="/provas/app/imagens/spinning-circles.svg"/>
      </div>
      <div class="box_login" ng-if="carregando == false"> //Quando for false, mostra o conteúdo.
        <div class="painel_cadastro">
          <div class="logo_fabet">
            <img src="app/imagens/logo_fabet.jpg">
          </div>
        </div>
      </div>
    </div> 
</body>
</html>