Worldlex Wiki AngularJS a été utilisé comme interface utilisateur de la pile MEAN , composée de la base de données MongoDB , du framework serveur d'applications web Express.js , d'AngularJS lui-même (ou Angular ) et de l'environnement d'exécution serveur Node.js.
À compter du 1er janvier 2022, Google ne met plus à jour AngularJS pour corriger les problèmes de sécurité, de compatibilité avec les navigateurs ou de jQuery . L'équipe Angular recommande la migration vers Angular (v2+) comme solution optimale, mais propose également d'autres options.
HyperText Markup Language ), qui contenait des attributs HTML personnalisés supplémentaires . Angular interprétait ces attributs comme des directives permettant de lier les éléments d'entrée ou de sortie de la page à un modèle représenté par des variables JavaScript standard. Les valeurs de ces variables JavaScript pouvaient être définies manuellement dans le code ou récupérées à partir de ressources JSON statiques ou dynamiques .AngularJS repose sur le principe que la programmation déclarative est préférable pour créer des interfaces utilisateur et connecter des composants logiciels , tandis que la programmation impérative est plus adaptée à la définition de la logique métier d'une application . Ce framework a adapté et étendu le HTML traditionnel pour présenter du contenu dynamique grâce à une liaison de données bidirectionnelle permettant la synchronisation automatique des modèles et des vues. De ce fait, AngularJS minimise la manipulation explicite du DOM ( Document Object Model ) afin d'améliorer la testabilité et les performances.
Les objectifs de conception d'AngularJS comprenaient :
- Il s'agit de découpler la manipulation du DOM de la logique applicative. La difficulté de cette opération dépend fortement de la structure du code.
- Découpler le côté client du côté serveur d'une application permet de mener le développement en parallèle et de réutiliser les deux parties.
- pour structurer le processus de création d'une application : de la conception de l'interface utilisateur à l'écriture de la logique métier, jusqu'aux tests.
AngularJS a implémenté le modèle MVC pour séparer les composants de présentation, de données et de logique. Grâce à l'injection de dépendances , Angular a intégré des services traditionnellement côté serveur , tels que les contrôleurs dépendants de la vue, aux applications web côté client. Par conséquent, la charge sur le serveur a pu être considérablement réduite.
Portée
AngularJS utilisait le terme « portée » d'une manière similaire aux principes fondamentaux de l'informatique.
En informatique, la notion de portée décrit à quel moment d'un programme une liaison particulière est valide. La spécification ECMA-262 définit la portée comme : un environnement lexical dans lequel un objet Function est exécuté dans les scripts Web côté client ; de manière similaire à la façon dont la portée est définie dans le lambda-calcul .
Dans l'architecture MVC, le scope constitue le modèle, et toutes les variables qui y sont définies sont accessibles à la vue et au contrôleur. Le scope assure la liaison entre la vue et le contrôleur.
Bootstrap
La tâche effectuée par le programme d'amorçage AngularJS s'est déroulée en trois phases après le chargement du DOM :
- Création d'un nouvel injecteur
- Compilation des directives qui décorent le DOM
- Liaison de toutes les directives au périmètre
Les directives AngularJS permettaient au développeur de spécifier des éléments et des attributs personnalisés et réutilisables, similaires à ceux du HTML, qui définissaient les liaisons de données et le comportement des composants de présentation. Voici quelques-unes des directives les plus couramment utilisées :
ng-animate- Un module assure la prise en charge des hooks d'animation JavaScript, CSS3 Transition et CSS3 Keyframe au sein des directives de base et personnalisées existantes.
ng-app- Déclare l'élément racine d'une application AngularJS, sous lequel des directives peuvent être utilisées pour déclarer des liaisons et définir un comportement.
ng-aria- Un module pour la prise en charge de l'accessibilité des attributs ARIA courants .
ng-bind- Définit le texte d'un élément DOM sur la valeur d'une expression. Par exemple,
<span ng-bind="name"></span>affiche la valeur de « name » dans l'élément span. Toute modification apportée à la variable « name » dans la portée de l'application est instantanément répercutée dans le DOM. ng-class- Appliquer une classe de manière conditionnelle, en fonction de la valeur d'une expression booléenne.
ng-controller- Spécifie une classe de contrôleur JavaScript qui évalue les expressions HTML.
ng-if- Directive conditionnelle de base qui instancie l'élément suivant si les conditions sont vraies. Si la condition est fausse, l'élément est supprimé du DOM. Si elle est vraie, une copie de l'élément compilé est réinsérée.
ng-init- Appelée une seule fois lors de l'initialisation de l'élément.
ng-model- Similaire à
ng-bind, mais établit une liaison de données bidirectionnelle entre la vue et la portée. ng-model-options- Permet de paramétrer la manière dont les mises à jour du modèle sont effectuées.
ng-repeat- Instancier un élément une fois par élément d'une collection.
ng-show&ng-hide- Afficher ou masquer un élément de manière conditionnelle, selon la valeur d'une expression booléenne. L'affichage et le masquage s'effectuent via la définition du style d'affichage CSS.
ng-switch- Instanciez conditionnellement un modèle à partir d'un ensemble de choix, en fonction de la valeur d'une expression de sélection.
ng-view- La directive de base responsable de la gestion des routes qui résolvent le JSON avant de rendre les modèles pilotés par des contrôleurs spécifiés.
Puisque ng-*les attributs ne sont pas valides dans les spécifications HTML, data-ng-*ils peuvent également être utilisés comme préfixe. Par exemple, `@` ng-appet data-ng-app`@` sont tous deux valides dans AngularJS.
Liaison de données bidirectionnelle
La liaison de données bidirectionnelle d'AngularJS présentait sa caractéristique la plus remarquable : décharger en grande partie le serveur des responsabilités liées à la gestion des modèles. Les modèles étaient rendus en HTML pur, en fonction des données contenues dans une portée définie dans le modèle. Le $scopeservice Angular détectait les modifications apportées au modèle et modifiait les expressions HTML dans la vue via un contrôleur. De même, toute modification de la vue était répercutée dans le modèle. Ceci permettait de s'affranchir de la manipulation active du DOM et favorisait l'initialisation et le prototypage rapide des applications web. AngularJS détectait les modifications des modèles en comparant les valeurs actuelles avec les valeurs précédemment enregistrées, grâce à un processus de vérification des modifications, contrairement à Ember.js et Backbone.js qui déclenchaient des écouteurs d'événements lors de la modification des valeurs du modèle.
$watch- Angular utilise la détection des modifications (ou « dirty ») pour la vérification des modifications. Toute variable ou expression assignée à `$scope` configure automatiquement une expression de surveillance (`$watchExpression`) dans Angular. Ainsi, assigner une variable à `$scope` ou utiliser des directives comme `ng-if`, `ng-show`, `ng-repeat` , etc., crée automatiquement des observateurs dans le scope Angular. Angular conserve un tableau simple d' observateurs (`$watchers`) dans les objets `$scope` .
$digest- La méthode `digest` d'Angular est appelée en interne par AngularJS à intervalles réguliers. Dans cette méthode, Angular parcourt tous les éléments `$watch` de sa portée et de ses portées enfants.JSON en ligne , facturé au mégaoctet, destiné à faciliter le développement d'applications d'entreprise. Ce service était hébergé sur le domaine web « GetAngular.com » et comptait quelques abonnés avant que les deux créateurs ne décident d'abandonner ce projet commercial et de publier Angular en tant que bibliothèque open source.
La version 1.6 a intégré de nombreux concepts d' Angular à AngularJS, notamment celui d'une architecture d'application basée sur les composants. Cette version a notamment supprimé le Sandbox, que de nombreux développeurs considéraient comme un gage de sécurité supplémentaire, malgré les nombreuses vulnérabilités découvertes qui permettaient de le contourner. La version stable actuelle d'AngularJS (novembre 2023) est la 1.8.3.
En janvier 2018, un calendrier de retrait progressif d'AngularJS a été annoncé : après la sortie de la version 1.7.0, le développement actif d'AngularJS se poursuivrait jusqu'au 30 juin 2018. Par la suite, la version 1.7 a été prise en charge jusqu'au 31 décembre 2021 dans le cadre d' un support à long terme .
Prise en charge des navigateurs hérités
Les versions 1.3 et ultérieures d'AngularJS ne prenaient pas en charge Internet Explorer 8 ni les versions antérieures. Bien qu'AngularJS 1.2 prenne en charge IE8, son équipe de développement ne le fait pas.
Angular et AngularDart
Les versions suivantes d'AngularJS sont simplement appelées Angular . Angular est une réécriture incompatible d'AngularJS basée sur TypeScript . Angular 4 a été annoncé le 13 décembre 2016, en sautant la version 3 pour éviter toute confusion due à l'incohérence de la version du package router, déjà distribuée en tant que v3.3.0.
AngularDart fonctionne avec Dart , un langage de programmation orienté objet , basé sur les classes et à héritage simple , utilisant une syntaxe de type C. Cela diffère d'AngularJS (qui utilise JavaScript ) et des versions ultérieures d'Angular telles qu'Angular 2 et Angular 4 (qui utilisent TypeScript ). Angular 4 a été publié en mars 2017, la version du framework étant alignée sur celle du routeur utilisé. Angular 5 a été publié le 1er novembre 2017. Parmi les principales améliorations d'Angular 5 figurent la prise en charge des applications web progressives, un optimiseur de compilation et des améliorations liées à Material Design. Angular 6 a été publié le 3 mai 2018, suivi d'Angular 7 le 18 octobre 2018 et d'Angular 8 le 28 mai 2019.
Angular suit les normes de versionnage sémantique, chaque numéro de version majeure indiquant des changements potentiellement incompatibles. Angular s'engage à fournir 6 mois de support actif pour chaque version majeure, suivis de 12 mois de support à long terme. Les versions majeures sont publiées tous les deux ans, avec 1 à 3 versions mineures pour chaque version majeure.
Angular Universal
Une application Angular classique s'exécute dans le navigateur, tandis qu'Angular Universal génère des pages d'application statiques sur le serveur grâce au rendu côté serveur (SSR).
Bibliothèques
Matériaux AngularJS
Extension Chrome
En juillet 2012, l'équipe Angular a développé Batarang, une extension pour le navigateur Google Chrome , qui améliorait le débogage des applications web Angular. Cette extension permettait de détecter facilement les problèmes de performance et proposait une interface graphique pour le débogage des applications . Fin 2014 et début 2015, l'extension était incompatible avec les versions récentes d'Angular (après la v1.2.x) . Sa dernière mise à jour date du 4 avril 2017. Par ailleurs, l'extension a été retirée du Chrome Web Store le 1er juin 2022 en raison de l'absence de mises à jour et de problèmes de sécurité potentiels, notamment la nécessité d'accéder à des autorisations sensibles.
Performance
AngularJS a introduit le paradigme du cycle de digest . Ce cycle peut être considéré comme une boucle, durant laquelle AngularJS vérifie si des modifications ont été apportées à toutes les variables surveillées par l'ensemble des contrôleurs $scopes. Si $scope.myVarune variable est définie dans un contrôleur et qu'elle a été marquée pour être surveillée, Angular surveillera les modifications de `myVar` à chaque itération de la boucle.
Cette approche pouvait entraîner un rendu lent lorsqu'AngularJS vérifiait un trop grand nombre de variables à $scopechaque cycle. Miško Hevery a suggéré de ne pas dépasser 2 000 observateurs par page.