Loading with AngularJS

Navigation
2

I have an object that indicates that the page is loading. However, it is not working correctly, 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();

Note that loading starts as TRUE so that the spinner will appear soon after 3 seconds its status is changed to FALSE, causing the spinner to disappear and the content to appear. Parts 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 shown below:

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

    
asked by anonymous 15.05.2017 / 21:23

2 answers

1

Friend,

You apparently did not insert $timeout into your controller. it needs to be injected so you can use it inside your controller, just like $scope is. I did a PLUNKER with pretty much the same code you did, but injecting $timeout no controller. Home Regarding your other question, if you disappear with the body, you will not be able to show spinner. Enclose your Content in a div and spin the spinner off. Here's an 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>

Here's the $ TIMEOUT documentation for reading.

I hope I have helped.

    
20.10.2017 / 21:18
-1

I think the problem is that your scripts are being loaded into the <body> tag.

When html is rendered in the browser, the scripts within the <body> tag containing the angle and your controller have not yet been loaded, ng-if has not yet been interpreted. When the script is interpreted, everything will happen correctly. These milliseconds you're noticing is the amount of time the browser takes to run your scripts.

To force your scripts to run before <body> is loaded, you need to place them within the <head> tag 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><scripttype="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>
    
18.05.2017 / 23:33
Session not holding value How to return a MAP using nativeQuery from JPA?