Technologies sur angular.pptx

Angular
Technologique sur
Angular
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
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
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
4
Structure d’une application angular
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
Cycles de vie
d’un composant
6
Differences entre let, const var
7
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.
Différence entre observable et promise
9
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.
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
Le mécanisme d’un appel HTTP
12
import { HttpClientModule } from '@angular/common/http';
@NgModule ({
declarations: [
AppComponent
],
imports: [
AppRoutingModule,
BrowserModule,
HttpClientModule
],
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
// 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
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)
Différents types de binding ?
14
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
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.
@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;
...
}
@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.
C’est quoi une directive ?
18
Les directives d'Angular sont des classes qui
ajoutent un comportement supplémentaire aux
éléments du DOM.
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.
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 {
}
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
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.
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.
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.
Quelques exemples d'outils pour le
test unitaire et intégration.
24
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.
Merci de votre
attention!
Aoua TRAORE
Abasse MAIGA
Barema DJIGUIBA
Emmanuel DIABATE
Kadidiatou SAMAKE
Mamady CAMARA
Mary TRAORE Groupe 1
1 sur 31

Recommandé

Angular 11Angular 11
Angular 11PapaDjadjigueye
150 vues31 diapositives
AngularAngular
AngularMahmoud Nbet
818 vues37 diapositives

Contenu connexe

Tendances(20)

Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Laurent Duveau3.5K vues
Angular 9 Angular 9
Angular 9
Raja Vishnu893 vues
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour204 vues
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
Aymen Sellaouti896 vues
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca38.2K vues
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
Eyal Vardi3.3K vues
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached1.7K vues
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
WebStackAcademy647 vues
React-cours.pdfReact-cours.pdf
React-cours.pdf
Jaouad Assabbour799 vues
Cours 3 les directivesCours 3 les directives
Cours 3 les directives
Aymen Sellaouti457 vues
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid2K vues
Angular data binding Angular data binding
Angular data binding
Sultan Ahmed138 vues
Angular 2Angular 2
Angular 2
Zoubir REMILA327 vues
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
Yacine Rezgui17.4K vues
Angular modules in depthAngular modules in depth
Angular modules in depth
Christoffer Noring2.3K vues
Cours JavaScriptCours JavaScript
Cours JavaScript
Olivier Le Goaër8.8K vues
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng469 vues
Introduction a FlutterIntroduction a Flutter
Introduction a Flutter
Christian SUMBANG1.6K vues

Similaire à Technologies sur angular.pptx(20)

Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas17 vues
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas12 vues
Evolutions scub foundation 3.0 =  4.0Evolutions scub foundation 3.0 =  4.0
Evolutions scub foundation 3.0 = 4.0
adrienhautot1.2K vues
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
Safwen Chibeni2.3K vues
Angluars jsAngluars js
Angluars js
RYMAA429 vues
Cours AngularCours Angular
Cours Angular
Grego M.17 vues
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
Philippe Didiergeorges1.7K vues
AngularJSAngularJS
AngularJS
Ouadie LAHDIOUI5K vues
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet1.6K vues
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
Rui Carvalho1.6K vues
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
Habib Ayad163 vues
Oracle Developer adfOracle Developer adf
Oracle Developer adf
Bacely YoroBi6.9K vues
Spring Ioc.pdfSpring Ioc.pdf
Spring Ioc.pdf
FatimaBouzzit117 vues
Meetup Angular Paris - Feature ModulesMeetup Angular Paris - Feature Modules
Meetup Angular Paris - Feature Modules
Daniel Djordjevic734 vues

Technologies sur angular.pptx

  • 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
  • 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
  • 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.
  • 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

