Maison interface Web js tutoriel Comment appeler jQuery pour ajouter angulairejs ? Détails de l'appel de bibliothèques tierces et de l'ajout de jQuery dans Angular5

Comment appeler jQuery pour ajouter angulairejs ? Détails de l'appel de bibliothèques tierces et de l'ajout de jQuery dans Angular5

Sep 07, 2018 pm 03:33 PM
angular.js

Le fichier package.json répertorie les packages de dépendances tiers utilisés par le projet. Lorsque nous créons un nouveau projet, nous téléchargerons certains packages par défaut. Ceux-ci sont inclus avec Angular et sont stockés dans le répertoire node_modules.

Il est à noter que :
Il existe des objets de dépendances et des devDependencies dans package.json.
Les plug-ins de devDependencies ne sont utilisés que dans l'environnement de développement, pas dans l'environnement de production, et les dépendances doivent être publiées dans l'environnement de production.

Comment appeler jQuery pour ajouter angulairejs ? Détails de lappel de bibliothèques tierces et de lajout de jQuery dans Angular5

Il existe deux façons d'ajouter des dépendances :
npm install name –save consiste à écrire les dépendances à installé dans le package Accédez à l'objet de dépendances de .json
npm install name –save-dev consiste à écrire les dépendances à installer dans l'objet devDependencies de package.json

Ce qui suit est un exemple de ajout de minirefresh à l'environnement angulaire. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois angularjs Learning Manual )

1 npm install minirefresh --save

Vous pouvez voir à travers les résultats. :

Comment appeler jQuery pour ajouter angulairejs ? Détails de lappel de bibliothèques tierces et de lajout de jQuery dans Angular5

Comme vous pouvez le voir, il n'y a pas de minirefresh dans les dépendances au début. La commande npm install minirefresh --save téléchargera automatiquement minirefresh. et ajoutez-le aux dépendances. Ensuite, nous constaterons qu'il existe un package minirefresh dans le répertoire node_modules.

2. Modifiez le fichier angulaire-cli.json (tableau de styles et tableau de scripts)
1、styles中就是我们要引入的css
2、scripts中就是我们要引入的js
Copier après la connexion

La configuration est la suivante :

Comment appeler jQuery pour ajouter angulairejs ? Détails de lappel de bibliothèques tierces et de lajout de jQuery dans Angular5

Comment appeler jQuery pour ajouter angulairejs ? Détails de lappel de bibliothèques tierces et de lajout de jQuery dans Angular5

3. Faites la déclaration suivante dans le composant qui doit utiliser le plug-in (dans le fichier .ts) : déclarer var $:any; le but n'est pas de laisser le compilateur signaler une erreur

La configuration est la suivante :

Comment appeler jQuery pour ajouter angulairejs ? Détails de lappel de bibliothèques tierces et de lajout de jQuery dans Angular5

4. Vous pouvez normalement utiliser les trois plug-ins ci-dessus dans la méthode ngOnInit .

Comment appeler jQuery pour ajouter angulairejs ? Détails de lappel de bibliothèques tierces et de lajout de jQuery dans Angular5

Ajout de jQuery
1. >

2. Modifiez le fichier angulaire-cli.json :

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

3. description File

Angular utilise le langage TypeScript comme langage de codage par défaut, tandis que jquery est essentiellement javascript et TypeScript ne peut pas être utilisé directement.
Après avoir terminé les étapes ci-dessus, nous ne pouvons pas utiliser jquery directement pour le moment. Nous devons également d'abord installer le fichier de description de type pour permettre à TypeScript de reconnaître jquery.
Exécuter :
npm install @types/jquery --save-dev

4. Introduisez le fichier jquery dans app.module et ajoutez le module jquery

C'est-à-dire dans app.module .ts file add import * as $ from 'jquery';

Comment appeler jQuery pour ajouter angulairejs ? Détails de lappel de bibliothèques tierces et de lajout de jQuery dans Angular5

D'accord, c'est tout le contenu de cet article (vous voulez en savoir plus, allez-y) sur le site Web PHP chinois

manuel d'apprentissage d'angularjs pour apprendre). Si vous avez des questions, vous pouvez laisser un message ci-dessous

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'apprentissage angulaire parle de composants autonomes (Standalone Component) L'apprentissage angulaire parle de composants autonomes (Standalone Component) Dec 19, 2022 pm 07:24 PM

Cet article vous amènera à continuer à apprendre Angular et à comprendre brièvement le composant autonome (Standalone Component) dans Angular. J'espère qu'il vous sera utile !

Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx May 25, 2022 am 11:01 AM

Cet article vous donnera une compréhension approfondie du gestionnaire d'état NgRx d'Angular et vous présentera comment utiliser NgRx. J'espère qu'il vous sera utile !

Une brève analyse des composants indépendants dans Angular et voir comment les utiliser Une brève analyse des composants indépendants dans Angular et voir comment les utiliser Jun 23, 2022 pm 03:49 PM

Cet article vous présentera les composants indépendants dans Angular, comment créer un composant indépendant dans Angular et comment importer des modules existants dans le composant indépendant. J'espère qu'il vous sera utile !

Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Jul 26, 2022 pm 07:18 PM

Le projet Angular est trop volumineux, comment le diviser raisonnablement ? L'article suivant vous expliquera comment diviser raisonnablement les projets Angular. J'espère qu'il vous sera utile !

Parlons de la façon de personnaliser le format angulaire-datetime-picker Parlons de la façon de personnaliser le format angulaire-datetime-picker Sep 08, 2022 pm 08:29 PM

Comment personnaliser le format angulaire-datetime-picker ? L'article suivant explique comment personnaliser le format. J'espère qu'il sera utile à tout le monde !

Un guide étape par étape pour comprendre l'injection de dépendances dans Angular Un guide étape par étape pour comprendre l'injection de dépendances dans Angular Dec 02, 2022 pm 09:14 PM

Cet article vous guidera à travers l'injection de dépendances, présentera les problèmes que l'injection de dépendances résout et sa méthode d'écriture native, et parlera du framework d'injection de dépendances d'Angular. J'espère qu'il vous sera utile !

Compréhension approfondie de NgModule (module) en Angular Compréhension approfondie de NgModule (module) en Angular Sep 05, 2022 pm 07:07 PM

Le module NgModule est un point important dans Angular, car l'élément de base d'Angular est NgModule. Cet article vous fera découvrir le module NgModule dans Angular. J'espère qu'il vous sera utile !

Sélecteurs :host, :host-context, ::ng-deep d'Angular Sélecteurs :host, :host-context, ::ng-deep d'Angular May 31, 2022 am 11:08 AM

Cet article vous donnera une compréhension approfondie de plusieurs sélecteurs spéciaux dans Angular : host, :host-context, ::ng-deep. J'espère qu'il vous sera utile !

See all articles