關於Angular 2應用程序加載時該怎麼做的一些問題

我正在使用angular-cli創建一個Angular 2應用程序。在使用ng new NEW_PROJECTNAME創建應用程序後，我們會看到一個index.html頁面。在這個頁面他們有這樣的東西。關於Angular 2應用程序加載時該怎麼做的一些問題

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

不用說，此加載消息可能顯得完全不專業。所以我的問題是如何添加更適合的東西，如進度條或微調？

我意識到需要發生的事情發生在Angular框架之外（右？）。我發現一些非常好用的Angular 2軟件包（例如Angular 2 material或ng2-slim-loading-bar），但是這些軟件包假設我已經進入了Angular框架;這意味着我在一些Angular組件中。

所以我的問題如下。

是否有一個Angular 2鉤子，我可以用它來顯示加載指示符之前內容被放置在<app-root></app-root>？
如果我不得不在Angular框架之外工作，最好的方法是什麼？天真地，我想象我將不得不安裝一些包與bower或npm，引用在index.html，並使用jQuery或東西來顯示加載指標。我假設在Angular完成加載時，它將取代<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可供script標籤。

這是一篇由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事件和JavaScript代碼堆積如山，這就是爲什麼我要使用這裏發佈的簡單解決方案 - 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

我還沒有發現我們的堆棧（的WebPack）任何掛鉤。你可能會在每個模塊的末尾附加一些隨意的JavaScript代碼（如果你使用它們的話）會增加一些計數器。 WebPack的loaders API可以用於此。（僅當您使用WebPack時才適用。）

在我們的項目中，使用@Kaspars的解決方案來模擬正在加載的應用程序，即在視覺上類似的頁面，使用alogo，微調控件以及一些信息來保持用戶忙讀它直到應用程序加載。

來源

2017-07-25 16:44:58

關於Angular 2應用程序加載時該怎麼做的一些問題

回答

相關問題