Existe uma maneira de fazer o AngularJS carregar parciais no início e não quando necessário?

Eu tenho uma configuração de rota 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'
        });
}]);

Quero poder fazer com que o angularjs baixe as parciais no início e não quando solicitado.

É possível?

Sim, existem pelo menos 2 soluções para isso:

1. Use a scriptdiretiva ( http://docs.angularjs.org/api/ng.directive:script ) para colocar suas parciais no HTML carregado inicialmente
2. Você também pode preencher $templateCache( http://docs.angularjs.org/api/ng.$templateCache ) do JavaScript, se necessário (possivelmente com base no resultado da $httpchamada)

Se você quiser usar o método (2) para preenchê- $templateCachelo, faça o seguinte:

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

Obviamente, o conteúdo dos modelos pode vir de uma $httpchamada:

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

Aqui está o mais interessante dessas técnicas: http://plnkr.co/edit/J6Y2dc?p=preview

Se você usar o Grunt para criar seu projeto, existe um plug-in que montará automaticamente suas parciais em um módulo Angular que inicia $ templateCache. Você pode concatenar este módulo com o restante do seu código e carregar tudo, desde um arquivo na inicialização.

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

Adicione uma tarefa de construção para concatenar e registrar suas parciais html no Angular $templateCache. ( Esta resposta é uma variante mais detalhada da resposta de karlgold. )

Para o grunhido , use modelos grunhidos-angulares . Para gulp , use gulp-angular-templatecache .

Abaixo estão os snippets de configuração / código para ilustrar.

Exemplo:

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

gulpfile.js Exemplo:

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 (esse arquivo é gerado automaticamente pela tarefa de construção)

$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 você envolver cada modelo em uma tag de script, por exemplo:

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

Concatene todos os modelos em um arquivo grande. Se estiver usando o Visual Studio 2013, faça o download do essencial da Web - ele adiciona um menu com o botão direito do mouse para criar um Pacote HTML.

Adicione o código que esse cara escreveu para alterar o $templatecacheserviço angular - é apenas um pequeno pedaço de código e funciona: Goj de Vojta Jina

É $http.getisso que deve ser alterado para usar seu arquivo de pacote configurável:

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

Suas rotas templateUrldevem ficar assim:

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

Se você usar trilhos, poderá usar o pipeline de ativos para compilar e colocar todos os seus modelos haml / erb em um módulo de modelo que pode ser anexado ao seu arquivo application.js. Checkout http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Eu apenas uso ecopara fazer o trabalho para mim. ecoé suportado pelo Sprockets por padrão. É uma abreviação de Embedded Coffeescript que pega um arquivo eco e é compilado em um arquivo de modelo Javascript, e o arquivo será tratado como qualquer outro arquivo js que você possui na sua pasta de ativos.

Tudo o que você precisa fazer é criar um modelo com a extensão .jst.eco e escrever um código html, e os trilhos automaticamente compilarão e servirão o arquivo com o pipeline de ativos, e a maneira de acessar o modelo é realmente fácil: JST['path/to/file']({var: value});onde path/to/fileé baseado no caminho lógico; portanto, se você tiver um arquivo /assets/javascript/path/file.jst.eco, poderá acessar o modelo emJST['path/file']()

Para fazê-lo funcionar com angularjs, você pode passá-lo para o atributo template em vez de templateDir, e ele começará a funcionar magicamente!

Você pode passar $ state para o seu controlador e, quando a página carregar e chamar o getter no controlador, você chamará $ state.go ('index') ou qualquer parte parcial que desejar carregar. Feito.

Outro método é usar o cache de aplicativos do HTML5 para baixar todos os arquivos uma vez e mantê-los no cache do navegador. O link acima contém muito mais informações. As informações a seguir são do artigo:

Altere sua <html>tag para incluir um manifestatributo:

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

Um arquivo de manifesto deve ser servido com o tipo MIME text/cache-manifest.

Um manifesto simples se parece com isso:

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

Quando um aplicativo está offline, ele permanece em cache até que um dos seguintes itens ocorra:

1. O usuário limpa o armazenamento de dados do navegador para o seu site.
2. O arquivo de manifesto é modificado. Nota: atualizar um arquivo listado no manifesto não significa que o navegador irá armazenar em cache novamente esse recurso. O próprio arquivo de manifesto deve ser alterado.