Télécharger en tant que PDF, PPTX
![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'.](https://image.slidesharecdn.com/angularnode-201215223637/75/Angular-11-13-2048.jpg)
![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](https://image.slidesharecdn.com/angularnode-201215223637/75/Angular-11-16-2048.jpg)
Angular 11
- 1. ANGULAR FRAMEWORK DE DÉVELOPPEMENTWEB Un guide de Papa djadji Gueye, TeamxGroup
- 2. Qu’est-ce qu’Angular ? C’estun 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
- 4.
- 5. Angular ne reprendpas 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.
- 6.
- 7. Pour utiliser uncomposant 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.
- 8.
- 9. Quelques propriétés importantes dudé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.
- 10.
- 11. Comme nous l'avonsvu dans «.Component», chaque component est mappé sur un template. Template est une structure en forme d'arbre.
- 12. Data binding Syntax AngularData Binding
- 13. Angular prend encharge 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'.
- 14.
- 15. Généralement, toutes lesparties 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 angularsont 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
- 17.
- 18. Les services sontutilisé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 dedé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 lesnouveauté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 encharge 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 uneapplication web Angular 11 à partir de rien. 2.Construire une API REST simple avec NodeJS et Express (backend).
- 24. Mettre à jourvotre 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-clisi 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 APIREST 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 APIREST simple avec NodeJS et Express. # Lancer l’application $ node app.js Votre application sera désormais accessible via http://localhost:3000.
- 30.
- 31.