¿Hay alguna manera de hacer parciales de carga AngularJS al principio y no cuando sea necesario?

Question

que tienen una configuración de ruta de esta manera:

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 ser capaz de hacer AngularJS descarga tanto los parciales en el principio y no cuando se le solicite.

¿Es posible?

Answer 1

Sí, hay al menos 2 soluciones para esto:

1. utilizar el script Directiva (http://docs.angularjs.org/api/ng.directive:script) para poner sus parciales en el HTML cargada inicialmente
2. También puede rellenar $templateCache (http://docs.angularjs.org/api/ng.$templateCache) de JavaScript si es necesario (posiblemente en base al resultado de la llamada $http)

Si desea utilizar el método (2) para rellenar $templateCache puedes hacerlo así:

$templateCache.put('second.html', '<b>Second</b> template'); 

Por supuesto, el contenido de las plantillas podría venir de un $http llamada:

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

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

Answer 2

Si utiliza ronco 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 resto de su código y cargar todo desde un archivo al inicio.

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

Answer 3

Si utiliza raíles, puede utilizar la tubería de activos para compilar y empujar todos sus plantillas haml/erb en un módulo de plantilla que se puede añadir a su archivo application.js. Pago http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Answer 4

Acabo de usar eco para hacer el trabajo por mí. eco es compatible con las ruedas dentadas por defecto. Es una abreviatura de Embedded Coffeescript que toma un archivo ecológico y lo compila 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 extensión .jst.eco y escribir algún código html allí, y los rieles compilarán automáticamente y servirán el archivo con la canalización de activos, y la forma de acceder a la plantilla es muy fácil: JST['path/to/file']({var: value}); donde path/to/file se basa en el camino lógico, por lo que si usted tiene archivo en /assets/javascript/path/file.jst.eco, puede acceder a la plantilla en JST['path/file']()

Para que funcione con AngularJS, puede pasar en el atributo de plantilla en lugar de TEMPLATEDIR ¡y comenzará a funcionar mágicamente!

Answer 5

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

<script id="about.html" type="text/ng-template"> 
<div> 
    <h3>About</h3> 
    This is the About page 
    Its cool! 
</div> 
</script> 

Concatenate 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 hombre escribió para cambiar el ángulo $templatecache servicio - su sólo una pequeña pieza de código y funciona: Vojta Jina's Gist

Es el $http.get que debe ser cambiado para usar el archivo de paquete:

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

Sus rutas templateUrl debería tener este aspecto:

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

Answer 6

añadir una tarea de construcción de co ncancena y registre sus parciales html en el angular $templateCache. (Esta respuesta es una variante más detallada de karlgold's answer.)

Para ronco, utilice grunt-angular-templates. Para trago, use gulp-angular-templatecache.

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

gruntfile.js Ejemplo:

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

gulpfile.js Ejemplo:

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 se genera automáticamente por la tarea de construir)

$templateCache.put('app/views/main.html', "<div class=\"main\">\r"... 

index.html

<script src="app/scripts/templates.js"></script> 
<div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div> 

Answer 7

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

Cambiar la etiqueta <html> para incluir un atributo manifest:

<html manifest="http://www.example.com/example.mf"> 

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

Un manifiesto sencilla es como la siguiente:

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

vez que una aplicación está en línea se mantiene en caché hasta que uno de los siguientes casos:

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

Answer 8

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