Angular est un framework JavaScript open source développé par Google, conçu pour la création d'applications web, en particulier des applications à page unique. Le document couvre des concepts clés tels que les composants, les observables, le binding de données, ainsi que les tests unitaires et d'intégration. Il aborde également des techniques et outils pour relier le back-end, gérer des formulaires, et implémenter le lazy loading.

1. Angular
Technologique sur
Angular

2. Angular
Développé par Google, Angular est un
Framework JavaScript open source écrit en
TypeScript qui permet la création d’applications
Web et plus particulièrement de ce qu’on
appelle des « Single Page Applications »
Sa dernière version est: 14.1.0 (20 juillet 2022).
1

3. C’est quoi un CLI ?
Angular CLI (command Line Interface) est un
outil permettant de créer, construire, générer
et tester vos applications et librairies Angular.
2

4. Lien entre Node et Angular
Angular est un framework utilisant le langage typeScript, et à besoin
node pour convertir le TypeScript en javaScript compréhensible par le
navigateur.
3

5. 4
Structure d’une application angular

6. C’est quoi un composant angular ?
Les composants sont le principal élément de base des
applications Angulars.
Chaque composant est composé de :
● Un modèle HTML qui déclare ce qui s'affiche sur la page
● Une classe TypeScript qui définit le comportement
● Un sélecteur CSS qui définit comment le composant est
utilisé dans un modèle
● Facultativement, les styles CSS appliqués au modèle
5

7. Cycles de vie
d’un composant
6

8. Differences entre let, const var
7

9. C’est quoi un observable ?
8
Un observable est un objet typé qui émet des valeurs au cours du
temps.
Il peut émettre une erreur : à ce moment-là, l'Observable est
détruit et n'émettra plus de valeurs.

10. Différence entre observable et promise
9

11. Trois (3) opérateurs rxjs et leurs rôles
10
Un opérateur est une fonction qui va appliquer un certain
comportement à un observable source et renvoyer un observable.
Les operateurs Rôles
Interval un opérateur de création utilisé pour créer un
observable qui émet une séquence d'entiers à chaque
fois pendant l'intervalle de temps donné
Of Cet opérateur prend les arguments passés et
les convertis en observable
Map Dans le cas de l'opérateur de map, une fonction
de projet est appliquée sur chaque valeur de
l'Observable source et la même sortie est émise
en tant qu'Observable.

12. Relier un back end à un projet Angular
Angular fournit une API HTTP cliente pour les applications Angular à fin de les
permettre de télécharger des données et accéder à des données
1. Importer le module HTTPClient
2. Créez un service où nous allons créer une fonction envoyer des requêtes
http au serveur.
3. Créez un composant et utilisez les fonctions de service pour obtenir /
ajouter / mettre à jour / supprimer des données de la page Angular.
11

13. Le mécanisme d’un appel HTTP
12
import { HttpClientModule } from '@angular/common/http';
@NgModule ({
declarations: [
AppComponent
],
imports: [
AppRoutingModule,
BrowserModule,
HttpClientModule
],

14. constructeur (http privé : HttpClient ) { }
// Créer une requête get http (obtenir des informations sur le produit
au format json)
getProduct ( id : nombre ) : Observable < Produit > {
return this.http.get ( ` $this .http_product_url/ ${id}` )
. map (( réponse : Réponse ) = > réponse.json ()) ;
}
12
GET

15. // Modification avec le mot clé put
updateProduct(id:number, context: any) {
return this.http.put(`$this.http_product_url/${id}`,
JSON.stringify(context))
.map((response: Response) => response.json());
}
// Suppresion avec le mot clé delete
deleteProduct(id: number) {
return this.http.delete(`$this.http_product_url/${id}`)
.map((response: Response) => response.json());
}
12
PUT
DELETE

16. Qu’est ce que le binding ?
13
Le binding dans Angular permet de lier
facilement des données de notre modèle
(fichiers ts typescript) au visuel (html)

17. Différents types de binding ?
14

18. Différents moyens d’échange entre
composant
15
1. Parent à enfant : via l'entrée
2. Enfant à parent : via Output() et EventEmitter
3. Enfant à parent : via ViewChild
4. Composants non liés : via un service

19. C’est quoi un service angular ?
16
Un service angular est simplement une
classe TypeScript qui encapsule les
différentes méthodes pour effectuer une
certaine tâche dans votre application,
comme obtenir et envoyer des données
depuis et vers un serveur.

20. @Input
17
@Input est un décorateur qui permet
de spécifier une valeur en entrée du
composant.
@Component({
selector: 'app-todo',
})
export class TodoComponent {
@Input()
todo: any;
...
}

21. @Output
17
@Output est un décorateur qui est utilisé pour
transmettre les données du composant enfant
au composant parent.
@Component({
selector: 'app-todo'
})
export class
TodoComponent {
@Output()
notify: EventEmitter<any>
= new EventEmitter();
...
}
EventEmitter est quelque chose qui a la
capacité de propager l'événement du
composant enfant au composant parent.

22. C’est quoi une directive ?
18
Les directives d'Angular sont des classes qui
ajoutent un comportement supplémentaire aux
éléments du DOM.

23. C’est quoi un lazy-loading ?
19
Lazy loading est une technique qui
consiste à retarder le chargement
des d’éléments jusqu’au moment où
ils s’apprêtent à apparaître dans la
vue.

24. C’est quoi un provider en angular ?
20
Un provider est un objet déclaré à
Angular afin qu'il puisse être injecté dans
le constructeur de vos composants
@NgModule({
providers: [
{
provider:
BookRepository,
useClass:
BookRepository
}
]
})
export class BookCoreModule {
}

25. Différentes méthodes d'implémentation
d'un formulaire en angular
21
Il existe 2 méthodes d’implémentation d’un formulaire en angular
❖ Les template forms
❖ Les reactive forms

26. C’est quoi un test unitaire ?
22
Le test unitaire est une procédure
permettant de vérifier le bon
fonctionnement d'une partie précise
d'un logiciel ou d'une portion d'un
programme.

27. C’est quoi un test d’intégration ?
22
Un test d'intégration est un test qui se
déroule dans une phase d'un projet
informatique suivant les tests unitaires qui a
pour but de valider le fait que toutes les
parties développées indépendamment
fonctionnent bien ensemble.

28. Différence entre Test unitaires et
test d'intégration
23
Les tests unitaires vérifient une partie précise d’une application, et les
tests d’intégration analysent le fonctionnement global de l’application,
en gros les tests d’intégrations incluent dans leur champ d’action les
composants externes.

29. Quelques exemples d'outils pour le
test unitaire et intégration.
24

30. Importance des Tests unitaires
25
Les tests unitaires permettent de vérifier le bon fonctionnement
d’une petite partie bien précise (unité ou module) d’une application.
Ils s’assurent qu’une méthode exposée à la manipulation par un
utilisateur fonctionne bien de la façon dont elle a été conçue.

31. Merci de votre
attention!
Aoua TRAORE
Abasse MAIGA
Barema DJIGUIBA
Emmanuel DIABATE
Kadidiatou SAMAKE
Mamady CAMARA
Mary TRAORE Groupe 1