Existe uma maneira de fazer o AngularJS carregar parciais no começo e não quando necessário?

Eu tenho uma configuração de rota assim:

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

Eu quero ser capaz de fazer angularjs baixar os parciais no começo e não quando solicitado.

É possível?

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

  1. Use a diretiva de script ( 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 chamada $http )

Se você gostaria de usar o método (2) para preencher $templateCache você pode fazer assim:

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

Claro que o conteúdo dos modelos pode vir de uma chamada $http :

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

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

Se você usa o Grunt para construir seu projeto, existe um plugin que irá montar automaticamente seus parciais em um módulo Angular que prepara o $ templateCache. Você pode concatenar este módulo com o resto do seu código e carregar tudo de um arquivo na boot.

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

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

Para o grunhido , use modelos angulares . Para gole , use gole-angular-templatecache .

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

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

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

index.html

  

Se você envolver cada modelo em uma tag de script, por exemplo:

  

Concatene todos os modelos em um arquivo grande. Se estiver usando o Visual Studio 2013, baixe os itens essenciais da Web – ele adiciona um menu de clique com o botão direito do mouse para criar um pacote HTML.

Adicione o código que esse cara escreveu para mudar o serviço $templatecache angular – é apenas um pequeno pedaço de código e funciona: Gente da Vojta Jina

É o $http.get que deve ser alterado para usar seu arquivo de pacote:

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

Suas rotas templateUrl devem ficar assim:

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

Se você usar rails, poderá usar o pipeline de ativos para compilar e empurrar todos os seus modelos haml / erb para 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 só uso eco para fazer o trabalho para mim. eco é suportado pelo Sprockets por padrão. É uma abreviação de Embedded Coffeescript que pega um arquivo eco e compila em um arquivo de modelo Javascript, e o arquivo será tratado como qualquer outro arquivo js que você tenha em sua pasta de ativos.

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

Para fazê-lo funcionar com o 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 seu controller e então quando a página carregar e chamar o getter no controller que você chamar $ state.go (‘index’) ou qualquer parcial que você queira carregar. Feito.

Outro método é usar o Application Cache 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 tag para include um atributo manifest :

  

Um arquivo de manifesto deve ser servido com o text/cache-manifest type do mime.

Um manifesto simples é parecido com isto:

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

Quando um aplicativo estiver off-line, ele permanecerá em cache até ocorrer uma das seguintes situações:

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