Développer des applications Angular 2+ avec les bibliothèques tierces et l’intégration avec ASP.NET Core

Introduction

Les développeurs d’applications web ont souvent besoin de travailler avec plusieurs technologies et frameworks différents. Dans ce tutoriel, nous allons voir comment utiliser les bibliothèques tierces comme jQuery dans les applications Angular 2+, ainsi que comment configurer une application ASP.NET Core pour fonctionner avec Angular 2+ et TypeScript.

Utiliser les bibliothèques tierces avec Angular 2+

Lorsque vous développez des applications avec Angular 2+, il est possible de utiliser des bibliothèques tierces comme jQuery. Cependant, il faut prendre en compte les différentes étapes pour configurer ces bibliothèques.

Configuration de la bibliothèque tierce

Pour utiliser une bibliothèque tierce dans votre application Angular 2+, vous devez l’installer via npm :

npm install --save jquery

Ensuite, vous devez ajouter le chemin d’accès à la bibliothèque dans le fichier angular-cli.json :

{
  "scripts": [
    "../node_modules/jquery/dist/jquery.js"
  ]
}

Alternativement, vous pouvez sauvegarder la bibliothèque dans le dossier des assets et l’inclure dans le fichier angular-cli.json :

{
  "scripts": [
    "assets/js/jquery.js"
  ]
}

Utilisation de la bibliothèque tierce

Pour utiliser une bibliothèque tierce dans vos composants Angular 2+, vous devez déclarer une variable globale en haut du fichier :

declare var $: any;

ou

declare var jQuery: any;

Cela permettra d’utiliser $ ou jQuery dans vos composants.

Exemple de code

Voici un exemple de code pour utiliser jQuery dans un composant Angular 2+ :

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

@Component({
  selector: 'app-example',
  template: `
    <div>
      <button (click)="onClick()">Cliquez-moi</button>
    </div>
  `,
})
export class ExampleComponent {
  onClick() {
    console.log('Clique sur le bouton !');
  }
}

Intégration avec ASP.NET Core

Pour configurer une application ASP.NET Core pour fonctionner avec Angular 2+ et TypeScript, vous devez suivre les étapes ci-dessous.

Configuration du projet ASP.NET Core

Dans votre fichier Startup.cs, ajoutez les services nécessaires :

public void ConfigureServices(IServiceCollection services)
{
    // Ajouter les services nécessaires
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
}

Configuration de l’application Angular 2+

Dans votre fichier angular-cli.json, ajoutez la configuration nécessaire :

{
  "defaults": {
    "styles": ["../node_modules/bootstrap/dist/css/bootstrap.min.css"],
    "scripts": ["../node_modules/jquery/dist/jquery.js"]
  }
}

Utilisation de l’application ASP.NET Core

Pour utiliser les contrôleurs ASP.NET Core dans vos composants Angular 2+, vous pouvez utiliser la méthode HttpClient :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MyService {
  constructor(private http: HttpClient) {}

  getMyData(): any {
    return this.http.get('https://example.com/my-data');
  }
}

Conclusion

Dans cet article, nous avons vu comment utiliser les bibliothèques tierces comme jQuery dans les applications Angular 2+, ainsi que comment configurer une application ASP.NET Core pour fonctionner avec Angular 2+ et TypeScript. Nous espérons que ce tutoriel vous a été utile !

Étapes suivantes

• En savoir plus sur les bibliothèques tierces et leurs intégrations dans les applications Angular 2+
• Explorer les possibilités de configuration d’une application ASP.NET Core pour fonctionner avec Angular 2+ et TypeScript
• Utiliser les contrôleurs ASP.NET Core dans vos composants Angular 2+