SlideShare une entreprise Scribd logo
ANGULAR
FRAMEWORK DE DÉVELOPPEMENT WEB
Un guide de Papa djadji Gueye, TeamxGroup
Qu’est-ce qu’Angular ?
C’est un framework de développement front, open source ecrit en javascript pour
créer des applications monopages, web et mobile.
Créé en 2009 par Misko Hevery, employé chez Google.
Maintenu à la fois par Google et la communauté des développeurs.
Pour quels types d’applications ?
Des petits widgets interactifs
Des sites web complet
Des applications mobiles
...
1. Historique
➔ 2009 : Sortie d’AngularJS
➔ 2013: Explosion de notoriété et d ‘adoption
➔ Septembre 2014 : Annonce de la sortie d’Angular 2
➔ Septembre 2016 : Sortie d’Angular 2
➔ Mars 2017 : Angular 4
➔ Octobre 2017 : Angular 5
➔ Mars 2018 : Angular 6
➔ Octobre 2018 : Angular 7
➔ Mai 2019 : Angular 8
➔ Fevrier 2020 : Angular 9
➔ Juin 2020 : Angular 10
➔ Novembre 2020 : Angular 11
Pourquoi avoir recréé
Angular ?
Angular ne reprend pas le code source de base d’AngularJS, mais reprend quelques
concepts.
Google a cherché à faire table rase du passé, en remettant à plat de nombreux concepts
présents dans AngularJS.
Cette stratégie a été motivée par 4 principes fondateurs :
• Augmenter les performances
• Angular se repose davantage sur les briques natives du navigateur (ex: WebComponents)
• Améliorer la productivité :
• en se basant sur le langage Typescript
• S’adapter au mobile :
• La conception modulaire du framework permet de réduire l’empreinte mémoire sur les
terminaux mobiles .
• Intégrer les nouveaux standards du Web…
• en se basant sur des technologies et nouveautés apportées par ECMAScript 6.
Architecture Angular
Pour utiliser un composant dans
une application, vous devez le
déclarer dans le module associé.
• declarations: La propriété de déclaration
contient une liste des composants que vous
définissez pour ce module.
• exports: si vous souhaitez utiliser un
composant ou une directive de ce module dans
un autre module, vous devez ajouter ce nom de
composant ou de directive ici.
• imports: si vous souhaitez utiliser des modules
externes (bibliothèques) comme FormsModule,
RouterModule
• providers: quel que soit le service que vous créez
dans ce module, vous devez le fournir ici.
• bootstrap : vous devez fournir le nom du
composant que vous souhaitez charger lors du
chargement de l'application dans le navigateur. En
général, il s'agit du nom du composant racine.
Component
Composant racine
Quelques propriétés importantes
du décorateur @Component:.
• selector: le nom donné dans cette propriété est
utilisé sur la page HTML comme balise pour
charger ce composant à l'écran.
• templateUrl: templateUrl est utilisé pour
mapper une page HTML externe à ce composant.
• template: si votre contenu HTML (vue) est
n’est pas long, au lieu d'écrire une page HTML
externe, vous pouvez directement utiliser HTML
dans cette propriété.
•styleUrls: styleUrls est utilisé pour insérer la liste
des fichiers CSS que vous souhaitez utiliser pour ce
composant.
styles: cette propriété peut être utilisée pour écrire
des styles internes pour ce composant, au lieu
d'écrire dans un autre fichier externe.
Template
code template html
Comme nous l'avons vu dans «.Component», chaque component est mappé sur un template.
Template est une structure en forme d'arbre.
Data binding
Syntax Angular Data Binding
Angular prend en charge la liaison de données pour coordonner les parties d'un template avec les
parties de component.
Il prend en charge les types de liaison de données suivants:
• Interpolation:L'interpolation est utilisée pour afficher la valeur de la propriété du composant à
l'écran. Comme indiqué dans l'extrait de code du modèle. Il y a {{title}} est utilisé pour afficher la
valeur de propriété de titre du composant à l'écran.
• Property Binding: La liaison de propriété est utilisée pour mettre à jour la propriété DOM ainsi
que pour les événements d'entrée. Par exemple, [class] est utilisé pour mettre à jour la classe de
style DOM de cet élément.
• Event Binding: La liaison d'événement est utilisée pour générer un événement à partir d'un élément
spécifique comme, lors d'un clic de bouton, exemple (click)='addLanguage(Language.value)'.
• Two-way Data Binding: La liaison de données bidirectionnelle se produit lorsque le changement de
modèle modifie la vue et la modification de la vue modifie le modèle. Par conséquent, chaque fois
que vous mettez à jour la valeur à l'écran, elle sera automatiquement mise à jour dans le composant
et vice versa. La syntaxe de la liaison de données bidirectionnelle est [(ngModel)] = 'property'.
Metadada
Généralement, toutes les parties de angular comme un composant, une directive, un
module ou un service, sont toutes des classes typescript de base. mais,
la question est de savoir comment angular sait le type de classe?
La réponse à la question ci-dessus est les métadonnées.
Les métadonnées indiquent à Angular comment traiter une classe.
Dans TypeScript, vous attachez des métadonnées à l'aide de @Component,
@NgModule, @Injectable ou @Directive.
Metadata
Les template angular sont dynamiques. Quand
Angular fait le rendu de ses template, il transforme
le DOM selon les instructions données par les
directives.
Angular fournit deux types de directives:
● Structural Directive : les directives structurelles
modifient la structure du modèle DOM. Par
exemple, * ngFor, * ngSwitch, * ngIf etc. sont des
directives structurelles.
● Attribute Directive : La directive d'attribut met à
jour l'attribut d'un contrôle HTML spécifique,
par exemple [(ngModel)] est une directive
d'attribut.
Directive
Service
Les services sont utilisés pour les services de données réutilisables à partager entre les
composants d'une application.
Comme indiqué ci-dessus, le décorateur @Injectable () est utilisé pour déclarer toute classe
typescript comme Service.
Ceci est principalement utilisé pour les appels de service Web côté serveur.
Cela peut également être utilisé comme classe de partage de données, pour partager des
données entre les composants d'une application et pour écrire une logique métier.
Les services sont asynchrones invariables. Nous pouvons renvoyer des données sous forme de
promise ou Observable en utilisant RxJS.
Service
Dependency Injection
L'injection de dépendances est un moyen de
fournir une nouvelle instance d'une classe
avec les dépendances entièrement formées
dont elle a besoin.
Angular utilise l'injection de dépendances
pour fournir aux nouveaux composants les
services dont ils ont besoin.
Injector maintient la liste des services que vous
allez utiliser dans l'application. Chaque fois
qu'un composant nécessite le service, injector
donnera l'instance à ce composant.
Quels sont les nouveautés
de Angular 11 ?
• Vitesse d'exécution :Dans cette nouvelle version, Angular devient encore plus rapide que vous ne le
pensez, du développement jusqu'au cycle de construction. Cela a été possible grâce à quelques
changements et mises à jour sur des choses comme la compilation, qui utilise maintenant TypeScript
4.0 et des processus plus rapides comme la mise à jour ngcc( compilateur de compatibilité Angular),
maintenant jusqu'à quatre fois plus rapide.
• Mises à jour Angular ESLint :Avant cette nouvelle version, Angular implémentait toujours le linting
avec TSLint par défaut, mais TSLint est désormais déconseillé par les créateurs, qui recommandent de
migrer complètement vers ES Lint.
Angular a introduit une méthode en trois étapes pour migrer de TSLint vers ESLint.
1.Ajouter des dépendances pertinentes
ng add @angular-eslint/schematics
2. Exécutez le schéma convert-tslint-to-eslint sur un projet
ng g @angular-eslint/schematics:convert-tslint-to-eslint
{{YOUR_PROJECT_NAME_GOES_HERE}}
3. Supprimez la configuration racine TSLint et utilisez uniquement ESLint
Supprimez le tslint.json de niveau racine.
Angular 11
• Prise en charge de TypeScript 4.0 : Avec cette dernière mise à jour, l'équipe Angular a abandonné la
prise en charge de TypeScript 3.9. Désormais, Angular 11 ne prend en charge que TypeScript 4.0.
• Assistance Webpack 5 : Webpack est utilisé pour compiler un grand nombre de fichiers en un seul
bundle ou un seul fichier.Webpack 5 est la dernière version et ce n'est toujours pas totalement stable.
Si vous êtes prêt à essayer webpack 5, vous pouvez commencer par ajouter les lignes suivantes à votre
fichier package.json:
“resolutions”: {
“webpack”: “5.4.0”
}
• Mise à jour de la prise en charge du Hot Module Replacement (HMR) : Le Hot Module
Replacement est un mécanisme qui permet de remplacer des modules sans actualisation complète du
navigateur.
pour activer HMR sur Angular 11: ng serve --hmr
Angular 11
PRATIQUE :
1.Créez une application web
Angular 11 à partir de rien.
2.Construire une API REST simple
avec NodeJS et Express (backend).
Mettre à jour votre Node.js
# Ouvrez votre console et vérifiez votre version de Node.js.
$ node -v
# Installez n package en utilisant npm si vous ne l'avez pas encore installé.
$ sudo npm install -g n
(Utilisez cette commande pour installer la version stable du nœud.)
$ sudo n stable
(Utilisez cette commande pour installer / mettre à jour la dernière version du nœud.)
$ sudo n latest
Initialisation
# Désinstallation angular-cli si il ya une version précédente
npm uninstall -g @angular/cli
# Installation de la dernière version disponible d'angular-cli
npm install -g @angular/cli
# Installation de la version spécifique angular-cli
npm install -g @angular/cli@11.0.0
# Test de version installée
ng --version
Générer le projet
# Générer un projet appelé tutoAngular, choix arbitraire
ng new tutoAngular
# Générer un projet appelé tutoAngular avec les options par défaut
ng new tutoAngular --defaults
# Positionnez-vous dans le projet
cd tutoAngular
# Run
ng serve
# Exécuter et lancer automatiquement l'application dans le navigateur
ng serve -o
Angular 11
Construire une API REST simple avec NodeJS et Express.
# Positionnez-vous dans le projet
$ npm init
#Installation d'Express.
$ npm install express --save
#Création de l'application.
Créez ensuite le fichier app.js ou ce que vous préférez en le nommant (la valeur par défaut est
index.js) et ajoutez le code suivant.
Construire une API REST simple avec NodeJS et Express.
# Lancer l’application
$ node app.js
Votre application sera désormais accessible via http://localhost:3000.
RESSOURCES
https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7
https://angular.io/guide/updating-to-version-11
https://medium.com/@onejohi/building-a-simple-rest-api-with-nodejs-and-express-da6
273ed7ca9
MERCI

