Qu'est-ce qu'AngularJS ? Archistructure, caractéristiques et avantages

Qu'est-ce qu'AngularJS ?

AngularJS est un framework Modèle-Vue-Contrôleur open-source écrit en JavascénarioAngularJS était l'un des frameworks web les plus populaires des années 2010 et il est utilisé pour le développement.ping Principalement des applications monopages. Ce framework a été développé par un groupe de développeurs de Google elle-même.

Grâce au soutien indéfectible de Google Grâce aux idées issues d'un large forum communautaire, le framework a été constamment mis à jour tout au long de son cycle de vie. Il a également intégré les principales tendances de développement de l'époque, ce qui explique pourquoi une si grande partie du code en production fonctionne encore avec ce framework aujourd'hui.

Il convient de clarifier d'emblée un point de terminologie. AngularJS est généralement décrit comme un framework MVC, ce qui constitue un point de départ utile. L'équipe AngularJS elle-même, cependant, préfère l'appellation « architecture MVC ». MVW (Model-View-Whatever), car l'environnement d'exécution se comporte davantage comme un modèle MVC (Modèle-Vue-VueModèle) que comme un modèle MVC classique. La version officielle Documentation AngularJS On le qualifie de cadre structurel pour les applications web dynamiques. Ceci étant dit, voici comment les différents éléments s'articulent.

AngularJS Architecture

AngularJS suit l'architecture MVC. Le diagramme du framework MVC est présenté ci-dessous :

AngularJS Archidiagramme de structure

Chacune des trois couches a un rôle bien défini :

• Le contrôleur représente la couche qui possède la logique métier. Les événements utilisateur déclenchent les fonctions stockées dans votre contrôleur. Les événements utilisateur font partie du contrôleur.
• Les vues servent à représenter la couche de présentation fournie aux utilisateurs finaux.
• Les modèles sont utilisés pour représenter vos données. Les données de votre modèle peuvent être aussi simples que de simples déclarations primitives. Par exemple, si vous gérez une candidature d'étudiant, votre modèle de données peut simplement contenir un identifiant d'étudiant et un nom. Cela peut également être complexe en disposant d'un modèle de données structuré. Si vous gérez une demande de propriété de voiture, vous pouvez disposer de structures pour définir le véhicule lui-même en termes de cylindrée, de nombre de sièges, etc.

En pratique, le contrôleur envoie rarement manuellement des données à la vue. AngularJS surveille le modèle et actualise la vue automatiquement ; cette synchronisation automatique repose sur les fonctionnalités décrites ci-après.

Caractéristiques d'AngularJS

AngularJS possède les caractéristiques clés suivantes, ce qui en fait l'un des frameworks les plus puissants du marché :

1. MVC – Le cadre est construit sur le célèbre concept de MVC (Modèle-Vue-Contrôleur). Il s'agit d'un modèle de conception utilisé dans toutes les applications Web modernes. Ce modèle est basé sur la division de la couche de logique métier, de la couche de données et de la couche de présentation en sections distinctes. La division en différentes sections est faite pour que chacune puisse être gérée plus facilement.
2. Liaison du modèle de données – Il n’est pas nécessaire d’écrire de code spécifique pour lier des données aux contrôles HTML. AngularJS peut s’en charger en ajoutant simplement quelques extraits de code.
3. Écrire moins de code – Lors de la manipulation du DOM, beaucoup de Javascénario Auparavant, il fallait écrire du code pour concevoir n'importe quelle application. Mais avec AngularJS, vous serez surpris par la quantité réduite de code nécessaire pour manipuler le DOM.
4. Unité Tests Prêts – Les concepteurs de Google Non seulement ils ont développé AngularJS, mais ils ont également développé un framework de test appelé « Karma » qui aide à concevoir des tests unitaires pour les applications AngularJS.
5. Directives – Des marqueurs tels que ng-app, ng-model et ng-repeat Ajouter un comportement aux éléments HTML ordinaires.

Ces fonctionnalités sont plus faciles à comprendre une fois que vous les avez utilisées ; la section suivante consiste donc à créer une page fonctionnelle à partir de zéro.

Comment configurer AngularJS et créer votre première application

Lire des informations sur la liaison de données est une chose, la voir en action en est une autre. AngularJS ne nécessite ni gestionnaire de paquets, ni outil de regroupement, ni compilateur ; votre première application se résume donc à un simple fichier HTML exécuté directement depuis votre disque dur.

Étape 1) Ajouter la bibliothèque AngularJS

Chargez la bibliothèque depuis un CDN avec une seule balise script. La version 1.8.3 étant la version finale d'AngularJS, utilisez cette version précise plutôt qu'une version flottante.

Étape 2) Marquez la racine de l'application avec ng-app

La directive ng-app indique au compilateur AngularJS quelle partie de la page il contrôle. Placée sur la balise html, elle transmet l'intégralité du document au framework, et la valeur que vous lui attribuez nomme le module que vous allez créer.

Étape 3) Lier les données avec ng-model et une expression

