Angular 2 응용 프로그램이로드되는 동안 수행 할 작업에 대한 질문

angular-cli을 사용하여 Angular 2 응용 프로그램을 만듭니다. ng new NEW_PROJECTNAME으로 애플리케이션을 만든 후에 index.html 페이지가 표시됩니다. 이 페이지에는 다음과 같은 내용이 있습니다.Angular 2 응용 프로그램이로드되는 동안 수행 할 작업에 대한 질문

... 
<body> 
<app-root>Loading...</app-root> 
... 
</body>

물론이로드 메시지는 전문가가 아닌 것처럼 보일 수도 있습니다. 그래서 제 질문은 진도 표시 줄이나 회 전자처럼 더 적절한 것을 어떻게 추가합니까?

내가해야 할 일이 앵귤러 프레임 워크 밖에서 모두 일어나고 있다는 것을 알았습니다 (맞습니까?). 사용하기에 좋은 Angular 2 패키지 (예 : Angular 2 material 또는 ng2-slim-loading-bar)를 찾았지만이 패키지는 이미 Angular 프레임 워크에 들어간 것으로 가정합니다. 내가 어떤 각도 요소 안에 있다는 것을 의미합니다.

제 질문은 다음과 같습니다.

콘텐츠가 <app-root></app-root>에 위치하기 전에 로딩 표시기를 표시하는 데 사용할 수있는 각도 2 고리가 있습니까?
각도 프레임 워크 외부에서 작업해야하는 경우 가장 좋은 방법은 무엇입니까? 순진하게, 나는 bower 또는 npm과 함께 패키지를 설치해야하고, index.html에서 참조하고, 로딩 표시기를 표시하기 위해 jQuery 또는 뭔가를 사용해야한다고 생각합니다. 각도에 따라로드가 완료되면 내부에있는 내용을 대체합니다. <app-root></app-root>. 이 접근법에 대한 나의 관심사 중 하나는 빌딩/패키징 스크립트입니다 (빌드 된 응용 프로그램에이 bower/npm 패키지를 포함시키는 방법을 알아야합니다).

도움을 주시면 감사하겠습니다.

출처

2016-07-15 Jane Wayne

가장 쉬운 방법은 앱을 준비 할 때 앱 부트 스트랩 구성 요소에 CSS 애니메이션을 넣는 것입니다. 콘텐츠가 대체됩니다.

스크립트의 축소로 인해 앱이 개발 빌드인지 프로덕션 빌드인지에 따라 다른 속도로로드되며 변경 감지는 한 번만 실행되므로로드 시간이 더 빨라집니다. 애니메이션의 속도를 조정해야 할 수도 있습니다. 앱의 HTTP 요청이 역할을 할 수도 있습니다. 루트 구성 요소의 http://www.alessioatzeni.com/blog/css3-loading-animation/

CSS와 HTML :

이

<app-root> 

    <style> 
    #content { 
     width: 100%; 
     /* Full Width */ 
     height: 1px; 
     margin: 1px auto; 
     background: #000; 
    } 

    .expand { 
     width: 100%; 
     height: 1px; 
     margin: 1px 0; 
     background: #2187e7; 
     position: absolute; 
     box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7); 

       /*adjust speed here */ 
     -moz-animation: fullexpand 1.5s ease-out; 
     -webkit-animation: fullexpand 1.5s ease-out; 
    } 


    /* Full Width Animation Bar */ 

    @-moz-keyframes fullexpand { 
     0% { 
     width: 0px; 
     } 
     100% { 
     width: 100%; 
     } 
    } 

    @-webkit-keyframes fullexpand { 
     0% { 
     width: 0px; 
     } 
     100% { 
     width: 100%; 
     } 
     ; 
    } 
    </style> 

    <div id="content"> 
     <span class="expand">Loading...</span> 
    </div> 


    </app-root>

두 번째 옵션은 bootstrap 기능 저점 system.js에 액세스 index.html에서 스크립트 태그에 사용할 수 있도록하는 것입니다

나는이에서를 얻었다.

여기 블로그 게시물은 Ben Nadel 아니요 어떻게해야합니까?

데모 : Creating A Pre-Bootstrap Loading Screen In Angular 2 RC 1

(function(global) { 

    // .... code removed .... 

    System.config({ 
     // .... code removed .... 
    }); 

    // Load "./app/main.ts" (gets full path from package configuration above). 
    // -- 
    // NOTE: We are attaching the resultant promise to the global scope so that other 
    // scripts may listen for the successful loading of the application. 
    global.bootstrapping = System 
     .import("app") 
     .then(
      function handleResolve() { 

       console.info("System.js successfully bootstrapped app."); 

      }, 
      function handleReject(error) { 

       console.warn("System.js could not bootstrap the app."); 
       console.error(error); 

       return(Promise.reject(error)); 

      } 
     ) 
    ; 

})(window);

출처

2016-07-15 08:21:08

Ben Nadel, 그의 블로그에 업데이트 된 솔루션을 게시했습니다. 여기에서 확인하십시오 - https://www.bennadel.com/blog/3147-creating-an-event-driven-pre-bootstrap-loading-screen-in-angular-2-0-0.htm. 그러나 DOM 이벤트와 자바 스크립트 코드의 힙을 모두 이해하지 못하기 때문에 여기에 게시 된 간단한 해결책으로 이동합니다 - http://stackoverflow.com/a/35244932/968003. –

내가 FontAwesome와 부트 스트랩 간단한 접근 방식에 들어갑니다 :

<app-root> 
     <div class="text-center"> 
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> 
      <div>Something witty</div> 
     </div> 
    </app-root>

출처

2016-11-26 01:01:51 Rodney

나는 우리의 스택 (웹팩)에 대한 후크를 발견하지 않았습니다.각 모듈의 끝에 임의의 JavaScript 코드를 추가 할 수도 있습니다 (사용하는 경우). 일부 카운터가 증가합니다. WebPack의 loaders API을 사용할 수 있습니다. (물론 WebPack을 사용하는 경우에만 적용됩니다.) 우리 프로젝트에서는로드하는 응용 프로그램 (예 : 시각적으로 유사한 페이지)을 사용하여 alogo, 회 전자 및 사용자를 유지하는 정보와 함께 @ Kaspars '솔루션을 사용했습니다. 앱이로드 될 때까지 읽는 중입니다.

출처

2017-07-25 16:44:58

Angular 2 응용 프로그램이로드되는 동안 수행 할 작업에 대한 질문

답변

관련 문제