Notes de l'éditeur

  1. https://economicforall.com/library/lecture/read/628548-is-angular-mvvm-or-mvc
  2. https://apprendre-a-coder.com/apprendre-node-js/, https://en.wikipedia.org/wiki/Node.js
  3. https://apprendre-a-coder.com/apprendre-node-js/, https://en.wikipedia.org/wiki/Node.js
  4. https://blog.codewise.fr/angular-composant-introduction#lifecycle
  5. https://code-garage.fr/blog/quelles-sont-les-differences-entre-var-let-et-const-en-javascript/#:~:text=Si%20l%27on%20devait%20r%C3%A9sumer,%C3%A0%20d%C3%A9clarer%20une%20r%C3%A9f%C3%A9rence%20constante
  6. https://code-garage.fr/blog/quelles-sont-les-differences-entre-var-let-et-const-en-javascript/#:~:text=Si%20l%27on%20devait%20r%C3%A9sumer,%C3%A0%20d%C3%A9clarer%20une%20r%C3%A9f%C3%A9rence%20constante
  7. https://code-garage.fr/blog/quelles-sont-les-differences-entre-var-let-et-const-en-javascript/#:~:text=Si%20l%27on%20devait%20r%C3%A9sumer,%C3%A0%20d%C3%A9clarer%20une%20r%C3%A9f%C3%A9rence%20constante Les Promises sont une construction JavaScript qui fournit un moyen de gérer les opérations asynchrones. Ils représentent un résultat éventuel d’une opération asynchrone et peuvent être dans l’un des trois états suivants : en attente, rempli ou rejeté. https://guide-angular.wishtack.io/angular/observables/promise-vs-observable
  8. https://www.tutorialspoint.com/rxjs/rxjs_operators.htm Les Promises sont une construction JavaScript qui fournit un moyen de gérer les opérations asynchrones. Ils représentent un résultat éventuel d’une opération asynchrone et peuvent être dans l’un des trois états suivants : en attente, rempli ou rejeté. Les opérateurs sont une partie importante de RxJS. Un opérateur est une fonction pure qui prend une observable en entrée et la sortie est également une observable.
  9. https://angular.io/guide/http https://www.youtube.com/watch?v=zhg6Wk5HFDw&list=PLiptPVzCHOl52onYxgo8hb-D0UzcUMcVY&index=9 https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  10. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/ Pour utiliser HTTPClientModule dans notre application, nous allons importer le HTTPClientModule dans votre fichier app.module.ts. Importez HTTPClientModule à partir du package angulaire '@angular/common/http'.
  11. Maintenant, nous pouvons utiliser HTTPClientModule n'importe où dans notre application et il est déjà importé dans le fichier app.module.ts. Nous allons créer une fonction dans notre service permettant d'accéder aux données
  12. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  13. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/ http://www.meanjs.fr/angular-2-version-finale-tutoriel-4-les-quatre-types-de-data-binding/ https://www.tektutorialshub.com/angular/ngmodel-two-way-data-binding-in-angular/
  14. https://www.dotnettricks.com/learn/angular/sharing-data-between-angular-components-methods https://angular.io/guide/http https://ludovicwyffels.dev/angular-3way-communication/ https://webkul.com/blog/communicating-with-backend-server-in-angular-js/ https://ludovicwyffels.dev/angular-3way-communication/
  15. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  16. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  17. https://blog.codewise.fr/angular-composant-introduction
  18. https://www.javatpoint.com/angular-8-directives https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  19. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  20. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/ un provider il est responsable de la configuration et de la création de votre service, d’un service avec AngularJS et notamment du service que vous avez besoin.
  21. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/ Nous avons l’approche Template à partir duquel on insèrer les elements html entre les balises form qui gère le formulaire en entier. Le formulaire template utilise le two way binding pour faire passer les information entre le controller et la vue Pour des applications web modernes, vous aurez besoin de formulaires complexes et dynamiques. Angular vous propose les formulaires réactifs. Là où les formulaires template sont définis par le contenu HTML du template, les formulaires réactifs sont d'abord générés en TypeScript – on vient ensuite relier les différents input du template à l'objet du formulaire. https://openclassrooms.com/fr/courses/7471271-completez-vos-connaissances-sur-angular/7549521-ecoutez-attentivement-vos-utilisateurs-avec-les-reactive-forms
  22. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  23. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  24. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  25. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/
  26. https://angular.io/guide/http https://webkul.com/blog/communicating-with-backend-server-in-angular-js/