Contenu connexe

Tendances

Angular
AngularAngular
Angular
Lilia Sfaxi
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
Cours 3 les directives
Cours 3 les directivesCours 3 les directives
Cours 3 les directives
Aymen Sellaouti
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
Yacine Rezgui
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications Java
Antoine Rey
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Angular Pipes Workshop
Angular Pipes WorkshopAngular Pipes Workshop
Angular Pipes Workshop
Nir Kaufman
 
Presentation of framework Angular
Presentation of framework AngularPresentation of framework Angular
Presentation of framework Angular
Lhouceine OUHAMZA
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Java 8 - collections et stream
Java 8 - collections et streamJava 8 - collections et stream
Java 8 - collections et stream
Franck SIMON
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
ENSET, Université Hassan II Casablanca
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
ENSET, Université Hassan II Casablanca
 
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Ippon
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
Ines Ouaz
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
ENSET, Université Hassan II Casablanca
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
Jaouad Assabbour
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
ENSET, Université Hassan II Casablanca
 
Angular
AngularAngular

Tendances (20)

Angular
AngularAngular
Angular
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Cours 3 les directives
Cours 3 les directivesCours 3 les directives
Cours 3 les directives
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications Java
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Angular Pipes Workshop
Angular Pipes WorkshopAngular Pipes Workshop
Angular Pipes Workshop
 
