sref - ui-view angularjs



Lazyload для нескольких видов в ui-router (1)

Несколько месяцев назад я создал тему: попробуйте сделать два шаблона в одном представлении (Ui-Router) , где я спросил о том, как отображать несколько просмотров на одной странице. Моя цель - создать веб-приложение как настольное, с возможностью минимизации, максимизации, закрытия и т. Д.

Ну, мое приложение готово, но у меня проблема, когда я подключаю свое приложение к производству, некоторые компьютеры занимают много времени, чтобы отобразить все Представления. На изображении ниже мы можем найти множество заявок, которые сервер берет, чтобы вернуть мои шаблоныURL.

Есть ли способ избежать этого? Я искал ленивый груз шаблону, но я не нашел его. :(

Этот plunkr был подходом, который я использовал . У меня есть только одно состояние для всех моих просмотров (у моего текущего app.config есть 103 Views):

routerApp.config(function($stateProvider) {

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


});

Введение

То, как вы приблизились к решению, является причиной проблемы, с которой вы сталкиваетесь, потому что у вас слишком много просмотров для одного состояния, и в конечном итоге им придется загрузить все из них, чтобы установить это состояние, поэтому каждый раз, когда вы доступ к вашему состоянию, 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, каждая панель представляет собой загрузочную карточку, и у нее есть список панелей, которые он может открыть, и при щелчке навигационного списка он добавляет соответствующую панель в список открытых панелей, где 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 (a.k.a, 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 (a.k.a, 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>





state