延遲加載到ui-router中的多個視圖

Question

幾個月前，我創建了一個主題： 嘗試在同一視圖（Ui-Router）中呈現兩個模板 ，在這里我問到如何在同一頁面中呈現多個視圖。 我的目標是創建一個桌面應用程序的Web應用程序，該視圖具有最小化，最大化，關閉等功能。

好了，我的應用程序已經准備好了，但是我遇到了一個問題，當我將我的應用程序投入生產時，某些計算機需要很長時間才能呈現所有視圖。 在下面的圖片中，我們可以看到服務器要返回我的templateURL的大量申請。

有辦法避免這種情況嗎？ 我一直在尋找對templateURL的延遲加載，但未找到任何內容。 :(

這就是我所使用的方法 。 我所有的視圖只有一個狀態（我當前的app.config有103個視圖）：

routerApp.config(function($stateProvider) {

  $stateProvider.state('mainState', {
    views: {
      'CompanyView': {
        templateUrl: 'Company.html'
      },
      'PeopleView': {
        templateUrl: 'People.html'
      },
     .....
     ....
    }
  })


});

Answer 1

介紹

解決方案的方式是導致您面臨問題的原因，因為對於一個狀態您有太多的視圖，最終將不得不加載所有視圖以設置該狀態，因此每次您要訪問您的狀態， ui-router必須加載每個模板才能設置視圖。 對於一些模板來說，這可能不會引起問題，但是對於像您這樣的更大數量的模板，這絕對是一個問題。

NG-模板

您可以嘗試使用<script type="text/ng-template"...在頁面中緩存模板，以防止加載時間，順便說一句，這是一個好習慣。 通常，這是生產構建優化的一部分，將所有模板加載到模板緩存中，因此，如果您不必等待http調用來加載頁面，那么應用程序的加載時間將大大減少。 確實可以提高您的性能，但是我沒有基准來確保它足以滿足您的情況。

基於組件的解決方案

無論如何，您始終可以實現界面組件以所需的方式運行，並進行了優化，無需加載一百個模板即可為用戶顯示單個面板。

我的建議是，不要使用ui-router ，而是使用基於組件的解決方案，而是創建一個指令組件來保存每個窗口的面板內容及其行為。 並使用控制器來管理打開和關閉的面板的狀態，保持和管理列表中的每個打開的面板等。 例如：

<nav>
  <button ng-click="openPanel({title: 'My Panel Title', templateUrl: 'myPanel.html'>">
    Open myPanel
  </button>
<nav>
<main>
  <panel ng-repeat="panel in openedPanels"></panel>
</main>

下面的代碼段使用bootstrap 4 css實現此方法，每個面板都是一個bootstrap卡，並且它具有可以打開的面板列表，單擊導航列表時，會將相應的面板添加到已打開的面板列表中，angularjs可以渲染該面板在HTML上使用ng-repeat 。 這樣，將僅渲染打開的窗口，因此，將僅加載打開的窗口模板。

免責聲明：這是一個非常簡單的示例，沒有使用現有的最佳實踐來實現。 如果您打算使用這種方法，則應基於應用程序來實現它，以更好地滿足體系結構的需求，這不是一個完整的功能組件，僅為了示例而已。

 angular.module('app', []) .controller('PanelsCtrl', function($scope) { // available windows to be opened $scope.panels = [ { title: 'Window 1', templateUrl: 'window1.html' }, { title: 'Window 2', templateUrl: 'window2.html' }]; // all currently opened panels $scope.openedPanels = []; // opens a panel (aka, adds a panel // to the opened panels list) $scope.openPanel = function(panel) { if ($scope.openedPanels.indexOf(panel) === -1) $scope.openedPanels.push(panel); }; // close a panel (aka, removes a panel // from the opened panels list) $scope.onClosePanel = function(panel) { $scope.openedPanels.splice($scope.openedPanels.indexOf(panel), 1); }; }) .directive('window', function($templateRequest, $templateCache, $compile) { return { restrict: 'E', scope: { panel: '=', onClosePanel: '&' }, template: ` <div class="card"> <h4 class="card-header"> <span>{{ panel.title }}</span> <button ng-click="onClosePanel(panel)" type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </h4> <div class="card-body"> <ng-include src="panel.templateUrl"></ng-include> </div> </div> ` } }) // example controlelr to be used with ng-controller .controller('Window1Ctrl', function($scope) { $scope.window1Prop = 'This is a property from Window1Ctrl' }) 

 @import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css' 

 <div ng-app="app"> <div class="container" ng-controller="PanelsCtrl"> <div class="row"> <div class="col-sm-3"> <ul class="nav flex-column"> <li class="nav-item" ng-repeat="panel in panels"> <a class="nav-link active" href="#" ng-click="openPanel(panel)"> {{ panel.title }} </a> </li> </ul> </div> <div class="col-sm-9"> <window ng-repeat="panel in openedPanels" panel="panel" on-close-panel="onClosePanel(panel)"> </window> </div> </div> </div> <!-- NG-TEMPLATES --> <script type="text/ng-template" id="window1.html"> <div ng-controller="Window1Ctrl"> <b>{{panel.title}}</b> <h5>window1Prop: {{ window1Prop }}</p> </div> </script> <script type="text/ng-template" id="window2.html"> <em>{{panel.title}}</em> </script> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>