Laden relativer templateUrl

Ich habe versuchen zu finden der beste Weg, um erstellen Sie eine modulare, skalierbare angular Anwendung. Ich mag die Struktur von Projekten wie Winkel-boilerplate, angular-app, wo alle zugehörigen Dateien, gruppiert nach feature für partials und Richtlinien.

project
|-- partial
|   |-- partial.js
|   |-- partial.html
|   |-- partial.css
|   |-- partial.spec.js

Jedoch in allen diesen Beispielen, die Vorlagen-URL geladen ist relativ zur Basis-url, nicht relativ zur aktuellen Datei:

angular.module('account', [])
.config(function($stateProvider) {
  $stateProvider.state('account', {
    url: '/account',
    templateUrl: 'main/account/account.tpl.html', //this is not very modular
    controller: 'AccountCtrl',
  });
})

Dies ist nicht sehr modular, und werden könnte, schwer zu pflegen, in großen Projekten. Ich hätte merken müssen, ändern Sie die templateUrl Pfad jedes mal zog ich diesen Modulen. Es wäre schön, wenn es eine Möglichkeit zum laden der Vorlage relativ zur aktuellen Datei, wie:

templateUrl: './account.tpl.html'

Gibt es irgendeine Möglichkeit, etwas zu tun, wie dies in eckige?

Kommentar zu dem Problem

Haben Sie einen Blick auf dieses stackoverflow.com/questions/21103724/... Kommentarautor: BKM

InformationsquelleAutor der Frage Danny Nelson | 2014-04-03

16

Ich denke, Sie werden schließlich finden, dass die Beibehaltung der Pfade, die relativ zu der js-Datei wird schwieriger, wenn überhaupt möglich. Wenn es darum geht, Zeit zu versenden, sind Sie wahrscheinlich gehen zu wollen, zu verketten alle Ihre javascript-Dateien zu einer Datei, in dem Fall sind Sie gehen zu wollen, die Vorlagen, um relativ zu der baseUrl. Auch, wenn Sie das abrufen der templates über ajax, die Eckige standardmäßig tut, es sei denn, Sie pre-Paket Sie in der $templateCache, sind Sie definitiv gehen zu wollen, Sie relativ zur baseUrl, damit der server weiß, wo Sie zu finden, sobald Ihre js-Datei wurde bereits an den browser gesendet.

Vielleicht ist der Grund dafür, dass Sie mögen es nicht, wenn Sie relativ zur baseUrl in der Entwicklung ist, weil Sie nicht mit server vor Ort? Wenn das der Fall ist, würde ich das ändern. Es wird Ihr Leben viel einfacher, vor allem, wenn Sie gehen, um die Arbeit mit den Routen. Ich würde check out Grunt, es hat eine sehr einfache server, die Sie ausführen können lokal zu imitieren, um ein Produktions-setup aufgerufen Grunt Verbinden. Man könnte auch Kasse ein Projekt wie Yeoman, die eine pre-packaged-front-end Entwicklungsumgebung auf der Basis von Grunt, so dass Sie nicht haben zu verbringen viel Zeit setup. Die Eckige Samen Projekt ist ein gutes Beispiel für ein Grunt-setup für die lokale Entwicklung als gut.

InformationsquelleAutor der Antwort Charlie Martin

Der beste Weg, dies jetzt zu tun, ist die Verwendung einer Modul-loader wie browserify, webpack, oder Typoskript. Es gibt genug andere als gut. Da Bedarf kann aus den relativen Speicherort der Datei, und dem zusätzlichen bonus zu können, importieren Sie Vorlagen über Transformationen oder Lader wie partialify, Sie haben nicht einmal mithilfe von Vorlagen-urls mehr. Einfach nur die inline-Vorlage über eine benötigen.

Mein Alter beantwortet wird, ist noch verfügbar unter:

Ich schrieb einen Beitrag über genau dieses Thema und Sprach es an unserem lokalen Winkel-Meetup. Die meisten von uns nutzen es nun in der Produktion.

Es ist ganz einfach, solange Ihre Datei-Struktur dargestellt wird effektiv in Ihren Modulen. Hier ist eine kurze Vorschau der Lösung. Vollständiger Artikel link folgt.

