Présentation de l'architecture AngularJS

AngularJS est un cadre conçu pour étendre les capacités de HTML d'un langage statique simple à un langage intuitif plus dynamique côté client. AngularJS est 100% JavaScript. Il permet d'écrire un code côté client plus géré. Cela donne au développeur plus de contrôle de code et de pouvoirs de manipulation des données côté client lui-même. Pour y parvenir, AngularJS a mis en place un modèle de conception approprié. C'est ce qu'on appelle un modèle MVC. Voyons-en plus à ce sujet dans la section suivante. Dans cette rubrique, nous allons découvrir l'architecture AngularJS .

L'architecture

AngularJS est construit sur le modèle de conception MVC. Les principes derrière l'architecture MVC sont très bien incorporés dans AngularJS. On aurait pu savoir que MVC était une architecture robuste pour de nombreux langages côté serveur. AngularJS a également fusionné le modèle MVC côté client.

MVC - Modèle, vue, contrôleur

Le modèle MVC signifie le modèle Model View Controller.

  • Modèle

C'est le niveau le plus bas de l'architecture. Il est responsable de la conservation et de la maintenance des données d'application. Les données sont conservées tout au long du cycle de vie de la page et parfois même entre les pages. Le modèle se met à jour en fonction des instructions reçues du contrôleur.

  • Vue

Une vue est la face avant de l'application. Il s'agit de la couche de présentation de l'architecture chargée d'afficher les données à l'utilisateur. Il contient le code complet des pages de l'interface utilisateur dans n'importe quelle langue compatible avec les navigateurs, généralement HTML. La vue est déclenchée par son contrôleur respectif. Une vue envoie des demandes à son contrôleur en fonction de l'interaction de l'utilisateur avec l'application. Le contrôleur régénère ensuite la vue en fonction de la réponse reçue du serveur.

  • Manette

Un contrôleur est le cerveau de traitement derrière la vue et le modèle. Il prend les décisions de générer, régénérer ou détruire la vue et le modèle. Toutes les opérations commerciales et les logiques de code sont écrites à l'intérieur du contrôleur. (Certains développeurs préfèrent écrire la logique métier dans le modèle lui-même). Le contrôleur est également responsable de l'envoi des demandes au serveur et de la réception d'une réponse. Il met ensuite à jour la vue et le modèle en fonction de la réponse. Bref, le contrôleur contrôle tout.

L'architecture MVC peut être représentée graphiquement à travers l'image ci-dessous.

MVC est robuste car il est basé sur le principe de développement logiciel de séparation des préoccupations. Il existe plusieurs contrôleurs qui exploitent des ensembles de données spécifiques et gèrent les vues et les modèles respectifs. La logique d'application est ainsi séparée de la couche d'interface utilisateur.

MVC dans AngularJS

C'était tout sur MVC et ses principes. Comment ces principes sont-ils mis en œuvre dans AngularJS? Comprenons-nous.

  • Portée - La portée est le modèle qui contient les données d'application. Les variables d'étendue sont attachées au DOM et les propriétés des variables sont accessibles via des liaisons.
  • HTML avec liaison de données - La vue dans AngularJS n'est pas du HTML standard. Il s'agit d'un HTML lié aux données. La liaison de données permet de restituer des données dynamiques dans des balises HTML. De cette façon, le modèle met régulièrement à jour le DOM.
  • ngController - La directive ngController est responsable de la collaboration entre le modèle, la vue et la logique métier. La classe de contrôleur spécifiée par la directive ngController contrôle la portée et la vue.

Aperçu conceptuel

D'accord, nous comprenons maintenant que AngularJS est construit sur l'architecture MVC. Est-ce tout? N'y a-t-il rien d'autre à jouer? Bien sûr que oui.

Il y a quelques concepts importants que l'on doit comprendre afin de comprendre le comportement des applications AngularJS. Comprenons-les.

  • Modèles

Les modèles sont les éléments HTML ainsi que les éléments et attributs spécifiques à AngularJS. La dynamicité dans les applications AngularJS est obtenue en combinant le modèle avec les données du modèle et du contrôleur.

  • Directives

Les directives sont des attributs ou des éléments qui représentent un composant DOM réutilisable. Les directives manipulent directement le DOM HTML sous-jacent pour rendre la vue dynamique. Cela évite au développeur de s'inquiéter des éléments et attributs HTML natifs.

  • Liaison de données bidirectionnelle

AngularJS synchronise automatiquement les données entre le modèle et la vue via la liaison de données. Le modèle est considéré comme une source unique de vérité pour vos données d'application. La vue est une projection du modèle à tout moment. Dès que le modèle change, la vue change et vice versa. Ceci est appelé liaison bidirectionnelle. Il est obtenu grâce à la compilation en direct du modèle sur le navigateur.

  • Acheminement

Les applications AngularJS étant des applications à page unique (SPA), une grande attention est accordée au routage entre les pages. AngularJS possède un mécanisme de routage robuste qui fait la correspondance d'URL à partir de la liste des routes spécifiées dans le routeur associé au composant. Cela signifie que chaque fois qu'un navigateur demande une URL, un composant enfant associé est rendu plutôt qu'une page entière.

  • Prestations de service

Un contrôleur est couplé à une vue. Cela signifie que c'est une bonne pratique d'écrire uniquement ce code à l'intérieur du contrôleur qui est logiquement utile pour sa vue. La logique indépendante de la vue peut être déplacée ailleurs afin de pouvoir être réutilisée par d'autres contrôleurs également.

Voici venir les Services en action. Les services séparent la logique métier réutilisable de la logique spécifique à la vue. La logique spécifique à la vue réside alors à l'intérieur des contrôleurs spécifiques tandis que la logique métier commune est partagée par tous les contrôleurs.

En règle générale, le code d'accès aux données du backend est également écrit dans les services.

  • Injection de dépendance

Maintenant que nous avons déplacé les logiques indépendantes de la vue vers un emplacement partagé, comment contrôlons-nous les autorisations d'accès aux services partagés? Cela se fait via l'injection de dépendance (DI). L'injection de dépendance est un modèle de conception de logiciel qui traite de la façon dont les objets sont créés et de la manière dont ils maîtrisent leurs dépendances. Tout dans AngularJS, des directives aux contrôleurs en passant par les services et à peu près tout, est câblé via DI.

Fait amusant de l'architecture AngularJS

AngularJS a été nommé AngularJS en raison des crochets angulaires dans les balises HTML. Le projet a été conçu pour rendre HTML plus dynamique et plus convivial pour les données, et les développeurs ont donc décidé de le nommer d'après les crochets angulaires en HTML.

Conclusion - AngularJS Architecture

L'article couvre tous les concepts importants de l'architecture AngularJS. C'est une bonne longueur d'avance pour comprendre le fonctionnement de divers éléments de votre application AngularJS. L'étape suivante consiste à créer une application AngularJS multi-contrôleur entièrement fonctionnelle qui récupère également les données du backend. Cela vous donnerait une bonne pratique pratique sur les concepts d'AngularJS.

Articles recommandés

Ceci est un guide de l'architecture AngularJS. Ici, nous discutons de l'architecture, MVC dans angularjs et Conceptual Overview. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus -

  1. Carrière à AngularJS
  2. Questions d'entretiens chez AngularJS
  3. Qu'est-ce que Backbone.js?
  4. Logiciel d'exploration de données

Catégorie:

Développement de logiciels