angularjs - stateprovider - ¿Cómo puedo precargar una plantilla en el enrutador Angular UI?

ui router view

Question

Estoy utilizando enrutador de interfaz de usuario angular. Tengo muchas llamadas de plantilla como esta:

var access = {
        name: ''access'',
        templateUrl: ''app/access/partials/a1.html'',
    };

La página servida por Access depende del contenido:

¿Hay alguna manera de que pueda combinar todos estos archivos HTML en uno y precargar los archivos para que cada acción no implique otra solicitud? Me di cuenta de que puedo poner mi HTML directamente dentro de la plantilla, pero ¿puedo combinar el HTML de varias plantillas en un solo archivo y tener todo preinstalado para que esté listo cuando sea necesario?

Answer 1

¿Hay alguna manera de que pueda combinar todos estos archivos HTML en uno y precargar los archivos para que cada acción no implique otra solicitud?

Sí , utilizando html2js ;

o, para ser exactos, un plugin grunt / gulp llamado, respectivamente, grunt-html2js / gulp-html2js

CÓMO FUNCIONA

De acuerdo con este tutorial grunt-html2js :

" html2js es un complemento (...) que analiza todos los archivos de plantilla en su aplicación y crea un archivo javascript que llena el docs.angularjs.org/api/ng/service/$templateCache .

Este es un truco muy útil para reducir la cantidad de solicitudes que debe realizar su aplicación para iniciar la aplicación.

También puede minimizar los fragmentos de código html guardando algo de bandwitdh también ".

----------

De acuerdo con el grunt-html2js :

" html2js convierte un grupo de plantillas a JavaScript y las ensambla en un módulo Angular que prepara el caché directamente cuando se carga el módulo.

Puede concatenar este módulo con el código de su aplicación principal para que Angular no tenga que realizar ninguna solicitud de servidor adicional para inicializar la aplicación ".

----------

Y de acuerdo a mi :)

Lo que me gusta de html2js es que no necesita cambiar ninguno de sus códigos angulares , sino simplemente configurar gruntfile.js / gulpfile.js .

Sus archivos templateUrl estarán automagically disponibles en $templateCache .

Así que hace exactamente lo que deseabas:

• Combina todas tus plantillas en un módulo;
• Escriba la fuente de JavaScript para el módulo;

Todo lo que necesita hacer es especificar el módulo como una dependencia en su código.

Una vez que se haya cargado el módulo, todas las plantillas estarán disponibles en el caché: ¡no es necesario solicitarlo!

EJEMPLOS DE CONFIGURACIÓN GRUNT / GULP

grunt.initConfig({
  html2js: {
    options: {
    base: ''app'',
    module: ''templates'',
    htmlmin: {
      ... many available options: see GitHub repo ...
    }
  },
    main: {
      src: [''app/**/*.html''],
      dest: ''templates.js''
    },
  },
})

luego solo usa el módulo de plantillas como una dependencia:

angular.module(''myApp'', [ ''templates'']);

----------

Aquí hay un ejemplo del repositorio gulp-html2js GitHub:

gulp.task(''scripts'', function() {
  gulp.src(''fixtures/*.html'')
    .pipe(html2js({
      outputModuleName: ''template-test'',
      useStrict: true
    }))
    .pipe(concat(''template.js''))
    .pipe(gulp.dest(''./''))
})

PRUEBAS

Además, html2js también es una muy buena herramienta para probar directivas que usan la propiedad templateUrl .

PARA MÁS INFORMACIÓN

Me encontré con html2js después de leer el libro de Joel Hooks (instructor de Egghead ) sobre automatización , que recomiendo encarecidamente.

Mire un video dedicado sobre html2js en la sección pro del sitio web de EggHead.

Probar directivas usando la propiedad templateUrl con Karma y karma-ng-html2js-preprocessor

NOTA

Técnicamente, puedes usar ng-html2js , sin usar Gulp o Grub; A continuación, puede utilizar una línea de comando como la siguiente:

ng-html2js inputFile [outputFile] [-m moduleName] [--module-var ngModule]

Sin embargo, como necesitaría ejecutar el comando anterior para cada archivo templateUrl, la automatización Gulp / Grub parece ser una forma más eficiente de hacerlo.

RENUNCIA

No tengo ningún interés particular o acciones en el libro / sitios web / herramientas que mencioné.

Nota: También debería agregar, también agrega este archivo a su página html:

 <script src="path/to/templates.js"></script>

Answer 2

¿Por qué no usar ng-include en su archivo html principal para cargar todos los html a la vez?

Algo como esto...

<div ng-repeat="template in templates">
                <ng-include src="template.url"></ng-include>             
            </div>

Así que aquí las plantillas son una matriz de objetos que contiene todas las url y las otras plantillas que desea cargar de una vez en su archivo main.html.

Answer 3

Fácil. Créalas todas como bloques ng-template :

<script type="text/ng-template" id="app/access/partials/a1.html">
    Content of the template.
</script>

Answer 4

Utilizar,

yourApp.run([''$templateCache'', function($templateCache) {
  $templateCache.removeAll();    
}])

Su problema también se indica en este sitio, http://javahow.net/questions/27321315/using-angulars-ui-router-how-can-we-make-sure-the-new-version-of-the-html-part

Answer 5

Ya existe un complemento de grunt-angular-templates grunt específico para esta tarea angular solamente. Lo he estado usando por un tiempo ahora. este complemento almacena automáticamente sus plantillas HTML usando $templateCache en un archivo que puede agregar a su aplicación.

grunt-angular-templates - grunt-angular-templates