각도 연결 단계에서 스피너 표시

Question

렌더링하는 데 약 3 초가 소요되는보기가 있습니다. 그 시간 동안 사용자는 페이지에서 어떤 일도 일어나지 않습니다. 회 전자를 추가하려고 시도했지만 회전하지 않아 막혔습니다. JS 코드가 끝날 때까지 브라우저가 대기 중이므로 그 때까지 회 전자를 제어 할 수 없기 때문에 이것이라고 가정합니다. 그래서 JS 코드가 3 초 동안 실행되고 브라우저가 그 시간 동안 아무 것도 할 수 없다면 그걸 어떻게 최적화 할 수 있습니까? 프레임 워크를 사용하지 않았다면 코드를 여러 개의 덩어리로 나눠서 타임 아웃으로 실행할 수는 있었지만 링크 단계에서 Angular를 사용하여 코드를 수행하는 방법을 모를 수있었습니다.

업데이트 :
문제를 설명하기 위해 jsfiddle이 추가되었습니다. 코드 실행이 루프 내에있을 때 회 전자가 회전하지 않습니다.

<img src="http://content.markitcdn.com/corporate/ResourceManager/9Iy-xMz_zHH-zXFAlhM-KA2/d/f/635151312565356632/Content/Images/Icons/General/spinner2.gif" alt=""> 
<script> 
    console.log('entering loop') 
    for (var i=0;i<300000000;i++) {} 
    console.log('leaving loop') 
</script> 

Answer 1

SQL Server에서 데이터베이스 목록을 가져 와서 표시 한 컨트롤러에서 비슷한 문제가있었습니다. 데이터가 반환 될 때까지 대기 커서가 표시되기를 원하지만 UI가 대신 고정되었습니다. 나는 $rootScope 메서드를 통해 isWaiting 플래그를 토글 (보기에서 대기 커서가 표시됨) 한 다음 비동기 프로세스가 끝날 때 콜백에서 해당 플래그를 지워서 해결했습니다.

이것은 정확하게하려는 의도는 아니지만 적응하기에 충분히 근접 할 수 있습니다. 당신은 목적을 위해 $rootScope 대신 $scope에서 메서드를 사용할 수 있으며, 스피너 이미지의 표시 여부를 제어하는 ​​div 수준 클래스 (html 수준 대신)가있을 수 있습니다.

면책 조항 : 이것은 일반 브라우저와 달리 node-webkit을 사용하는 데스크톱 응용 프로그램에서 사용되었습니다. 그러나 나는이 동일한 기본 접근 방식이 일반 브라우저에서도 작동한다고 생각한다.

CSS :

html.wait, html.wait * { 
    cursor: wait !important; 
} 

MainController :

// sets up a method that can be used from any controller 
$rootScope.toggleWaiting = function (isWaiting) { 
    $rootScope.isWaiting = isWaiting; 
    $('html')[isWaiting ? 'addClass' : 'removeClass']('wait'); 
}; 

DatabasesController :

.controller('databasesController', ['$rootScope', '$scope', function($rootScope, $scope) { 

    $rootScope.toggleWaiting(true); 

    var SqlServerHelper = require("SqlServerHelper"); 
    var sqlServerHelper = new SqlServerHelper(/* sensitive config info removed */); 

    sqlServerHelper.getDatabases(function(err, results) { 
     /* standard error handling removed */ 
     $scope.$apply(function() { 
      $rootScope.toggleWaiting(false); 
      $scope.databaseList = results; 
     }); 
    }); 

}]) 

P.S. 마지막으로 한 가지 생각 : GIF가 계속 얼어 붙는다면 컨트롤러에서 $timeout을 사용하여 장기 실행 프로세스를 시작할 수 있으므로 비동기 백그라운드 스레드에서 발생합니다. (그것이 어쨌든 장면의 뒷부분에서 어떻게 작동하는지에 대해서는 생각할지라도, 그렇게 오래 걸리는 이유는 ... 아마도 외부 리소스를 비동기 적으로 호출하여 시작하는 것일까 요?)

Answer 2

다음은 내가 구현 한 방법입니다. 내 각도 애플 리케이션에 로더. 정말 간단합니다. 내가 글꼴 멋진하고 사용하고

<div class="loader show"> 
    <i class="fa fa-circle-o-notch fa-fw fa-spin"></i> 
</div> 

참고 :

.loader{ 
    position: fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background:rgba(0, 0, 0, 0.45); 
    z-index: 9999999999; 

    i{ 
     font-size:80px; 
     height:80px; 
     width:82px; 
     color:#fff; 
     display:block; 
     text-align: center; 
     vertical-align:middle; 
     margin: auto; 
     position: absolute; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
    } 
} 

그런 다음 당신은 당신의 NG-보기에이 HTML을 추가 할 수 있습니다 : 나는 아래의 작은 파일을 사용하여, 쉽게 CSS로 변환 할 수 있습니다 로딩 애니메이션을위한 .gif 파일이 아닙니다.

여기가 더 읽기를 할 수있는 몇 가지 소스입니다 :

http://fontawesome.io

http://blog.madnesslabs.net/madness-u-package-managers/ < - 글꼴 - 신난다, 각도, 각도-경로와 같은 종속성을 설치하는 패키지 관리자를 사용하는 방법에 대한 광기 연구소에서 블로그 게시물, ect. 그나마 각 앱에 대한하지만 브라우저 알고

Answer 3

, 거기에 좋은 애니메이션 http://jsfiddle.net/qzLdjq3c/5/

$(window).load(function() { 
    $('.spinner').show(); 
    $(".spinner").hide(); 
}); 

Answer 4

에 대한 가치를 살펴 ... 매우 적은 작업을하는 바이올린이 ng-cloak

에 대한 좋은 후보가 될 수있다

컴파일 중에 ng-cloak 클래스가 제거되었습니다. 일반적으로 display : none과 함께 사용되지만 스피너를 표시하는 데 사용할 수도 있습니다.