• News

The Depths Of AngularJS's Watches

5.9KShares
206KViews

When you want to watch for changes in AngularJS, it is fairly kind to you by default. The kindness comes from trying to optimize performance for you. This is because each watch expressions will run at least once during each $digest loop. I'll not go into when the $digest loop executes and why, and I'll also use watches in controllers in my examples which you should never do, but that's a whole other discussion.

Watch In Its Simplest Form

Here is an example of the most basic watch expressions available, using $watch. It does something you probably would never do in a real world application. It will watch for value changes on $scope.name and reassign this value to $scope.nameAgain.

A Little Deeper

Now let's take a look at an example that will not work. We have our $scope.people and the ability to push new objects to it. But when pushing a new person to the array, the number of people is not updated correctly even though we have a watch on people.

COPYRIGHT_CSWAG: Published on https://codingswag.com/angularjs-watches/ by - on 2022-04-13T16:31:42.702Z

So why is that? It's because AngularJS's watch method is designed for speed. Therefore it won't work on a collection. If we want to watch for changes in a collection when manipulating it we need to use $watchCollection, which is designed for this.

And Down Into The Rabbit Hole

Let's add a function for incrementing number of clicks to each person. Why you would need that I have no idea of, but we need some kind of example right? We'll add a clicks property to each person that increments on a button click, and then a counter for all clicks. We'll use $watchCollection and see what happens.

We can increment clicks for each person, but we can't get the counter for total clicks to work. That is because once again the collection watch is built for performance, and it won't watch for property changes inside the collection.

For watching on property changes within a collection we need to go back to using $watch again. But this time we will pass true as a third parameter to it. That is $watch('collection', function() {}, true).

Success! Our total counter works. We're now using the slowest version of watch, in this extremely simple example it won't matter anything though.

To Summarize

When we want to watch for property value changes, whether it's a simple scope property or a property on a collection, we use $watch. Just note the implementation is different for the two use cases.

When we want to watch for manipulation of collections, when adding or removing items for example, we use $watchCollection.

There is one special case for using a regular $watch when watching for manipulation of a collection. It won't be very useful in a lot of application, but it's worth mentioning. That is when you reassign a collection, then a simple watch for the collection variable works. Take a look at this (shitty) code:

Here we're pushing all objects into a new collection and then reassigning the old collection to the new one. And as you can see, a regular watch expression works fine there.

Share: Twitter | Facebook | Linkedin

Recent Articles

  • Best Streaming Services For 2023 That You Should Check Out

    News

    Best Streaming Services For 2023 That You Should Check Out

    Our best recommendations for both on-demand and live streaming services are included in our ranking of the best streaming services for 2023. We've evaluated market leaders like Netflix and Hulu as well as services with a more specialized focus, such as anime streaming portal Crunchyroll and sports-focused fuboTV.

  • Top Travel Apps To Find You Next Destination

    News

    Top Travel Apps To Find You Next Destination

    How do you choose your travel destination? How do you navigate a new location once you are there? All of these queries are answered by the top travel apps.

  • New Social Media Platforms And Apps That Are Changing The Game

    News

    New Social Media Platforms And Apps That Are Changing The Game

    There are always new social media platforms and apps coming out. Check out this article to learn about new marketing trends and important apps.

  • Famous Celebrities Who Learn To Code

    News

    Famous Celebrities Who Learn To Code

    Of course, the typical middle or high school kid might not find those careers appealing. However, the truth is that learning to code can set you on a rewarding career path. In fact, a lot famous celebrities who learn to code have mastered coding, and the combined star power of the business may help make it more appealing.

  • Continuous Integration For Laravel With Jenkins And Git

    News

    Continuous Integration For Laravel With Jenkins And Git

    This will be a hands on guide for setting up automated builds for Laravel using Jenkins. Pretty much that when you do a commit, Jenkins will automagically make a build and in that check code errors and syntax, run unit tests and provide visual code coverage for your code base. Along with other goodies. Jenkins is an open source continuous integration server that has gotten a lot of attention recently as the #1 open source continuous integration server. Mostly because its vast amount of plugins, which currently is 600+ as I’m writing this. We’re going to use 10 of those to automate our test environment.

  • Best Political Campaign Software - How Do Politicians Do Modern Campaigns?

    News

    Best Political Campaign Software - How Do Politicians Do Modern Campaigns?

    The best political campaign software for involving contributors, voters, and supporters is discussed in this article. Additionally, you will learn about the software's capabilities and its main features and pricing options in depth.

  • Cyclomatic And NPath Complexity Explained

    News

    Cyclomatic And NPath Complexity Explained

    Cyclomatic And NPath Complexity Explained

  • Best Shopping Apps For Saving Time While Shopping At Home

    News

    Best Shopping Apps For Saving Time While Shopping At Home

    We've compiled a list of the top shopping apps in this article to help you get the best prices, find the ideal goods and services, and save time. If you work as a marketer for companies in these sectors, think about collaborating with these applications to increase brand recognition and customer loyalty.

  • The Top Android NSFW Apps - Unleash Your Sins In Your Phone With The Next Apps

    News

    The Top Android NSFW Apps - Unleash Your Sins In Your Phone With The Next Apps

    No one is the wiser these days because you can stream and download all the HD porn you want for free. You probably came across this page while searching for the top Android NSFW apps because technology has made it simpler than ever to Netflix and unwind.

  • The Top Major Crypto-currency Exchanges In Nigeria - Be Free With Cryptos In Nigeria

  • Top Websites To Buy Jewelry Online For Fashion Fans

  • Computer Science Trends - Build An IT Career Studying These Trends

  • Most Interesting Technological Trends - The 2030 Technology

  • All About Git Pretty Stats