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