¿Hay alguna manera de hacer que AngularJS cargue parciales al principio 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 scriptdirectiva ( http://docs.angularjs.org/api/ng.directive:script ) para colocar 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 según el resultado de la $httpllamada)

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

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

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

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

Agregue una tarea de compilació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ñido , use grunt-angular-templates . Para gulp , use gulp-angular-templatecache .

A continuación hay 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 generado automáticamente por la tarea de compilación)

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

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

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

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

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

Es lo $http.getque debe cambiarse para usar su archivo de paquete:

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

Sus rutas templateUrldeberían verse así:

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

Si usa rieles, puede usar la canalización de activos para compilar y empujar todas sus plantillas haml / erb en un módulo de plantilla que se puede agregar a su archivo application.js. Checkout http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Solía ecohacer el trabajo por mí. ecoes compatible con Sprockets de forma predeterminada. Es una abreviatura de Embedded Coffeescript que toma un archivo eco y se 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 la extensión .jst.eco y escribir un código html allí, y los rieles compilarán y servirán automáticamente el archivo con la canalización de activos, y la forma de acceder a la plantilla es realmente fácil: JST['path/to/file']({var: value});donde path/to/filese basa en la ruta lógica, por lo que si tiene un archivo /assets/javascript/path/file.jst.eco, puede acceder a la plantilla enJST['path/file']()

Para que funcione con angularjs, puede pasarlo al atributo de plantilla en lugar de 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 desea cargar. Hecho.

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

Cambie su <html>etiqueta para incluir un manifestatributo:

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

Un archivo de manifiesto se debe servir con el tipo mime text/cache-manifest.

Un manifiesto simple se parece a esto:

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 caché hasta que ocurre uno de los siguientes:

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 listado en el manifiesto no significa que el navegador volverá a almacenar en caché ese recurso. El archivo de manifiesto en sí debe ser alterado.