So verwenden Sie externes und benutzerdefiniertes JavaScript in Angular 8|7

Blog

So verwenden Sie externes und benutzerdefiniertes JavaScript in Angular 8|7

In diesem Tutorial erfahren wir, wie Sie externe und benutzerdefinierte JavaScript-Bibliotheken/-Code in Angular 8-Projekten verwenden, die auf TypeScript basieren.



Voraussetzungen

Folgende Voraussetzungen müssen Sie mitbringen:

  • Node und NPM auf Ihrem Computer installiert,
  • Winkel-CLI 8 (|_+_|),
  • Ein Angular-Projekt.

Sie können ein Angular-Projekt erstellen, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:



npm install -g @angular/cli

In den neueren Versionen von Angular werden Sie von der CLI zu einigen Fragen aufgefordert, z Möchten Sie Angular-Routing hinzufügen? (j/n) und Welches Stylesheet-Format möchten Sie verwenden? . Sie können diese Fragen nach Belieben beantworten, da dies keinen Einfluss auf die Verwendung von JavaScript-Bibliotheken in Ihrem Angular-Projekt hat.

Sehen wir uns nun an, wie wir externes JavaScript in Angular 8 verwenden können. Als Beispiel verwenden wir die beliebte jQuery-Bibliothek.



Notiz *: Bitte beachten Sie, dass es nicht empfohlen wird, jQuery zum Manipulieren des DOM in Angular zu verwenden. Dies ist lediglich ein Beispiel für das Einbinden einer externen JS-Bibliothek in Angular.*
Wenn Ihre Bibliothek beliebt ist, können Sie sie am liebsten von npm installieren. Navigieren Sie in Ihrem Terminal zum Ordner Ihres Projekts und führen Sie install jquery aus:

$ ng new angular-javascript-demo

Öffnen Sie als Nächstes das |_+_| Datei und suchen Sie die |_+_| Array und aktualisieren Sie wie folgt:

$ npm install jquery --save

Als nächstes müssen Sie in der Komponente, in der Sie Ihre externe Bibliothek aufrufen möchten, das JavaScript-Symbol deklarieren, das Sie aufrufen möchten. Für jQuery müssen wir beispielsweise die folgende Zeile hinzufügen:

angular.json

Als nächstes können Sie die benötigten Funktionen wie im folgenden Beispiel aufrufen:

scripts

So verwenden Sie benutzerdefiniertes JavaScript in Angular

Sehen wir uns nun an, wie wir benutzerdefiniertes JavaScript in Angular verwenden können.

Erstellen Sie zunächst eine JavaScript-Datei im |_+_| Ordner, fügen Sie den folgenden Code als Beispiel hinzu:

'scripts': [ 'node_modules/jquery/dist/jquery.min.js' ]

Als nächstes fügen Sie das Skript zum |_+_| . hinzu Array im |_+_| Datei:

declare var jQuery: any;

Sie können Ihre JavaScript-Funktionen auch einfach in jeder Komponente deklarieren und aufrufen, da es sich um eine TypeScript-Datei handelt. Zum Beispiel:

import { Component, OnInit } from '@angular/core'; declare var jQuery: any; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { name = 'Angular'; ngOnInit(){ (function ($) { $(document).ready(function(){ console.log('Hello from jQuery!'); }); })(jQuery); } }

Ursprünglich veröffentlicht bei *** techiediaries.com *** am 22. Juli 2019

#javascript #angular #typescript #web-entwicklung

www.techiediaries.com

So verwenden Sie externes und benutzerdefiniertes JavaScript in Angular 8|7

In diesem Tutorial erfahren wir, wie Sie externe und benutzerdefinierte JavaScript-Bibliotheken/-Code in Angular 8-Projekten verwenden, die auf TypeScript basieren.