AngularJS – Wie modularisiere ich eine Kombination aus Direktive und Vorlage?

Question

Hier ist die Situation.Ich habe eine Direktive, die von einer templateUrl abhängt.

Die Direktive sieht in etwa so aus:

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

Diese Anweisung ist Teil einer meiner Anwendungen und es ist wichtig, dass sie Teil der Anwendung bleibt.Allerdings würde ich dieselbe Direktive auch gerne in anderen Projekten verwenden und verwende derzeit Bower, um das Repository in meine anderen Projekte zu laden.Diese Anweisung wird jedoch fehlerhaft sein, da die templateUrl falsch ist.Bower klont mein gesamtes Projekt, und der tatsächliche Pfad der Vorlage muss in meinem anderen Projekt bestenfalls so aussehen:

/lib/public/foo/bar.html

Wie schaffen andere das?

Answer 1

Aufgrund von Problemen mit der Wartbarkeit habe ich es nie gemocht, Vorlagenzeichenfolgen für die Vorlagenerstellung zu verwenden.Da ich sehr schnell HTML-Prototypen erstelle, entscheide ich mich für eine Grunzaufgabe, die meine Dateien liest und sie zu einer einzigen verarbeitet $templateCache js-Datei.

Lösung

Grunt Angular-Vorlagen

GRUNT -BUST -Aufgabe zur Verkettung und Registrierung Ihrer AngularJS -Vorlagen im $ 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
    }
  }
  // ...
});

erzeugt so etwas wie: ./src/templates.js wodurch meine Ordnerstruktur erhalten bleibt:

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

}]);

Jetzt kann ich in meiner Direktive einfach verwenden templateUrl: 'views/directives/my-download.html' und es wird der $templateCache verwendet.

Schließlich habe ich verwendet grunt-contrib-concat um meine Dateien zum einfachen Laden zu kombinieren.

Kasse "Grunt concat + uglify mit Quellkarten" (oder hinterlassen Sie einen besseren Link in den Kommentaren), um zu erfahren, wie Sie js-Dateien in einer einzigen „dist“-Datei zusammenfassen und uglifizieren (auch bekannt als „min“).

Wenn Sie an Ihrem eigenen maßgeschneiderten Bower-Paket arbeiten.

Stellen Sie sicher, dass Sie die verketteten (erstellten) Dateien in das Paket-Repository übertragen, damit Ihre Paketkonsumenten sie einfach einbinden können my-concat-package.js oder my-concat-package.min.js

Answer 2

Angular-Anweisungen haben templateUrl Und template Eigenschaften. template erhält einen HTML-String.Es ist keine perfekte Lösung, da Sie HTML in Ihr JS einfügen müssen.Es ist jedoch ein gängiges Muster für Bibliotheksersteller, den HTML-String direkt einzufügen template Eigenschaft, damit sie ihr Modul in eine einzige Datei einbinden können.

Möglicherweise möchten Sie diese templateUrl-to-template zu einem Build-Schritt Ihrer Bibliothek machen.

Schauen Sie mal rein Angular Bootstrap Bower Repo.

Answer 3

Eine Lösung dazu, und meine persönlich bevorzugte Lösung dabei ist, die Vorlage in eine GROSSACODICETICETAGCODE in einer $templateCache-Funktion zu bringen.Auf diese Weise müssen Sie sich nie um die URL kümmern, die sich auf das Falsche bezieht - Sie können es eine beliebige Identifizierungs-URL geben, die Sie gewünscht haben - und es wird niemals eine HTTP-Anforderung benötigt, um diese Vorlage zu holen, um diese Vorlage zu booten.

Answer 4

in Ihrem Richtlinienprojekt:

Erstellen Sie alle Vorlage mit dem Namen von XYZ.TPL.HTML und setzen Sie mit dem gesamten JS-Code in Ihren Richtlinie.Alles Temlsurl sieht aus wie

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

in App-Projekt:

Erstellen Sie in Ihrem Projekt eine GULP / Grunten-Task in Ihrem Projekt, um alle * .tpl.html-Datei in / Template / Dir von Bower_componenten zu kopieren (Standard).

z.:

generasacodicetagpre.

wichtig! Die / Template Dir ist ein Übereinkommen (als JS, CSS usw.).

Answer 5

Sie können dies mit tun Schluck verwenden gulp-angular-templatecache.

Ihre Direktive würde so aussehen:

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

Und dein gulpfile.js würde so aussehen:

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

Dadurch wird die Datei „templateFile.js“ in Ihrem dist-Ordner erstellt, die dann mit Ihrer Direktivendatei in Ihrer Datei „bower.json“ gepackt werden kann.

Answer 6

Ich gab bereits eine Antwort mithilfe von Grunzen, um Ihre HTML-Dateien in $ TEMPLATECACHE-Datei zu erstellen, aber ich bin seitdem umgeschaltetZu GULP, also jemand, der derselben Prozess folgen möchte, sondern mit GULP, Kasse Gulp-Winkel-TemplatEcache