AngularJS – Como modularizar uma combinação de diretiva + template?

Question

Aqui está a situação.Eu tenho uma diretiva que depende de um templateUrl.

A diretiva é mais ou menos assim:

angular.module('foo')
.directive('bar', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '/foo/bar.html',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

Esta diretiva faz parte de uma das minhas aplicações e é importante que continue fazendo parte da aplicação.No entanto, também gostaria de usar a mesma diretiva em outros projetos e, atualmente, estou usando o bower para baixar o repositório em meus outros projetos.No entanto, esta diretiva será quebrada porque o templateUrl estará incorreto.Bower clona todo o meu projeto, e o caminho real do modelo, na melhor das hipóteses, precisará ser este no meu outro projeto:

/lib/public/foo/bar.html

Como outras pessoas gerenciam isso?

Answer 1

Nunca gostei de usar strings de modelo para modelagem devido a problemas de manutenção.Eu faço protótipo de html muito rapidamente, então opto por uma tarefa pesada que lê meus arquivos e os processa em um único $templateCache arquivo js.

Solução

Modelos Angulares Grunt

Tarefa de construção grunhida para concatenar e registrar seus modelos AngularJS no $ Templatecache

// within my Gruntfile.js
grunt.initConfig({
  ngtemplates: {
    'angular-my-directives': {
      src:      'views/**/*.html', // where my view files are
      dest:     'src/templates.js' // single file of $templateCache
    }
  }
  // ...
});

gera algo como: ./src/templates.js que preserva minha estrutura de pastas:

angular.module('angular-my-directives').run(['$templateCache', function($templateCache) {

  $templateCache.put('views/directives/my-download.html',
    "<form name=\"myDownloadForm\" ng-submit=\"submit()\" novalidate>\n" +
    "</form>"
  );

}]);

Agora, na minha diretiva, posso simplesmente usar templateUrl: 'views/directives/my-download.html' e usará o $templateCache.

Finalmente eu usei grunhido-contrib-concat para combinar meus arquivos para facilitar o carregamento.

Confira "Grunt concat + uglify com mapas de origem" (ou deixe um link melhor nos comentários) para aprender como concat + uglify (também conhecido como min) arquivos js em um único arquivo "dist".

Se estiver trabalhando em seu próprio pacote Bower personalizado.

Certifique-se de enviar os arquivos concatenados (também conhecidos como compilados) para o repositório do pacote para que os consumidores do pacote possam simplesmente incluir my-concat-package.js ou my-concat-package.min.js

Answer 2

As diretivas angulares têm templateUrl e template propriedades. template recebe uma string HTML.Não é uma solução perfeita, porque você precisa colocar HTML no seu JS.Mas é um padrão comum para os criadores de bibliotecas colocarem a string HTML diretamente template propriedade, para que possam agrupar seu módulo em um único arquivo.

Você pode querer tornar esse templateUrl-to-template uma etapa de construção de sua lib.

Dê uma olhada Repositório Angular Bootstrap Bower.

Answer 3

Uma solução para isso, e minha solução pessoalmente preferida, é colocar o modelo em $templateCache em um Module.run função.Dessa forma, você nunca precisará se preocupar com o URL referente à coisa errada - você pode fornecer qualquer URL de identificação arbitrária que desejar - e nunca será necessária uma solicitação http para buscar esse modelo, para inicializar.

Answer 4

No seu projeto de diretiva:

Crie todos os modelos com o nome do arquivo xyz.tpl.html e coloque-os no diretório de sua diretiva com todo o código js.Todo templateUrl se parece com

URL do modelo:'/template/meu.tpl.html'

No projeto do aplicativo:

Crie uma tarefa gulp/grunt em seu projeto para copiar todos os arquivos *.tpl.html para /template/ dir de bower_components (padrão).

por exemplo.:

// copy template files
gulp.task('copy-tpl', function() {
    return gulp.src([
        config.dirs.src.bower_components + '/**/*.tpl.html'
    ])
            .pipe(flatten())
            .pipe(gulp.dest(config.dirs.build.tpl));
});

Importante!O diretório /template é uma convenção (como js, ​​css, etc).

Answer 5

Você pode fazer isso com gole usando gulp-angular-templatecache.

Sua diretiva ficaria assim:

angular.module('foo').directive('bar', function($templateCache){
  return {
    restrict: 'E',
    replace: true,
    template: '$templateCache.get('bar.html')',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

E o seu gulpfile.js ficaria assim:

var gulp = require('gulp'),
    addTemplates = require('gulp-angular-templatecache');

gulp.task('default', function() {
    gulp.src('templatesDir/**/*.html')
        .pipe(addTemplates('templateFile.js', {module: 'foo' }))
        .pipe(gulp.dest('dist'));
});

Isso produz o arquivo 'templateFile.js' em sua pasta dist, que pode ser empacotado com seu arquivo de diretiva em seu bower.json.

Answer 6

eu já dei uma resposta usando o grunt para criar seus arquivos html no arquivo $templateCache, mas desde então mudei para o gulp, então qualquer um que queira seguir o mesmo processo, mas usando o gulp, finalize a compra gulp-angular-templatecache