var module = angular.module('myApp.things', []);

var all = angular.module('myApp.things.all', [
    'myApp.things',
    'things.someThing',
    'things.someOtherThing',
    'things.someOtherOtherThing',
]);

module.paths = {
    root: '/path/to/this/thing/',
    partials: '/path/to/this/thing/partials/',
    sub: '/path/to/this/thing/sub/',
};

module.constant('THINGS_ROOT', module.paths.root);
module.constant('THINGS_PARTIALS', module.paths.partials);
module.constant('THINGS_SUB', module.paths.sub);

module.config(function(stateHelperProvider, THINGS_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things',
        url: '/things',
        templateUrl: THINGS_PARTIALS + 'things.html',
    });
});

Und dann alle sub-Module oder "relative" - Module wie folgt Aussehen:

var module = angular.module('things.someThing', ['myApp.things']);
var parent = angular.module('myApp.things');

module.paths = {
    root: parent.paths.sub + '/someThing/',
    sub: parent.paths.sub + '/someThing/sub/',
    partials: parent.paths.sub + '/someThing/module/partials/',
};

module.constant('SOMETHING_ROOT', module.paths.root);
module.constant('SOMETHING_PARTIALS', module.paths.partials);
module.constant('SOMETHING_SUB', module.paths.sub);

module.config(function(stateHelperProvider, SOMETHING_PARTIALS) {

    stateHelperProvider.setNestedState({
        name: 'things.someThing',
        url: "/someThing",
        templateUrl: SOMETHING_PARTIALS + 'someThing.html',
    });
});

Hoffe, das hilft!

Vollständiger Artikel: Relative AngularJS Module

Prost!

InformationsquelleAutor der Antwort tannerlinsley

Habe ich schon zu kauen auf diese Frage für eine Weile jetzt. Ich benutze Schluck zu Verpacken, meine Vorlagen für die Produktion, aber ich war zu kämpfen, um eine Lösung zu finden, die ich war glücklich mit der Entwicklung.

Dies ist, wo ich landete. Das snippet unten können jede url werden neu verdrahtet wie Sie sehen, passen.

angular.module('rm').config(function($httpProvider) {

  //this map can be defined however you like
  //one option is to loop through script tags and create it automatically
  var templateMap = {
    "relative.tpl.html":"/full/path/to/relative.tpl.html",
    etc...
  };

  //register an http interceptor to transform your template urls
  $httpProvider.interceptors.push(function () {
    return {
      'request': function (config) {
        var url = config.url;
        config.url = templateMap[url] || url;
        return config;
      }
    };
  });
});

InformationsquelleAutor der Antwort Tom Makin

1

Aktuell ist es möglich, das zu tun, was Sie wollen mit systemJs Module loader.
```
import usersTemplate from './users.tpl';

var directive = {
   templateUrl: usersTemplate.name
}
```
Können Sie prüfen, gutes Beispiel hier https://github.com/swimlane-contrib/angular1-systemjs-seed

InformationsquelleAutor der Antwort Andzej Maciusovic
-1

Hatte ich mich schon mit templateUrl: './templateFile.tpl.html aber aktualisiert etwas, und es brach. Also warf ich diese in es.

Ich habe mit diesem in mein Gruntfile.js html2js Objekt:
```
html2js: {
  /**
   * These are the templates from `src/app`.
   */
  app: {
    options: {
      base: '<%= conf.app %>',
      rename: function( templateName ) {
        return templateName.substr( templateName.lastIndexOf('/') );
      }
    },
    src: [ '<%= conf.app %>/**/{,*/}<%= conf.templatePattern %>' ],
    dest: '.tmp/templates/templates-app.js'
  }
}
```
Ich weiß, das kann zu Konflikten führen, aber das ist ein kleineres problem als von mir zu Bearbeiten /path/to/modules/widgets/wigdetName/widgetTemplate.tpl.html in jede Datei, jedes mal, wenn ich es in einem anderen Projekt.

InformationsquelleAutor der Antwort b.kelley

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.