La directive ng-model lie un élément d'entrée à une propriété du scope, et une expression entre doubles accolades affiche cette même propriété ailleurs sur la page. Comme la liaison est bidirectionnelle,ping La boîte met à jour l'en-tête immédiatement, sans gestionnaire d'événements personnalisé.

Étape 4) Ajouter un contrôleur pour la logique

Un contrôleur est un simple JavaFonction de script qui reçoit l'objet $scope et lui attribue des valeurs initiales. Son enregistrement dans le module la rend accessible à la directive ng-controller.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Étape 5) Exécutez la page et vérifiez le résultat

Enregistrez le fichier sous le nom index.html et ouvrez-le dans n'importe quel navigateur. L'en-tête affiche initialement « Hello World ! » et se modifie automatiquement à chaque frappe au clavier. Aucun serveur web ni aucune étape de compilation ne sont nécessaires.

Si rien ne s'affiche, ouvrez la console du navigateur et vérifiez que le script CDN est bien chargé et que le nom du module dans ng-app correspond exactement à celui passé à angular.module, car une incohérence entraînera une erreur silencieuse. Cette petite page illustre déjà les points forts décrits ci-après.

Avantages d'AngularJS

Voici les avantages d’AngularJS :

• Comme il s'agit d'un framework open source, vous pouvez vous attendre à ce que le nombre d'erreurs ou de problèmes soit minimal.
• Liaison bidirectionnelle – AngularJS synchronise les données et la couche de présentation. Vous n'avez pas besoin d'écrire de code supplémentaire. JavaUtilisez un script pour synchroniser les données de votre code HTML et de votre couche de données. AngularJS s'en charge automatiquement. Il vous suffit de spécifier quel contrôle est lié à quelle partie de votre modèle.
• Gestion du routage – AngularJS gère le routage, c'est-à-dire le passage d'une vue à une autre. Il s'agit d'un principe fondamental des applications monopages : vous pouvez accéder à différentes fonctionnalités de votre application web en fonction des interactions de l'utilisateur, tout en restant sur la même page.
• AngularJS prend en charge les tests, à la fois Tests unitaires et Test d'intégration.
• Il étend le HTML en fournissant ses propres éléments appelés directives. Concrètement, les directives sont des marqueurs sur un élément DOM (tels qu'un attribut, un nom d'élément, un commentaire ou une classe CSS) qui indiquent au compilateur HTML d'AngularJS d'associer un comportement spécifique à cet élément DOM. Ces directives permettent d'étendre les fonctionnalités des éléments HTML existants et d'offrir ainsi plus de puissance à votre application web.

Avantages d'AngularJS

Un point de vue équilibré est tout aussi important, c'est pourquoi les compromis sont exposés ci-après.

Inconvénients et limitations d'AngularJS

Chaque framework a ses compromis, et AngularJS ne fait pas exception. Voici les limitations les plus fréquemment signalées par les équipes qui maintiennent des applications AngularJS :

• Aucune couche de sécurité propre – AngularJS ne fournit ni authentification ni autorisation ; les deux doivent donc être mises en œuvre côté serveur.
• Dépendance totale à Javascénario – Si un visiteur désactive JavaEn cas de script, la page revient à un balisage minimal et ne s'affiche pas.
• performance du cycle de digestion – Les modifications sont détectées en comparant de manière répétée les valeurs surveillées, ce qui peut rendre les pages comportant plusieurs milliers de liaisons lentes.
• Une courbe d'apprentissage abrupte – Les champs d’application, les directives, les usines, les services et les fournisseurs se chevauchent, et il existe souvent plusieurs façons d’obtenir le même résultat.
• Visibilité des moteurs de recherche – Les vues sont assemblées dans le navigateur, un travail supplémentaire tel que le pré-rendu est donc nécessaire avant que les robots d'exploration puissent indexer les pages de manière fiable.
• Aucune autre mise à jour – Depuis le 31 décembre 2021, aucun correctif officiel n'existe ; une vulnérabilité nouvellement découverte reste donc non corrigée à moins qu'un fournisseur commercial ne fournisse un correctif.

Ce dernier point pousse la plupart des équipes vers le framework successeur, qui est un produit différent malgré le nom identique.

AngularJS vs Angular : quelle est la différence ?

AngularJS et Angular sont souvent confondus en raison de la grande similarité de leurs noms, mais il s'agit de frameworks distincts, utilisant des langages, des architectures et des versions de développement différentes. AngularJS désigne uniquement la série 1.x décrite sur cette page. Angular désigne la version 2 et toutes les versions suivantes, une réécriture complète sortie en 2016 et toujours activement développée. Code ne se déplace pas entre eux sans un travail de migration délibéré.

Concrètement, il est impossible d'intégrer un contrôleur AngularJS directement dans un projet Angular. La migration implique de réécrire chaque contrôleur en tant que composant ; il faut donc la considérer comme un véritable travail d'ingénierie plutôt que comme une simple mise à niveau. En résumé, AngularJS est à privilégier comme compétence de maintenance, tandis qu'Angular est la plateforme de développement.

FAQ