AnguarJS-Modul zum Umbinden von JavaScript-Bibliotheken

Question

Ich möchte eine Bibliothek in meinem eckigen Projekt verwenden, die in javascript/jQuery geschriebene Schieberegler bereitstellt. Daher würde ich eine Anweisung in mein Projekt schreiben, mit einer bestimmten Schnittstelle, um die Bibliotheksfunktionalität zu verwenden. Ich würde die Bibliothek Quelldatei in meinem Index HTML laden. Das würde die Bibliothek global verfügbar machen.

Ich würde diese Bibliothek auch in meinen anderen eckigen Projekten verwenden, also würde ich gerne ein Angular-Modul (eigenes Projekt) mit der Direktive erstellen, damit ich es in jedes Projekt als Modul-Abhängigkeit einfügen kann. Leider weiß ich nicht, wo ich die Bibliothek laden soll und wie die Struktur dieses Angular-Moduls aussehen soll. Muss ich die Bibliothek in die Richtlinienvorlage laden?

template.html:

<script src="libraries/jquery-slider.js></script> 
<my-slider></my-slider> 

Oder muss ich die jQuery-Bibliothek in einer anderen Art und Weise laden/injizieren, Zugriff auf seine Funktionalität zu erhalten?

Answer 1

Nehmen wir an, Sie haben ein primäres Modul. Dann ist Ihre index.html Struktur würde wie folgt aussehen:

<script src="js/main.js></script> 

Dann sind Sie ein weiteres Modul hinzufügen, die eine Schnittstelle/Bindings-Anbieter für Ihre Bibliothek:

<script src="js/library-binding.js></script> 
<script src="js/main.js></script> 

Und hier kommt die Frage, dass Sie enthalten müssen die Bibliothek selbst irgendwo. Hier gibt es zwei wichtige Optionen:

Lazy loading, oder die Methode, wenn Sie die Bibliothek im Moment der Verwendung laden möchten. Sie müssten dies innerhalb Ihrer Direktivenimplementierung tun und könnten einige Probleme verursachen, da Sie das Element-Rendering verzögern müssen, bis die Bibliothek geladen ist. Darüber hinaus haben Sie ein weiteres Problem, wenn Sie mehr als ein Element auf der Seite haben: Sie werden die Bibliothek mehr als einmal laden, und dies kann die Quelle von Konflikten sein und Sie müssten sich irgendwie darum kümmern, z. Legen Sie eine globale Variable fest, die die Bibliothek lädt, und Sie müssen sie nicht mehr laden (plus sollte in diesem Fall in den Abschnitt eingefügt werden).

Laden Sie die Bibliothek immer zusammen mit dem Schnittstellenmodul, das ist viel übersichtlicher und einfacher; es wird jedoch always geladen werden unabhängig davon, ob es verwendet wird oder nicht.

Meine persönliche Präferenz ist die zweite Möglichkeit, aber Sie sollten wirklich schauen, was das beste für Ihr bestimmtes Projekt ist.

Also, in diesem Fall index.html Struktur sollte wie folgt aussehen

<script src="js/library.js></script> 
<script src="js/library-binding.js></script> 
<script src="js/main.js></script> 

oder, was

<script src="js/library-and-library-binding.js></script> 
<script src="js/main.js></script> 

In diesem Fall könnte besser sein, alle Abhängigkeiten sind in sich abgeschlossen innerhalb der Moduldatei.