Comprendre la portée dans AngularJS

Quand on travaille avec AngularJS et nous commençons à lire la documentation, la première chose que nous voyons est le mot PortéeCela pourrait être traduit en espagnol comme un champ d'application, mais l'utilisation dans ce cadre est beaucoup plus large.

C'est pourquoi nous devons comprendre que c'est vraiment le Portée et comment il se comporte dans nos applications, de cette façon nous pouvons faire un saut entre essayer d'utiliser AngularJS et l'utiliser avec base, conviction et pas seulement en répétant du code.

La chose la plus intéressante est que comme AngularJS est complètement intégré JavaScript, nous pouvons prendre les concepts du langage et les appliquer dans l'étude et la compréhension des outils du framework, nous donnant ainsi un niveau supplémentaire de compétences pour pouvoir développer la logique que nous pensons pour nos applications

Exigences

1- Pour réaliser ce tutoriel, nous avons besoin d'un serveur Web comme Wamp, ou si nous sommes dans des environnements comme Linux une configuration Lampe Cela nous suffira, l'idée est de pouvoir servir nos fichiers qui intègrent AngularJS et pas seulement ouvrir un document HTML.

2- Nous devons également avoir un éditeur de texte riche qui nous permet d'écrire le code nécessaire pour nos exemples, cela peut être Texte sublime ou alors Bloc-notes ++.

3- Enfin, il faut avoir accès à Internet pour utiliser l'inclusion d'AngularJS via son CDN ou avoir téléchargé le fichier qui contient le framework pour le servir localement.

Quelle est la portée?

Ce n'est rien de plus qu'un simple objet JavaScript qui a la capacité de stocker une structure de valeur clé, en plus de pouvoir stocker des propriétés. Cela nous aide beaucoup car si nous le voyons de ce point de vue, nous pouvons appliquer les concepts de base du langage de programmation

Comment ça marche?AngularJS est responsable de la création automatique de cet objet et de son intégration dans l'exécution de notre application, d'où son nom est scope, car il nous permet de manipuler et d'accéder aux valeurs des modèles et sert également d'interface pour communiquer avec la vue. Cette structure est ce qui nous permet d'utiliser les Portée à l'intérieur de nos contrôleurs et ajouter des propriétés, que nous pouvons appeler directement dans la vue, et ainsi nous remplissons un cycle où tout est connecté et lié au sein de notre application.

Dans l'image suivante, nous voyons à quoi ressemble l'échelle ou la manière dont AngularJS génère différents Portées, bien que tous dérivent de Portée de l'élément qui les contient à l'exception du Étendue racine qui est le premier à être généré. Bien sûr, s'il y a deux éléments au même niveau dans la portée racine, ils en hériteront tous les deux.

AGRANDIR

Comment fonctionne le prototype ?

Contrairement aux langues comme Java, C++ et autres, JavaScript traite le concept d'héritage différemment, c'est pourquoi nous devons apprendre à quoi sert prototype qui n'est rien de plus qu'une méthode qui existe dans les constructeurs de classe qui nous permet d'ajouter de nouvelles propriétés dans notre code.

Ceci malgré le fait que c'est quelque chose de typique de JavaScript permet de comprendre un peu plus comment on peut obtenir certains résultats, en plus de nous aider à comprendre comment le Portée dans AngularJS.

Dans l'exemple suivant, nous verrons comment créer une classe avec des propriétés ou des attributs particuliers, puis à travers prototype Nous pouvons ajouter une propriété supplémentaire à notre classe et ainsi en créant l'instance, nous pouvons y accéder.

La chose intéressante est qu'il existe une méthode qui nous aide à vérifier si un attribut est typique de la classe, si cette méthode renvoie une valeur fausse alors nous saurons qu'il s'agit d'un attribut résultant d'un héritage avec prototype. Voyons le code qui représente tout cela :

 Document 

Voyons maintenant comment sur la console JavaScript nous obtenons les résultats que nous recherchons :

On remarque alors comment la méthode hasOWNProperty Cela nous aide à identifier les attributs ou propriétés d'origine de la classe ou non. Ainsi, nous pouvons comprendre si nous avons créé ou non un héritage efficace, car nous pouvons réaliser comment nous étendons la capacité d'attribut d'une classe.

