AngularJS: ¿Cómo modularizar una combinación de directiva + plantilla?

Question

Esta es la situación.Tengo una directiva que depende de una plantillaUrl.

La directiva se parece a esto:

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

Esta directiva es parte de una de mis aplicaciones y es importante que siga siendo parte de la aplicación.Sin embargo, también me gustaría usar la misma directiva en otros proyectos y actualmente estoy usando Bower para desplegar el repositorio en mis otros proyectos.Sin embargo, esta directiva no cumplirá porque la plantillaUrl será incorrecta.Bower clona todo mi proyecto y, en el mejor de los casos, la ruta real de la plantilla deberá ser esta en mi otro proyecto:

/lib/public/foo/bar.html

¿Cómo manejan esto otras personas?

Answer 1

Nunca me ha gustado usar cadenas de plantilla para crear plantillas debido a problemas de mantenimiento.Hago prototipos de html muy rápidamente, así que opto por una tarea pesada que lee mis archivos y los procesa en un solo archivo. $templateCache archivo js.

Solución

Plantillas angulares de gruñido

Tarea de construcción de gruñidos para concatenar y registrar sus plantillas AngularJS en el $ 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
    }
  }
  // ...
});

genera algo como: ./src/templates.js que preserva mi estructura de carpetas:

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>"
  );

}]);

Ahora en mi directiva puedo simplemente usar templateUrl: 'views/directives/my-download.html' y utilizará $templateCache.

Finalmente usé gruñido-contrib-concat para combinar mis archivos para cargarlos fácilmente.

Verificar "Grunt concat + uglify con mapas fuente" (o deje un enlace mejor en los comentarios) para aprender cómo concat + uglify (también conocido como min) archivos js en un solo archivo "dist".

Si está trabajando en su propio paquete de glorieta personalizado...

Asegúrese de enviar los archivos concatenados (también conocidos como compilados) al repositorio del paquete para que los consumidores de su paquete puedan simplemente incluirlos. my-concat-package.js o my-concat-package.min.js

Answer 2

Las directivas angulares tienen templateUrl y template propiedades. template recibe una cadena HTML.No es una solución perfecta, porque necesitas poner HTML en tu JS.Pero es un patrón común que los creadores de bibliotecas coloquen la cadena HTML directamente en template propiedad, para que puedan empaquetar su módulo en un solo archivo.

Es posible que desee hacer que templateUrl-to-template sea un paso de compilación de su biblioteca.

Echa un vistazo Repositorio Angular Bootstrap Bower.

Answer 3

Una solución a esto, y mi solución personalmente preferida a esto, es colocar la plantilla en $templateCache en una función Module.run.De esa manera, nunca tiene que preocuparse por la URL que se refiere a la cosa incorrecta, puede darle cualquier URL de identificación arbitraria que desee, y nunca requerirá una solicitud HTTP para obtener esa plantilla, para iniciar.

Answer 4

En su proyecto de directiva:

Cree toda la plantilla con el nombre de archivo xyz.tpl.html, y coloque en su Directive Dir con todo el código JS.Todos los plantillas se ve como

templateurl: '/template/my.tpl.html'

en la aplicación Proyecto:

Crear una tarea de Gulp / Grunt en su proyecto para copiar todo * .tpl.html archivo en / plantilla / dir de bower_components (predeterminado).

e.g.:

// 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! El DIR / TEMPLARE es una convención (como JS, CSS, etc.).

Answer 5

Puede hacer esto con Gulp usando gulp-angular-templatecache .

tu directiva se vería así:

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

y su gulpfile.js se vería así:

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

Esto produce el archivo 'TemplateFile.js' en su carpeta dist que luego se puede empaquetar con su archivo de directiva en su BOWER.JSON.

Answer 6

Ya le di una respuesta usando gruñido para construir sus archivos HTML en un archivo de $ TEMPLATECACHE, pero desde entonces he cambiadoPara tragar, por lo que cualquiera que quiera seguir el mismo proceso, pero usando Gulp, checkout Gulp-Angular-Templatecache