Maison >interface Web >js tutoriel >Comment la syntaxe « contrôleur en tant que » dans AngularJS améliore-t-elle l'organisation et la lisibilité du code ?

Comment la syntaxe « contrôleur en tant que » dans AngularJS améliore-t-elle l'organisation et la lisibilité du code ?

Susan Sarandon
Susan Sarandonoriginal
2024-10-27 00:36:30430parcourir

How Does the

Syntaxe "controller as" d'AngularJs : clarification et explication

AngularJS a introduit une nouvelle syntaxe appelée "controller as", qui vise à simplifier et à améliorer l'organisation des contrôleurs.

Explication

La syntaxe "contrôleur en tant que" vous permet d'instancier un contrôleur et de lui attribuer un alias personnalisé dans la portée. Par exemple :

InvoiceController as invoice

Cela signifie qu'Angular créera une instance d'InvoiceController et la stockera dans la variable de facture dans la portée actuelle.

Avantages :

  1. Code du contrôleur plus propre : En utilisant « contrôleur en tant que », vous pouvez éliminer le paramètre $scope dans votre contrôleur, ce qui peut conduire à un code plus concis et lisible.
  2. Référencement explicite de propriété : L'alias que vous spécifiez (par exemple, une facture) indique clairement l'origine d'une propriété spécifique, améliorant ainsi la clarté du code.
  3. Propriétés couvertes : Les propriétés attribuées à l'instance du contrôleur sont limitées au contrôleur lui-même, tandis que celles attribuées à $scope sont disponibles dans toute la hiérarchie.
  4. Simplification des règles de point : En utilisant l'alias (par exemple, facture ), vous pouvez éviter les problèmes potentiels avec la « règle des points », qui restreint l'accès aux propriétés dans les hiérarchies de contrôleurs.

Exemple

Auparavant, pour lier un modèle à une entrée, vous deviez utilisez :

<input type="number" ng-model="qty" />

Et dans le contrôleur :

....controller('InvoiceController', function($scope) {
   // do something with $scope.qty
})

Avec "contrôleur en tant que", vous utiliseriez plutôt :

<input type="number" ng-model="invoice.qty" />

Et dans le contrôleur :

....controller('InvoiceController', function() {
       // do something with this.qty
})

Objectif de la syntaxe

L'objectif principal de "contrôleur en tant que" est d'améliorer la lisibilité et l'organisation du code en :

  • Suppression du paramètre $scope à partir des contrôleurs.
  • Indiquant clairement la source des propriétés dans la vue.
  • Faciliter la gestion des propriétés dans les hiérarchies de contrôleurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn