Tout ce que vous devez savoir sur la fonction de la montre Angular JS

Cet article vous fournira une connaissance détaillée et complète de la mise en œuvre de la fonction de surveillance Angular JS.

La Les fonctions de portée JS $ font partie des fonctions principales. Dans cet article, nous aborderons la fonction de surveillance Angular JS dans l'ordre suivant:



Quelle est la fonction de la montre angulaire JS?

La fonction angulaire JS $ watch est utilisée pour observer l'objet scope. La $ watch garde un œil sur la variable et comme la valeur de la variable change le JS $ angulaire ce qui exécute une fonction. Cette fonction prend deux arguments, l'un est la nouvelle valeur et un autre paramètre est l'ancienne valeur.



comment éviter les blocages en java

montre angulaire js

Comment utiliser la fonction de montre angulaire JS?

Prenons un exemple simple de ce que fait exactement la fonction watch dans angular JS. Donc, dans notre programme angular JS, nous avons créé deux fichiers: index.js est responsable du frontend et app.js est responsable de la gestion du backend. Ici, nous créons un programme simple avec un formulaire et ce formulaire a un champ de saisie. Lorsque nous donnons le nom dans le champ d'entrée, le message de sortie nous montre l'ancienne valeur et la nouvelle valeur.



Code HTML

Notre page index.html a une application angulaire avec le nom ngWatchApp et un contrôleur avec le nomwatchController. Ensuite, nous créons un formulaire avec un nom de champ d'entrée et la valeur de ce champ d'entrée que nous imprimons dans la balise h1 et le message s'imprime dans

marque.

Exemple de montre angulaire Entrez votre nom

{{message}}

Code JavaScript

Dans app.js, nous avons créé une application avec le nom ngWatchApp et un contrôleur avec le nomwatchController. Ensuite, nous définissons les deux variables dans la portée avec le nom, le nom et le message et dans la fonction de surveillance, nous passons deux paramètres, l'un est le nom du champ qui est affecté lors du changement et l'autre est la fonction qui a également deux paramètres, nouvelle valeur et ancienne valeur. Enfin, nous ajoutons deux valeurs dans la variable message et que la variable message est affichée sur leindex.htmlpage.



var app = angular.module ('ngWatchApp', []) app.controller ('watchController', function ($ scope) {// ajout de la variable de portée $ scope.name = '' $ scope.message = '' // ajouter watch avec le champ de nom $ scope. $ watch ('name', function (newValue = '', oldValue = '') {$ scope.message = `new valus is $ {newValue} and old value is $ {oldValue}`} )})

Chaque fois que nous regardons une fonction, cette fonction est appelée plusieurs fois en fonction du condensé. Chaque fois que le code s'exécute, AngularJS transmet la référence $ scope actuelle comme premier argument. Non seulement cela signifie que nous pouvons référencer la portée appropriée à partir du corps de la fonction, cela signifie également que nous pouvons regarder toute fonction qui attend une référence $ scope.

C'est ainsi que nous pouvons utiliser la fonction angular js watch () dans les applications pour observer les changements de variable $ scope. Il y a d'autres choses qui fonctionnent avec $ watch, ce sont la fonction $ digest () qui parcourt toutes les montres de l'objet $ scope quand$ digest ()itère sur les montres, il appelle la fonction de valeur pour chaque montre. La$ scope. $ apply ()function prend une fonction comme paramètre qui est exécuté, et après cela$ scope. $ digest ()est appelé en interne.

code de tri de fusion C ++

Avec cela, nous arrivons à la fin de cet article sur la fonction de la montre Angular JS. Si vous souhaitez en savoir plus sur le framework Angular, consultez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous aidera à comprendre Angular en profondeur et vous aidera à maîtriser le sujet.

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de «Angular JS Watch Function» et nous vous répondrons.