AngularJS - Come modulare una combinazione di Direttiva + Template?

Question

Ecco la situazione.Ho una direttiva, che dipende da un templateurl.

La direttiva sembra qualcosa del genere:

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

.

La presente direttiva è parte di una delle mie applicazioni ed è importante che rimanga parte dell'applicazione.Tuttavia, vorrei anche usare la stessa direttiva in altri progetti e attualmente sto usando Bower per abbattere il repository nei miei altri progetti.Tuttavia, questa direttiva si romperà perché il Templateurl non sarà corretto.Brower cloni lungo il mio progetto e il percorso effettivo del modello, nel migliore dei casi, dovrà essere questo nel mio altro progetto:

/lib/public/foo/bar.html

Come si gestiscono altre persone?

Answer 1

Non mi è mai piaciuto usare le stringhe del modello per la modellazione a causa di problemi con manutenibilità. I Prototipo HTML molto rapidamente quindi opta per un compito di grugnito che legge i miei file e li elabora in un singolo $ templatecache file js.

Soluzione

Grunt Modelli angolari

.

Grunt Build Compito per concatenare e registrare i tuoi modelli angolari in $ 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 qualcosa come: ./src/templates.js che conserva la mia struttura della cartella:

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

}]);

.

Ora nella mia direttiva posso semplicemente usare templateUrl: 'views/directives/my-download.html' e utilizzerà $ TemplateCache.

Alla fine ho usato grununt-contrib-concat per combinare i miei file per Caricamento facile.

Checkout " Grunt concat + ugly con Sourcemaps " (o lasciare un collegamento migliore nei commenti) per conoscere come concat + ugly (aka min) js file in un singolo file "dist".

Se si lavora sul tuo pacchetto BOWER personalizzato ..

Assicurati di commettere file concatenati (AKA costruiti) sul repo del pacchetto in modo che i consumatori del pacchetto possano semplicemente includere my-concat-package.js o my-concat-package.min.js

Answer 2

Le direttive angolari hanno templateUrl e proprietà template.template riceve una stringa HTML.Non è una soluzione perfetta, perché devi mettere HTML nel tuo JS.Ma è un modello comune per i creatori della biblioteca per mettere la stringa HTML direttamente sulla proprietà template, in modo che possano avvolgere il proprio modulo in un singolo file.

Potresti voler fare quel templateurl-to-template una fase di compilazione di te lib.

Dai un'occhiata a angolare bootstrap bower repo .

Answer 3

Una soluzione a questo, e la mia soluzione preferita personalmente a questo, è quella di inserire il modello in $templateCache in una funzione Module.run.In questo modo non devi mai preoccuparti dell'URL che si riferisce alla cosa sbagliata - puoi dargli qualsiasi URL identificativo arbitrario che vuoi - e non richiederà mai una richiesta HTTP per recuperare quel modello, per avviare.

Answer 4

Nel progetto della tua direttiva:

Creare tutto il modello con il nome del file xyz.tpl.html e inserire la propria Direttiva dir con tutto il codice JS.Tutti i templateurl sembra

.

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

in APP Project:

Crea un Task Gulp / Grunt nel tuo progetto per copiare tutto * .tpl.html file in / template / dir da BOWER_COMONONENTI (predefinito).

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! La / template dir è una convenzione (come JS, CSS, ecc.).

Answer 5

Puoi farlo con Gulp usando Gulp-angolare-templatecache .

La tua direttiva sarà così:

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

.

E il tuo gulpfile.js sarebbe simile a questo:

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

.

Questo produce il file 'templatefile.js' nella tua cartella Dist che può essere imballato con il tuo file di direttiva nel tuo BOWER.JSON.

Answer 6

Ho già dato Una risposta usando Grunt per creare i tuoi file HTML in $ templatecache file, ma da allora ho cambiatoA GURP, quindi chiunque stia cercando di seguire lo stesso processo, ma usando Gulp, checkout Gulp-Angular-TemplateCache