Serie AngularJS: Usando o $watch – Parte 14
No artigo de hoje vamos ver como usar o $watch no angular.
Olá, pessoal!
No artigo de hoje vamos ver como usar o $watch no angular↳Angular30 conteúdosCriando Micro Frontends Angular com Native FederationDev (Back & Front) · mar 2026Angular v21 e o Fim da Cobertura de Testes Exclusivamente em TypeScript: Por Que Precisamos Repensar os Testes de ComponentesDev (Back & Front) · jan 2026Angular 8 é lançado com builder APIs e suporte web workerDev (Back & Front) · mai 2019Ver tudo em Dev (Back & Front) →. Mas pra que serve? Bem, se você já trabalhou com JSF ou JavaScript puro, certamente algum dia teve que implementar em algum elemento alguma ação após alteração de um campo. Por exemplo, após digitar o usuário, digitar o e-mail e senha habilitamos o botão login. É isso que vamos ver com o $watch. Ele faz sync com um elemento.
Para esse exemplo, vamos usar o projeto recipeangularexample, que já estamos usando nos últimos artigos. Portanto vou considerar que você tem a estrutura do projeto conforme estamos evoluindo desde o último artigo. Se você baixar a versão do GitHub terá o projeto completo com tudo que veremos na série.
Development
A implementação é bem simples, vejamos:
Alterando recipeController.js
var recipeController = function ($scope){
$scope.name="";
//é aqui que está mágica
$scope.$watch("name",function(newValue,oldValue){
if($scope.name.length > 0){
$scope.greeting = "Greeting " + $scope.name;
}
});
};
Alterando o arquivo watch.html
<body>
<div>
<input type="text" ng-model="name">
<p>{{greeting}}
</div>
</body>
Resultado:
Simples, não?
Abraços!