ImportantCe type d'héritage par prototype c'est ce qui s'applique AngularJS lors de la création des différents Portées d'un document dans une application, où il se déplace dans l'arborescence SOLEIL où identifie en premier si la propriété existe ng-app, à ce moment-là croire $ rootScope, puis trouver un contrôleur crée une variable $ portée qui découle de l'application de la méthode $ rootScope.new().
Et ainsi il s'intensifie au fur et à mesure qu'il trouve des éléments internes les uns dans les autres, héritant de la structure immédiatement précédente, prenant ses fonctionnalités dérivées de $ rootScope et ses propres fonctionnalités.

Dans l'exemple suivant, nous avons développé une application dans laquelle nous avons deux contrôleurs, de cette manière, nous voyons comment à travers l'héritage de portée les différentes propriétés ou attributs de celui-ci sont hérités, jusqu'à ce qu'il en résulte une structure imbriquée qui peut accéder aux propriétés des parents et étendre les fonctionnalités de l'application en tant que telle. Voyons le code :

 {{editors}} a des livres de : {{category}}
Les livres les plus populaires de {{editors}} sont :

 {{livre}}

Ici, l'exemple nous montre ce que nous avons expliqué ci-dessus, dans le cadre de la Deuxième contrôleur Nous appelons la propriété editors et lorsque nous l'imprimons, nous voyons qu'elle porte la valeur attribuée à l'élément parent Premier contrôleur. Enfin, nous ajoutons un attribut ou des livres de propriétés qui n'étaient pas dans le Portée root et nous avons pu parcourir le $ portée du contrôleur en question. Un autre aspect intéressant est que les propriétés du Portée root, bien qu'ils existent, nous ne les avons pas invoqués dans une portée dans laquelle nous pouvons y accéder, donc lorsque nous verrons l'exemple, nous ne les verrons pas sur l'écran du navigateur

Cela peut paraître un peu tiré par les cheveux, mais c'est le meilleur moyen de comprendre comment la variable $ portée fonctionne au sein de nos applications et ainsi pouvoir l'appliquer dans notre logique pour tirer le meilleur parti des outils du framework. Voyons dans l'image suivante à quoi ressemble notre application précédente et comment les points expliqués ont été remplis :

On remarque alors comment la liste des livres appartient à l'objet Portée plus interne, cependant, comme nous ne définissons pas l'attribut éditorial, nous pouvons utiliser celui que nous définissons dans le contrôleur parent, en concluant que nous avons anticipé l'utilisation de prototype de la part de AngulaJS.

L'observateur comme concept avancé

Il y a des moments où l'on veut continuer et en quelque sorte surveiller une situation particulière, c'est là qu'intervient l'objet. $ regarder, ce qui nous permet de faire exactement ce que nous expliquons.

Comment ça marche?En l'ajoutant comme auditeur d'un élément au sein de notre application, cet objet s'enregistrera à chaque fois qu'il y aura un changement. De cette façon, nous pouvons appliquer des conditions à chaque fois qu'un événement que nous déterminons se produit. Un exemple pourrait être lorsque nous construisons un panier, si l'utilisateur ajoute plus d'un article, nous pouvons afficher un message, ou s'il essaie d'acheter plusieurs fois, nous lui demandons s'il a un problème.

À première vue, cela peut sembler quelque chose de très avancé, mais AngularJS le prend près de nos mains, sans faire beaucoup de complication. L'object $ regarder Non seulement il peut observer une valeur précise, on peut aussi lui affecter pour le faire avec une collection, ce qui nous donne la possibilité de prendre en considération plusieurs valeurs en même temps, et ainsi d'obtenir des résultats plus complexes qu'avec la forme précédente .

Avec cela, nous avons terminé avec ce tutoriel, nous avons appris à comprendre ce que le Portée dans AngularJS et pour cela nous nous sommes appuyés sur les concepts les plus abstraits de JavaScript, démontrant ainsi que ce langage nous donne tous les outils pour réaliser des travaux aussi avancés que le même framework dont nous parlons, mais que si nous maîtrisons ses concepts, nous pouvons faire des outils que nous utilisons quelque chose de supérieur.

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif