¿Hay alguna manera de hacer que los parciales de carga de AngularJS comiencen y no cuando sea necesario?

Tengo una configuración de ruta como esta:

var myApp = angular.module('myApp', []). config(['$routeProvider', function ($routeProvider) { $routeProvider. when('/landing', { templateUrl: '/landing-partial', controller: landingController }). when('/:wkspId/query', { templateUrl: '/query-partial', controller: queryController }). otherwise({ redirectTo: '/landing' }); }]); 

Quiero poder hacer que angularjs descargue los parciales al principio y no cuando se solicite.

¿Es posible?

Sí, hay al menos 2 soluciones para esto:

  1. Use la directiva de script ( http://docs.angularjs.org/api/ng.directive:script ) para poner sus parciales en el HTML cargado inicialmente
  2. También puede completar $templateCache ( http://docs.angularjs.org/api/ng.$templateCache ) desde JavaScript si es necesario (posiblemente en función del resultado de la llamada $http )

Si desea utilizar el método (2) para completar $templateCache , puede hacerlo así:

 $templateCache.put('second.html', 'Second template'); 

Por supuesto, el contenido de las plantillas podría provenir de una llamada de $http :

 $http.get('third.html', {cache:$templateCache}); 

Aquí está el plunker de esas técnicas: http://plnkr.co/edit/J6Y2dc?p=preview

Si usa Grunt para construir su proyecto, hay un complemento que ensamblará automáticamente sus parciales en un módulo angular que imprime $ templateCache. Puede concatenar este módulo con el rest de su código y cargar todo desde un archivo al inicio.

https://npmjs.org/package/grunt-html2js

Agregue una tarea de comstackción para concatenar y registrar sus parciales html en Angular $templateCache . ( Esta respuesta es una variante más detallada de la respuesta de karlgold ) .

Para gruñir , usa grunt-angular-templates . Para gulp , use gulp-angular-templatecache .

A continuación se muestran los fragmentos de configuración / código para ilustrar.

Ejemplo de gruntfile.js:

 ngtemplates: { app: { src: ['app/partials/**.html', 'app/views/**.html'], dest: 'app/scripts/templates.js' }, options: { module: 'myModule' } } 

Ejemplo de gulpfile.js:

 var templateCache = require('gulp-angular-templatecache'); var paths = ['app/partials/.html', 'app/views/.html']; gulp.task('createTemplateCache', function () { return gulp.src(paths) .pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'})) .pipe(gulp.dest('app/scripts')); }); 

templates.js (este archivo es autogenerado por la tarea de comstackción)

 $templateCache.put('app/views/main.html', "
\r"...

index.html

  

Si ajusta cada plantilla en una etiqueta de secuencia de comandos, por ejemplo:

  

Concatenar todas las plantillas en 1 archivo grande. Si usa Visual Studio 2013, descargue los elementos esenciales de la Web: agrega un menú de clic derecho para crear un paquete de HTML.

Agregue el código que este tipo escribió para cambiar el servicio angular $templatecache , es solo un pequeño fragmento de código y funciona: Vojta Jina’s Gist

Es el $http.get que debe cambiarse para usar su archivo de paquete:

 allTplPromise = $http.get('templates/templateBundle.min.html').then( 

Tus rutas templateUrl deberían verse así:

  $routeProvider.when( "/about", { controller: "", templateUrl: "about.html" } ); 

Si usa raíles, puede usar la canalización de activos para comstackr y colocar todas sus plantillas haml / erb en un módulo de plantilla que se puede adjuntar a su archivo application.js. Salida http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Solo uso eco para hacer el trabajo por mí. eco es compatible con Sprockets por defecto. Es una abreviatura de Embedded Coffeescript que toma un archivo ecológico y lo comstack en un archivo de plantilla Javascript, y el archivo se tratará como cualquier otro archivo js que tenga en su carpeta de activos.

Todo lo que necesita hacer es crear una plantilla con la extensión .jst.eco y escribir algún código html allí, y los Rails automáticamente comstackrán y servirán el archivo con la canalización de activos, y la manera de acceder a la plantilla es realmente fácil: JST['path/to/file']({var: value}); donde path/to/file se basa en la ruta lógica, por lo que si tiene un archivo en /assets/javascript/path/file.jst.eco , puede acceder a la plantilla en JST['path/file']()

Para que funcione con angularjs, puedes pasarlo al atributo de plantilla en lugar de a templateDir, ¡y comenzará a funcionar mágicamente!

Puede pasar $ state a su controlador y luego, cuando la página se carga y llama al getter en el controlador, llama a $ state.go (‘index’) o al parcial que desee cargar. Hecho.

Otro método es utilizar la memoria caché de aplicaciones de HTML5 para descargar todos los archivos una vez y mantenerlos en el caché del navegador. El enlace de arriba contiene mucha más información. La siguiente información es del artículo:

Cambie su etiqueta para incluir un atributo manifest :

  

Un archivo de manifiesto debe ser servido con el text/cache-manifest tipo mime text/cache-manifest .

Un manifiesto simple se ve así:

 CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js http://cdn.example.com/scripts/main.js 

Una vez que una aplicación está fuera de línea, permanece en la memoria caché hasta que ocurre una de las siguientes situaciones:

  1. El usuario borra el almacenamiento de datos de su navegador para su sitio.
  2. El archivo de manifiesto se modifica. Nota: actualizar un archivo enumerado en el manifiesto no significa que el navegador volverá a almacenar en caché ese recurso. El archivo de manifiesto en sí debe ser alterado.