C'è un modo per fare in modo che AngularJS carichi i parziali all'inizio e non quando necessario?

Ho una configurazione del percorso come questa:

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'
        });
}]);

Voglio essere in grado di fare in modo che angularjs scarichi entrambi i parziali all'inizio e non quando richiesto.

È possibile?

Sì, ci sono almeno 2 soluzioni per questo:

1. Utilizzare la scriptdirettiva ( http://docs.angularjs.org/api/ng.directive:script ) per inserire i parziali nell'HTML caricato inizialmente
2. Puoi anche compilare $templateCache( http://docs.angularjs.org/api/ng.$templateCache ) da JavaScript se necessario (possibilmente in base al risultato della $httpchiamata)

Se desideri utilizzare il metodo (2) per compilare $templateCache, puoi farlo in questo modo:

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

Naturalmente il contenuto dei modelli potrebbe provenire da una $httpchiamata:

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

Ecco il plunker di queste tecniche: http://plnkr.co/edit/J6Y2dc?p=preview

Se usi Grunt per costruire il tuo progetto, c'è un plugin che monterà automaticamente i tuoi parziali in un modulo angolare che prepara $ templateCache. Puoi concatenare questo modulo con il resto del codice e caricare tutto da un file all'avvio.

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

Aggiungi un'attività di compilazione per concatenare e registrare i tuoi parziali html nell'Angolare $templateCache. ( Questa risposta è una variante più dettagliata della risposta di Karlgold. )

Per grunt , usa i template grunt-angular . Per gulp , usa gulp-angular-templatecache .

Di seguito sono riportati gli snippet di configurazione / codice da illustrare.

gruntfile.js Esempio:

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

Esempio 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 (questo file è generato automaticamente dall'attività di compilazione)

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

Se avvolgi ciascun modello in un tag di script, ad esempio:

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

Concatena tutti i modelli in 1 file di grandi dimensioni. Se usi Visual Studio 2013, scarica Web essentials: aggiunge un menu di scelta rapida per creare un pacchetto HTML.

Aggiungi il codice che questo ragazzo ha scritto per cambiare il $templatecacheservizio angolare - è solo un piccolo pezzo di codice e funziona: Vojta Jina's Gist

È quello $http.getche dovrebbe essere cambiato per usare il tuo file bundle:

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

I tuoi percorsi templateUrldovrebbero apparire così:

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

Se si utilizzano le rotaie, è possibile utilizzare la pipeline delle risorse per compilare e inserire tutti i modelli haml / erb in un modulo modello che può essere aggiunto al file application.js. Acquista http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Uso solo ecoper fare il lavoro per me. ecoè supportato da Sprockets per impostazione predefinita. È una scorciatoia per Embedded Coffeescript che prende un file eco e lo compila in un file modello Javascript, e il file verrà trattato come qualsiasi altro file js che hai nella cartella delle risorse.

Tutto quello che devi fare è creare un modello con estensione .jst.eco e scrivere un po 'di codice html lì dentro, e le rotaie verranno automaticamente compilate e serviranno il file con la pipeline delle risorse, e il modo per accedere al modello è davvero facile: JST['path/to/file']({var: value});dove path/to/filesi basa sul percorso logico, quindi se si dispone di file /assets/javascript/path/file.jst.eco, è possibile accedere al modello all'indirizzoJST['path/file']()

Per farlo funzionare con angularjs, puoi passarlo all'attributo template invece di templateDir e inizierà a funzionare magicamente!

Puoi passare $ state al tuo controller e poi quando la pagina viene caricata e chiama il getter nel controller, chiami $ state.go ('indice') o qualunque cosa parziale desideri caricare. Fatto.

Un altro metodo consiste nell'utilizzare la cache dell'applicazione HTML5 per scaricare tutti i file una volta e tenerli nella cache del browser. Il link sopra contiene molte più informazioni. Le seguenti informazioni sono tratte dall'articolo:

Modifica il <html>tag per includere un manifestattributo:

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

Un file manifest deve essere servito con il tipo mime text/cache-manifest.

Un manifest semplice assomiglia a questo:

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

Una volta offline, l'applicazione rimane memorizzata nella cache fino a quando si verifica una delle seguenti condizioni:

1. L'utente cancella l'archiviazione dei dati del proprio browser per il tuo sito.
2. Il file manifest è stato modificato. Nota: l'aggiornamento di un file elencato nel manifest non significa che il browser memorizzerà nella cache quella risorsa. Il file manifest stesso deve essere modificato.