Presentation of framework Angular
Presentation of framework AngularPresentation of framework Angular
Presentation of framework Angular
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Java 8 - collections et stream
Java 8 - collections et streamJava 8 - collections et stream
Java 8 - collections et stream
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
 
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
 
Angular
AngularAngular
Angular
 

Similaire à Angular 11

Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
imenhamada17
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
inesrdissi60
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
Sébastien Ollivier
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
Philippe Didiergeorges
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
Dekeltv1
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Laurent Duveau
 
Workshop angular2
Workshop angular2 Workshop angular2
Workshop angular2
sihemhcine
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
Martin Latrille
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
Alphorm
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
Habib Ayad
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
MOHAMMED MOURADI
 
spring-boot-fr.pdf
spring-boot-fr.pdfspring-boot-fr.pdf
spring-boot-fr.pdf
seydou4devops
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
Safwen Chibeni
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
Stéphane Traumat
 
Alphorm.com Formation Angular : Avancé
Alphorm.com Formation Angular : AvancéAlphorm.com Formation Angular : Avancé
Alphorm.com Formation Angular : Avancé
Alphorm
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
Damien Laureaux
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
marwa baich
 

Similaire à Angular 11 (20)

Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
 
Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Workshop angular2
Workshop angular2 Workshop angular2
Workshop angular2
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
spring-boot-fr.pdf
spring-boot-fr.pdfspring-boot-fr.pdf
spring-boot-fr.pdf
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
 
