AngularJS - Comment modulariser une directive + modèle de combinaison?

Question

Voici la situation.J'ai une directive, qui dépend d'une templateUrl.

La directive ressemble à quelque chose comme ceci:

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

Cette directive fait partie de l'une de mes applications, et il est important qu'il reste une partie de l'application.Cependant, je tiens également à utiliser la même directive dans d'autres projets, et actuellement je suis à l'aide de verdure à tirer vers le bas le référentiel dans mes autres projets.Toutefois, cette directive va se casser à cause de la templateUrl sera incorrect.Bower clones vers le bas l'ensemble de mon projet, et le chemin réel du modèle, au mieux, auront besoin d'être présent dans mon autre projet:

/lib/public/foo/bar.html

Comment d'autres personnes peuvent gérer cela?

Answer 1

Je n'ai jamais aimé à l'aide de chaînes du modèle pour la création de modèles due à des problèmes de maintenabilité.J'ai prototype html très rapidement donc j'ai opter pour un grognement tâche qui lit mes fichiers et les processus dans un seul $templateCache fichier js.

Solution

Grunt Angulaire Modèles

Grunt build tâche pour concaténer & enregistrer votre AngularJS modèles dans l' $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
    }
  }
  // ...
});

génère quelque chose comme: ./src/templates.js qui préserve ma structure de dossier:

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

}]);

Maintenant, dans mon directive j'pouvez simplement utiliser templateUrl: 'views/directives/my-download.html' et il utilise le $templateCache.

Enfin j'ai utilisé grunt-contrib-concat combiner mes fichiers pour faciliter le chargement.

Checkout "Grunt concat + uglify avec sourcemaps"(ou laissez un meilleur lien dans les commentaires) pour apprendre comment concat + uglify (aka min) js fichiers "dist" fichier.

Si vous travaillez sur vos propres bower ensemble..

Assurez-vous de commettre la concaténation (aka construit) des fichiers pour le paquet repo afin que votre paquet les consommateurs peuvent tout simplement inclure my-concat-package.js ou my-concat-package.min.js

Answer 2

Angulaire directives ont templateUrl et template les propriétés. template reçoit une chaîne HTML.Ce n'est pas une solution parfaite, car vous avez besoin de mettre du HTML dans votre JS.Mais c'est un modèle commun pour la bibliothèque de créateurs pour mettre la chaîne HTML directement sur template de la propriété, de sorte qu'ils peuvent s'enrouler leur module dans un seul fichier.

Vous pouvez faire que templateUrl-à-modèle d'une étape de génération de vous lib.

Jetez un oeil sur Angulaire Bootstrap Bower Repo.

Answer 3

Une solution à ce problème, et mon préfère personnellement que la solution à ce, est de mettre le modèle dans $templateCache dans un Module.run fonction.De cette façon, vous ne jamais avoir à vous soucier de l'url référant à la mauvaise chose, vous pouvez lui donner n'importe quelle identifier les url que vous voulez, et il n'aura jamais besoin d'une requête http pour récupérer ce modèle, pour démarrer.

Answer 4

Dans votre projet de directive:

Créer tous les modèles avec xyz.tpl.html nom de fichier et le mettre dans votre directive dir avec tous les code js.Tous les templateUrl ressemble

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

En application du projet:

Créer un gulp/grunt tâche dans votre projet pour copier tous *.tpl.html fichier dans /template/ dir de bower_components (par défaut).

par exemple:

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

Important! L' /modèle dir est une convention (js, css, etc).

Answer 5

Vous pouvez le faire avec gulp à l'aide de gulp-angulaire-templatecache.

Vous de directive ressemble à:

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

Et votre gulpfile.js devrait ressembler à ceci:

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

Ce produit le fichier 'templateFile.js" dans votre dossier dist, qui peuvent être emballés avec votre fichier de directives dans votre bower.json.

Answer 6

J'ai déjà donné une réponse à l'aide de grunt pour construire vos fichiers html en $templateCache fichier, mais depuis, j'ai passé à avaler, de sorte que tous ceux qui cherchent à suivre le même processus, mais en utilisant gulp, la caisse gulp-angulaire-templatecache