template - ui sref angularjs

Lazyload a múltiples vistas en ui-enrutador

Question

Hace unos meses me crearon el tema: Trate de renderizar dos plantillas en la misma Vista (Ui-Router) , donde pregunté cómo renderizar varias vistas en la misma página. Mi objetivo con esto fue crear una aplicación web como una de escritorio, con vistas para minimizar, maximizar, cerrar y cosas así.

Bueno, mi aplicación está lista, pero tengo un problema, cuando subio mi aplicación a la producción, algunas computadoras tardan mucho en renderizar todas las Vistas. En la imagen siguiente podemos ver un gran número de solicitudes que el servidor realiza para devolver mis templatesURL.

Hay una manera de evitar esto? Estaba buscando una carga lenta para templateURL pero no encontré ninguna. :(

Este plunkr fue el enfoque que utilicé . Solo tengo un estado para todas mis Vistas (Mi app.config actual tiene 103 Vistas):

routerApp.config(function($stateProvider) {

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


});

Answer 1

Introducción

La forma en que se acercó a la solución es la causa del problema al que se enfrenta, debido a que tiene demasiadas vistas para un solo estado, terminará teniendo que cargarlas todas para establecer ese estado, por lo que cada vez que acceda a su estado, ui-router tiene que cargar cada plantilla para establecer las vistas. Puede que no cause problemas en algunas plantillas, pero para números más grandes como el suyo, definitivamente es un problema.

Ng-Plantillas

Puedes intentar guardar en caché tus plantillas en tu página usando <script type="text/ng-template"... para evitar el tiempo de carga, es una buena práctica por cierto. Por lo general, es parte de la optimización de compilación de producción, carga todas las plantillas en la caché de plantilla, de modo que el tiempo de carga de la aplicación disminuye significativamente siempre que no tenga que esperar a que una llamada http cargue una página. De hecho, aumentará el rendimiento en su caso, pero no tengo un punto de referencia que garantice si sería suficiente para su escenario.

Solución basada en componentes

De todos modos, siempre puede implementar componentes de interfaz para comportarse de la manera que desee, optimizados de tal manera que no tenga que cargar cien plantillas para mostrar un solo panel para el usuario.

Mi sugerencia es que, en lugar de usar ui-router , use una solución basada en componentes, cree un componente directivo para mantener el contenido del panel de cada ventana y su comportamiento; y use un controlador para administrar el estado de los paneles abiertos y cerrados, sosteniendo y administrando cada panel abierto en una lista y así sucesivamente. Por ejemplo:

<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>

El siguiente fragmento implementa este enfoque usando bootstrap 4 css, cada panel es una tarjeta de arranque, y tiene una lista de paneles que puede abrir y al hacer clic en una lista de navegación agrega el panel respectivo a la lista de paneles abiertos donde angularjs puede representarlo en el html usando ng-repeat . De esta forma, solo se mostrará la ventana abierta, por lo tanto, solo se cargará la plantilla de ventana abierta.

Descargo de responsabilidad: este es un ejemplo muy simple implementado que no utiliza las mejores prácticas disponibles en el mercado. Si tiene la intención de utilizar este enfoque, debe implementarlo en función de su aplicación para ajustarse mejor a las necesidades de su arquitectura, este no es un componente funcional completo, es solo un ejemplo por el bien de la demostración.

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>