Wie verwende ich Bibliotheken von Drittanbietern in AngularJS? Detaillierte Erläuterung der Verwendung von Bibliotheken von Drittanbietern in AngularJS

In diesem Artikel wird erläutert, wie AngularJS Bibliotheken von Drittanbietern verwendet. Welche Bibliotheken von Drittanbietern können von AngularJS verwendet werden?

Angulars Komponenten und Module scheinen etwas inkompatibel mit vorhandenen Bibliotheken von Drittanbietern zu sein (z. B. lodash, moment usw.). Der Hauptgrund dafür ist die durch verursachte Illusion TypeScript . Die drei Säulen des Frontends sind eigentlich dieselben. Unabhängig davon, welches Frontend-Framework verwendet wird, können diese Bibliotheken von Drittanbietern verwendet werden.

Im Folgenden erkläre ich aus einer anderen Perspektive, wie Angular Bibliotheken von Drittanbietern nutzt.

1. Vorab geschrieben

Bevor Sie beginnen, müssen Sie das TypeScript-Modulsystem verstehen – ein Modul wird in seinem eigenen Bereich ausgeführt, nicht im globalen Bereich, auf den Time angewiesen ist export und import um Beziehungen aufzubauen. Während des Kompilierungsprozesses verlässt sich der Compiler auch auf diese Beziehung, um die zu kompilierenden Dateien zu finden.

TypeScript veröffentlicht Klassenbibliotheken immer noch in Form von JavaScript-Dateien, was zu Typen führt, die nicht ausgedrückt werden können und eine Deklarationsdatei zur Beschreibung des Typs erfordern. Daher ist die Deklarationsdatei zu einem unverzichtbaren Bestandteil der Klassenbibliothek geworden .

2. Klassifizierung

Angular wird unter Verwendung der TypeScript-Sprache entwickelt. Damit eine Klassenbibliothek verwendet werden kann, ist die wesentliche Voraussetzung, ob ein vorhanden ist Deklarationsdatei .

Es gibt eine Deklarationsdatei

Um zu unterscheiden, ob die Klassenbibliothek über eine Deklarationsdatei verfügt*.d.ts, können Sie dies unter zwei Gesichtspunkten bestätigen:

1. Klasse Die Bibliothek wird mit

geliefert. Nach der Installation eines abhängigen Pakets von Npm können Sie direkt überprüfen, ob das package.json seiner Bibliothek den Knoten typings enthält, z. B. moment >

"typings": "./moment.d.ts"

2. TypeSearch-Suche

in der Liste angeklickt werden, um zur npm-Website zu springen, und Sie sehen einen Befehl wie diesen: lodash

npm install --save @types/lodash

hatte zuvor keine Deklarationsdatei. In diesem Fall können Sie die Deklarationsdatei nur selbst schreiben. G2

Deklarationsdatei, die automatisch in die src/typings.d.tsglobale Deklarationsdefinition aufgenommen wird, und es wäre besser, die Deklarationsinformationen dieser Dateien zu schreiben Klassenbibliotheken darin aber.

für einige globale Objekte erstellen (was bedeutet, dass Sie das ignorieren). (Statische Typprüfung) ist ebenfalls verfügbar, zum Beispiel: any

// src/typings.d.ts
declare var G2: any;

, um dort zu importieren, wo das Modul benötigt wird, zum Beispiel: import

import * as moment from 'moment';

moment(); // 当前时间

, um anzugeben, dass die statische Typprüfung ignoriert wird, dass der Benutzer nicht in den Genuss intelligenter Eingabeaufforderungen kommen kann, die die Deklarationsdatei mit sich bringt. any

können wir es direkt an einer beliebigen Stelle im Projekt verwenden, es kann jedoch nur G2-Variablen erkennen und die Methoden oder Eigenschaften der Instanz sind agnostisch. G2

// app.component.ts

const g2 = new G2();
g2. // 输入 `.` 后是不会有任何方法或属性

durch. Ob G2 wirklich existiert, können nur Sie selbst feststellen. Für Angular müssen diese Module explizit auf den Knoten G2 von .angular-cli.json geladen werden. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website scriptsAngularJS Development Manual, um mehr zu erfahren)

// .angular-cli.json
"scripts": [
    "../node_modules/@antv/g2/dist/g2.min.js"
]

verwandte JavaScript-Dateien, wird während des Betriebs natürlich der Fehler G2 nicht gefunden angezeigt. G2

hier zu diskreditieren. Jetzt hat G2 ein Erklärungsdokument vorgelegt. G2

AngularJS-Benutzerhandbuch , um mehr zu erfahren. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen). unten.

Das obige ist der detaillierte Inhalt vonWie verwende ich Bibliotheken von Drittanbietern in AngularJS? Detaillierte Erläuterung der Verwendung von Bibliotheken von Drittanbietern in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!