web-dev-qa-db-fra.com

Comment importer jQuery dans des projets Angular2 TypeScript?

Je veux envelopper du code jQuery dans une directive Angular2.

J'ai installé la bibliothèque jQuery for Typings dans mon projet avec la commande suivante:

typings install dt~jquery --save --global

Alors maintenant, j'ai le dossier jquery sous le dossier typings/global dans mon répertoire de projet. De plus, la nouvelle ligne suivante a été ajoutée à mon fichier typings.json:

{
    "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160602141332",
        "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
        "node": "registry:dt/node#6.0.0+20160807145350",
        "jquery": "registry:dt/jquery#1.10.0+20160908203239"
    }
}

J'ai commencé à écrire une nouvelle directive Angular2 (que j'ai importée dans un fichier app-module) mais je ne sais pas comment importer correctement la bibliothèque jQuery. Voici mon fichier source:

import {Directive} from '@angular/core';

@Directive({
    selector: "my-first-directive"
})

export class MyFirstDirective {
    constructor() {
        $(document).ready(function () {
            alert("Hello World");
        });
    }
}

Mais je ne peux pas utiliser ni $ ni jQuery. Quelle est la prochaine étape?

jqueryangulartypescriptangular2-directivestypescript-typings
16
smartmouse

Étape 1: installez jquery dans votre projet 

npm install jquery

Étape 2: ajout du type pour jquery 

npm install -D @types/jquery

Étape 3: Utilisez-le dans votre composant! 

import * as $ from 'jquery';

Prêt à utiliser $!

23
Chinmay

Si vous utilisez "@ angular/cli", installez alors:

npm install jquery --save

Deuxième étape installer:

install: npm install @types/jquery --save-dev

Et trouvez votre nom de fichier dans "angular-cli.json" à la racine et ajoutez l'intérieur de comme:

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

Maintenant ça va marcher.

4
Sheo

jQuery.service.ts

 import { OpaqueToken } from '@angular/core'
export let JQ_TOKEN = new OpaqueToken('jQuery');

index.ts`

export * from './jQuery.service';

app.module.ts

declare let jQuery : Object;

@NgModule({
  providers: [
    { provide: TOASTR_TOKEN, useValue: toastr },
    { provide: JQ_TOKEN, useValue: jQuery },
})
export class AppModule { }

comment utiliser Jquery en composant

   import { Component, Input, ViewChild, ElementRef, Inject } from '@angular/core'
import { JQ_TOKEN } from './jQuery.service'

@Component({
  selector: 'simple-modal',
  template: `
  <div id="{{elementId}}" #modalcontainer class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body" (click)="closeModal()">
          <ng-content></ng-content>
        </div>
      </div>
    </div>
  </div>
  `,
  styles: [`
    .modal-body { height: 250px; overflow-y: scroll; }
  `]
})
export class SimpleModalComponent {
  @Input() title: string;
  @Input() elementId: string;
  @Input() closeOnBodyClick: string;
  @ViewChild('modalcontainer') containerEl: ElementRef;

  constructor(@Inject(JQ_TOKEN) private $: any) {}

  closeModal() {
    if(this.closeOnBodyClick.toLocaleLowerCase() === "true") {
      this.$(this.containerEl.nativeElement).modal('hide');
    }
  }
}
3
user1089766

Vous pouvez également charger votre fichier Javascript jQuery dans une balise script normale dans la section head de votre fichier index.html.

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js" />

        ...
    </head>
    ...

Puis, dans le composant ou la directive où vous en avez besoin, déclarez simplement la variable $ nécessaire à jQuery, car vous ne disposerez pas des typages nécessaires pour tous les plugins dont vous avez besoin:

import {Directive} from '@angular/core';

declare var $: any;

@Directive({
    selector: "my-first-directive"
})

export class MyFirstDirective {
    constructor() {
        $(document).ready(function () {
            alert("Hello World");
        });
    }
}
1
rinukkusu

Vous devriez avoir un typings.json qui pointe vers votre fichier de frappe jQery. Ensuite:

systemjs.config (remarque de configuration de carte pour jquery)

System.config({
    defaultJSExtensions: true,
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    map: {
        'app':  'app',
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
        material: 'npm:material-design-lite/dist/material.min.js',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        ....
    },
    packages: {
        app: { main: 'main', format: 'register', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    },
});

En composant:

import $ from 'jquery';

Ensuite, utilisez $ comme d'habitude.

1
vidalsasoon

C'est une vieille question et il y a déjà des réponses. Cependant, les réponses existantes sont trop compliquées (la réponse de l'utilisateur1089766 contient de nombreux éléments inutiles). J'espère que cela aide quelqu'un de nouveau. 

Ajoutez <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> dans votre fichier index.html.

Créez jQuery.Service.ts:

import {InjectionToken} from "@angular/core";
export let jQueryToken = new InjectionToken('jQuery');

Dans votre fichier de module, ajoutez ce jQueryToken au fournisseur: 

providers:[
{
    provide: jQueryToken,
    useValue: jQuery

}]

Maintenant, @Inject(jQueryToken) et il est prêt à être utilisé. Supposons que vous souhaitiez utiliser un nom de composant ExperimentComponent alors: 

import {Component, Inject, OnInit} from '@angular/core';
import {jQueryToken} from "./common/jquery.service";

@Component({
    selector: 'app-experiment',
    templateUrl: './experiment.component.html',
    styleUrls: ['./experiment.component.css']
})
export class ExperimentComponent implements OnInit {

    constructor(@Inject(jQueryToken) private $: any) {
        $(document).ready(function () {
            alert(' jQuery is working');
        });
    }

    ngOnInit() {
    }

}

Chaque fois que vous ouvrez ExperimentComponent, la fonction d'alerte appelle et affiche le message.

0
V.Tran

Je ne pense pas que l'utilisation de jQuery avec Angular 2. devrait poser problème Si les typages et les dépendances pour jQuery sont correctement installés, il ne devrait pas être problématique d'utiliser JQery dans Angular 2.

J'ai pu utiliser jquery dans mon projet 2 angulaire avec une installation correcte. Et par installation correcte, j'entends l'installation de typages jquery afin de le reconnaître dans TypeScript.

Après cela, j'ai pu utiliser jquery de la manière suivante:

jQuery(document).ready({
    ()=>{
        alert("Hello!");
    };
});
0
Abhinandan