Ajouter Bootstarp

SECTION 5: UN 1 ER EXEMPLE

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 170

Qu’est ce que Bootstrap
Un 1er exemple https://getbootstrap.com/

 Les Framework CSS :

 constituent en quelque sorte des boites à outils graphiques.
 sont extrêmement nombreux, parmi ceux-ci nous pourrions citer:
 Foundation
 Materialize CSS
 Bootstrap (Le plus connu et le plus utilisé)

 Bootstrap est sous licence open source depuis 2011. Son utilisation est donc gratuite.
 Pour ajouter Boostrap à un projet Angular, nous pouvons procéder de trois manières, en utilisant :
 le fichier angular.json,
 soit index.html ou bien le fichier style.css

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 171

Ajouter Bootstrap en utilisant angular.json
Un 1er exemple
1- Installer la dernière version stable « Bootstrap 4 » :
npm install --save bootstrap@4
2- Installer jQuery
npm install --save jquery

3- Ajouter les chemins de bootstrap.min.css, jquery.js

et bootstrap.js dans le fichier angular.json

4- Redémarrer le serveur

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 172

Ajouter Bootstrap en utilisant index.html
Un 1er exemple
1- Installer Boostrap et jQuery
npm install --save bootstrap@4
npm install --save jquery

2- Ajouter les chemins de bootstrap.min.css,

jquery.js et bootstrap.js dans le fichier index.html

3- Redémarrer le serveur

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 173

Ajouter Bootstrap en utilisant style.css
Un 1er exemple
1- Installer Boostrap et jQuery
npm install --save bootstrap@4
npm install --save jquery

2- Importer bootsrap.css dans le fichier style.css @import "~bootstrap/dist/css/bootstrap.css"

3- Les fichiers .js seront importer en utilisant l’une des précédentes méthodes

4- Redémarrer le serveur

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 174

 Nouveau Look avec Bootstrap
Un 1er exemple

https://getbootstrap.com/docs/4.5/components/

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 175

Services
SECTION 5: UN 1 ER EXEMPLE

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 176

 Service (1/2)
Un 1er exemple
Objectifs
• Augmenter la réutilisabilité du code en séparant la fonctionnalité des composants des autres types de traitement
• Généralement
• Composants se limite à l’affichage et à la gestion des événements utilisateurs dans la vue du composant.
• Services : exécutent les traitements en local ou en back
• A chaque événement, le composant fait appel à des fonctions dans les services.
• Les services interagissent avec le back end (via des requêtes HTTP).
• Les composants consomment les services (qui consomment d’autres services).
• L’utilisation d’un service se fait via le principe de l’injection des dépendances.

HTML Template @Service 1

< > { }

@Service 3
{ }

@Component @Service 2
{ } { }

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 177

Service (2/2)
Un 1er exemple
 Une classe TypeScript décorée par @Injectable
 pouvant avoir le rôle de l’intermédiaire avec la partie back-end
 un moyen de communication entre composants
 injectable dans les classes où on a besoin de l’utiliser
 Quelques Services
 ActivatedRoute
 Router
 FormBuilder
 HttpClient
 Pour créer un service

$ ng generate service nom-service

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 178

Exemple d’un service
Un 1er exemple
@Service 1 <<dépendance>> @Component
{ } { }

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 179

Injection des dépendances (1/2)
Un 1er exemple Injection de dépendance
une façon de fournir une nouvelle instance d'une classe avec les
@Component dépendances
La plupart des dépendances sont des services
{constructor (Service)}

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 180

 Injection des dépendances (2/2)
Un 1er exemple

Trois types
• injection par constructeur: les dépendances sont fournies par le constructeur de la classe.
• injection par setter: le client offre un setter que l'injecteur utilise pour injecter la dépendance.
• injection par interface: la dépendance fournit une méthode d'injection qui injectera la dépendance
dans tout client qui lui sera transmis. Les clients doivent implémenter une interface qui fourni une
méthode qui accepte la dépendance.

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 181

 Revenons à notre exemple
Un 1er exemple

$ ng g s services/about

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 182

Injection de dépendances d’Angular
Un 1er exemple
 Lorsque Angular crée un composant, il demande d'abord à un injecteur les
services requis.
 Un injecteur maintient un conteneur d'instances de service qu'il a créé
précédemment.
 Si une instance de service demandée n'est pas dans le conteneur, l'injecteur en
fait une et l'ajoute au conteneur avant de renvoyer le service à Angular.
 Lorsque tous les services demandés ont été résolus et retournés, Angular peut
appeler le constructeur du composant avec ces services comme arguments.

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 183

Enregistrement des services
Un 1er exemple
 Pour utiliser un service, il faut préalablement enregistrer un fournisseur de ce service avec
l'injecteur.
 Un fournisseur de service est une fabrique qui permet de gérer l’instanciation des
services enregistrée en modules ou en composants.
 En général, les fournisseurs sont ajoutés au module racine afin que la même instance
d'un service soit disponible partout.

Il faut enregistrer le service (Version < 6)

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 184
 Ajout d’une classe modèle: Comment
Un 1er exemple
1

3 4

• Créez un dossier nommé shared sous

le dossier src / app.
• À ce dossier, ajoutez un fichier nommé
comment.ts avec le code suivant:

M.A.DAHDEH (MEDANOUAR.DAHDEH@GMAIL.COM) 185