Angular :

intégration de Bootstrap et jQuery

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en Programmation par contrainte (IA)
Ingénieur en Génie logiciel

elmouelhi.achref@gmail.com

08 février 2018, POEC JS Full Stack 1 / 13

 Plan

1 Bootstrap

2 jQuery

08 février 2018, POEC JS Full Stack 2 / 13

 Bootstrap

Bootstrap

Pour utiliser Bootstrap sous Angular

3 étapes à suivre :
Installation
Intégration
Utilisation

08 février 2018, POEC JS Full Stack 3 / 13

 Bootstrap

Bootstrap

Installation
npm install --save bootstrap
Vérifier qu’un répertoire bootstrap a bien été créé dans
node modules

08 février 2018, POEC JS Full Stack 4 / 13

 Bootstrap

Bootstrap

Intégration dans le projet

Ouvrir le fichier .angular-cli.json (ou .angular.json pour

Angular 6) situé à la racine de votre projet
Dans la rubrique styles, ajouter le chemin relatif vers le fichier
bootstrap.css (le chemin est
"../node modules/bootstrap/dist/css/bootstrap.css"
pour Angular 2,4 ou 5 et
"./node modules/bootstrap/dist/css/bootstrap.css" pour
Angular 6)

08 février 2018, POEC JS Full Stack 5 / 13

 Bootstrap

Bootstrap

Maintenant, on peut utiliser Bootstrap dans les

*.component.html : exemple
<button class=’btn btn-primary’> bouton </button>

<ul class="list-group">

<li class="list-group-item" *ngFor=’let element of

ensemble’>
{{ element }}
</li>

</ul>

08 février 2018, POEC JS Full Stack 6 / 13

 Bootstrap

Bootstrap

Pour consulter les différentes classes bootstrap

https://www.w3schools.com/bootstrap/default.asp

08 février 2018, POEC JS Full Stack 7 / 13

 jQuery

jQuery

Pour utiliser jQuery sous Angular

4 étapes à suivre :
Installation
Intégration
Déclaration
Utilisation

08 février 2018, POEC JS Full Stack 8 / 13

 jQuery

jQuery

Installation
npm install --save jquery
Ouvrir le fichier .angular-cli.json (ou .angular.json pour
Angular 6) situé à la racine de votre projet

08 février 2018, POEC JS Full Stack 9 / 13

 jQuery

jQuery

Intégration dans le projet

Dans la rubrique scripts, ajouter le chemin relatif vers le fichier

jquery.min.js (à savoir
"../node modules/jquery/dist/jquery.min.js" pour
Angular 2,4 ou 5 et
"./node modules/jquery/dist/jquery.min.js" pour
Angular 6)

08 février 2018, POEC JS Full Stack 10 / 13

 jQuery

jQuery

Maintenant, on peut déclarer le $ de jQuery dans les

*.component.ts : exemple
import { Component, OnInit } from ’@angular/core’;

declare var $: any;

@Component({
selector: ’my-root’,
templateUrl: ’./my.component.html’,
styleUrls: [’./my.component.css’]
})

export class MyComponent implements OnInit {{

}

08 février 2018, POEC JS Full Stack 11 / 13

 jQuery

jQuery
Maintenant, on peut utiliser jQuery dans les *.component.ts :
exemple
import { Component, OnInit } from ’@angular/core’;
declare var $: any;
@Component({
selector: ’my-root’,
templateUrl: ’./my.component.html’,
styleUrls: [’./my.component.css’]
})
export class MyComponent implements OnInit {{
ngOnInit() {
$(’#test’).click(function() {
alert(’ test jquery ’);
});
}
}
08 février 2018, POEC JS Full Stack 12 / 13
 jQuery

jQuery

Dans le *.component.html
<button id ="test">jQuery</button>

08 février 2018, POEC JS Full Stack 13 / 13

 jQuery

jQuery

Dans le *.component.html
<button id ="test">jQuery</button>

Pour tester
En cliquant sur le bouton jQuery, un message d’alert JS sera affiché
avec comme contenu test jquery

08 février 2018, POEC JS Full Stack 13 / 13