Alphorm.com Formation Angular : Avancé
Alphorm.com Formation Angular : AvancéAlphorm.com Formation Angular : Avancé
Alphorm.com Formation Angular : Avancé
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 

Angular 11

  • 1. ANGULAR FRAMEWORK DE DÉVELOPPEMENT WEB Un guide de Papa djadji Gueye, TeamxGroup
  • 2. Qu’est-ce qu’Angular ? C’est un framework de développement front, open source ecrit en javascript pour créer des applications monopages, web et mobile. Créé en 2009 par Misko Hevery, employé chez Google. Maintenu à la fois par Google et la communauté des développeurs. Pour quels types d’applications ? Des petits widgets interactifs Des sites web complet Des applications mobiles ...
  • 3. 1. Historique ➔ 2009 : Sortie d’AngularJS ➔ 2013: Explosion de notoriété et d ‘adoption ➔ Septembre 2014 : Annonce de la sortie d’Angular 2 ➔ Septembre 2016 : Sortie d’Angular 2 ➔ Mars 2017 : Angular 4 ➔ Octobre 2017 : Angular 5 ➔ Mars 2018 : Angular 6 ➔ Octobre 2018 : Angular 7 ➔ Mai 2019 : Angular 8 ➔ Fevrier 2020 : Angular 9 ➔ Juin 2020 : Angular 10 ➔ Novembre 2020 : Angular 11
  • 5. Angular ne reprend pas le code source de base d’AngularJS, mais reprend quelques concepts. Google a cherché à faire table rase du passé, en remettant à plat de nombreux concepts présents dans AngularJS. Cette stratégie a été motivée par 4 principes fondateurs : • Augmenter les performances • Angular se repose davantage sur les briques natives du navigateur (ex: WebComponents) • Améliorer la productivité : • en se basant sur le langage Typescript • S’adapter au mobile : • La conception modulaire du framework permet de réduire l’empreinte mémoire sur les terminaux mobiles . • Intégrer les nouveaux standards du Web… • en se basant sur des technologies et nouveautés apportées par ECMAScript 6.
  • 7. Pour utiliser un composant dans une application, vous devez le déclarer dans le module associé. • declarations: La propriété de déclaration contient une liste des composants que vous définissez pour ce module. • exports: si vous souhaitez utiliser un composant ou une directive de ce module dans un autre module, vous devez ajouter ce nom de composant ou de directive ici. • imports: si vous souhaitez utiliser des modules externes (bibliothèques) comme FormsModule, RouterModule • providers: quel que soit le service que vous créez dans ce module, vous devez le fournir ici. • bootstrap : vous devez fournir le nom du composant que vous souhaitez charger lors du chargement de l'application dans le navigateur. En général, il s'agit du nom du composant racine.
  • 9. Quelques propriétés importantes du décorateur @Component:. • selector: le nom donné dans cette propriété est utilisé sur la page HTML comme balise pour charger ce composant à l'écran. • templateUrl: templateUrl est utilisé pour mapper une page HTML externe à ce composant. • template: si votre contenu HTML (vue) est n’est pas long, au lieu d'écrire une page HTML externe, vous pouvez directement utiliser HTML dans cette propriété. •styleUrls: styleUrls est utilisé pour insérer la liste des fichiers CSS que vous souhaitez utiliser pour ce composant. styles: cette propriété peut être utilisée pour écrire des styles internes pour ce composant, au lieu d'écrire dans un autre fichier externe.
  • 11. Comme nous l'avons vu dans «.Component», chaque component est mappé sur un template. Template est une structure en forme d'arbre.
  • 13. Angular prend en charge la liaison de données pour coordonner les parties d'un template avec les parties de component. Il prend en charge les types de liaison de données suivants: • Interpolation:L'interpolation est utilisée pour afficher la valeur de la propriété du composant à l'écran. Comme indiqué dans l'extrait de code du modèle. Il y a {{title}} est utilisé pour afficher la valeur de propriété de titre du composant à l'écran. • Property Binding: La liaison de propriété est utilisée pour mettre à jour la propriété DOM ainsi que pour les événements d'entrée. Par exemple, [class] est utilisé pour mettre à jour la classe de style DOM de cet élément. • Event Binding: La liaison d'événement est utilisée pour générer un événement à partir d'un élément spécifique comme, lors d'un clic de bouton, exemple (click)='addLanguage(Language.value)'. • Two-way Data Binding: La liaison de données bidirectionnelle se produit lorsque le changement de modèle modifie la vue et la modification de la vue modifie le modèle. Par conséquent, chaque fois que vous mettez à jour la valeur à l'écran, elle sera automatiquement mise à jour dans le composant et vice versa. La syntaxe de la liaison de données bidirectionnelle est [(ngModel)] = 'property'.
  • 15. Généralement, toutes les parties de angular comme un composant, une directive, un module ou un service, sont toutes des classes typescript de base. mais, la question est de savoir comment angular sait le type de classe? La réponse à la question ci-dessus est les métadonnées. Les métadonnées indiquent à Angular comment traiter une classe. Dans TypeScript, vous attachez des métadonnées à l'aide de @Component, @NgModule, @Injectable ou @Directive. Metadata
  • 16. Les template angular sont dynamiques. Quand Angular fait le rendu de ses template, il transforme le DOM selon les instructions données par les directives. Angular fournit deux types de directives: ● Structural Directive : les directives structurelles modifient la structure du modèle DOM. Par exemple, * ngFor, * ngSwitch, * ngIf etc. sont des directives structurelles. ● Attribute Directive : La directive d'attribut met à jour l'attribut d'un contrôle HTML spécifique, par exemple [(ngModel)] est une directive d'attribut. Directive
  • 18. Les services sont utilisés pour les services de données réutilisables à partager entre les composants d'une application. Comme indiqué ci-dessus, le décorateur @Injectable () est utilisé pour déclarer toute classe typescript comme Service. Ceci est principalement utilisé pour les appels de service Web côté serveur. Cela peut également être utilisé comme classe de partage de données, pour partager des données entre les composants d'une application et pour écrire une logique métier. Les services sont asynchrones invariables. Nous pouvons renvoyer des données sous forme de promise ou Observable en utilisant RxJS. Service
  • 19. Dependency Injection L'injection de dépendances est un moyen de fournir une nouvelle instance d'une classe avec les dépendances entièrement formées dont elle a besoin. Angular utilise l'injection de dépendances pour fournir aux nouveaux composants les services dont ils ont besoin. Injector maintient la liste des services que vous allez utiliser dans l'application. Chaque fois qu'un composant nécessite le service, injector donnera l'instance à ce composant.
  • 20. Quels sont les nouveautés de Angular 11 ?
  • 21. • Vitesse d'exécution :Dans cette nouvelle version, Angular devient encore plus rapide que vous ne le pensez, du développement jusqu'au cycle de construction. Cela a été possible grâce à quelques changements et mises à jour sur des choses comme la compilation, qui utilise maintenant TypeScript 4.0 et des processus plus rapides comme la mise à jour ngcc( compilateur de compatibilité Angular), maintenant jusqu'à quatre fois plus rapide. • Mises à jour Angular ESLint :Avant cette nouvelle version, Angular implémentait toujours le linting avec TSLint par défaut, mais TSLint est désormais déconseillé par les créateurs, qui recommandent de migrer complètement vers ES Lint. Angular a introduit une méthode en trois étapes pour migrer de TSLint vers ESLint. 1.Ajouter des dépendances pertinentes ng add @angular-eslint/schematics 2. Exécutez le schéma convert-tslint-to-eslint sur un projet ng g @angular-eslint/schematics:convert-tslint-to-eslint {{YOUR_PROJECT_NAME_GOES_HERE}} 3. Supprimez la configuration racine TSLint et utilisez uniquement ESLint Supprimez le tslint.json de niveau racine. Angular 11
  • 22. • Prise en charge de TypeScript 4.0 : Avec cette dernière mise à jour, l'équipe Angular a abandonné la prise en charge de TypeScript 3.9. Désormais, Angular 11 ne prend en charge que TypeScript 4.0. • Assistance Webpack 5 : Webpack est utilisé pour compiler un grand nombre de fichiers en un seul bundle ou un seul fichier.Webpack 5 est la dernière version et ce n'est toujours pas totalement stable. Si vous êtes prêt à essayer webpack 5, vous pouvez commencer par ajouter les lignes suivantes à votre fichier package.json: “resolutions”: { “webpack”: “5.4.0” } • Mise à jour de la prise en charge du Hot Module Replacement (HMR) : Le Hot Module Replacement est un mécanisme qui permet de remplacer des modules sans actualisation complète du navigateur. pour activer HMR sur Angular 11: ng serve --hmr Angular 11
  • 23. PRATIQUE : 1.Créez une application web Angular 11 à partir de rien. 2.Construire une API REST simple avec NodeJS et Express (backend).
  • 24. Mettre à jour votre Node.js # Ouvrez votre console et vérifiez votre version de Node.js. $ node -v # Installez n package en utilisant npm si vous ne l'avez pas encore installé. $ sudo npm install -g n (Utilisez cette commande pour installer la version stable du nœud.) $ sudo n stable (Utilisez cette commande pour installer / mettre à jour la dernière version du nœud.) $ sudo n latest
  • 25. Initialisation # Désinstallation angular-cli si il ya une version précédente npm uninstall -g @angular/cli # Installation de la dernière version disponible d'angular-cli npm install -g @angular/cli # Installation de la version spécifique angular-cli npm install -g @angular/cli@11.0.0 # Test de version installée ng --version
  • 26. Générer le projet # Générer un projet appelé tutoAngular, choix arbitraire ng new tutoAngular # Générer un projet appelé tutoAngular avec les options par défaut ng new tutoAngular --defaults # Positionnez-vous dans le projet cd tutoAngular # Run ng serve # Exécuter et lancer automatiquement l'application dans le navigateur ng serve -o
  • 28. Construire une API REST simple avec NodeJS et Express. # Positionnez-vous dans le projet $ npm init #Installation d'Express. $ npm install express --save #Création de l'application. Créez ensuite le fichier app.js ou ce que vous préférez en le nommant (la valeur par défaut est index.js) et ajoutez le code suivant.
  • 29. Construire une API REST simple avec NodeJS et Express. # Lancer l’application $ node app.js Votre application sera désormais accessible via http://localhost:3000.
  • 31. MERCI