• News

The Depths Of AngularJS's Watches

8.3KShares
289.2KViews

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

  • Meet The Richest Tech Billionaires In 2023

    News

    Meet The Richest Tech Billionaires In 2023

    During the stock market's sharp drop, the richest tech billionaires lost a total of close to $500 billion. This is more than the market value of all but seven of the S&P 500 companies.

  • What Is A Dogecoin Faucet?

    News

    What Is A Dogecoin Faucet?

    Dogecoin can be obtained for free using a "doge faucet" that distributes small quantities of doge in exchange for the user performing some action. You are, in essence, trading your time and attention in exchange for the opportunity to earn free Dogecoin.

  • The Role Of Science And Technology In Our Daily Life

    News

    The Role Of Science And Technology In Our Daily Life

    Due to the role that they play in making life easier, faster, and safer, science and technology are essential to our daily lives. Let's examine the role that science and technology play in the modern world.

  • Technology Is Changing News - An Insight View About The Future Of Media

    News

    Technology Is Changing News - An Insight View About The Future Of Media

    The news industry is evolving quickly and technology is changing news. Laptops and pocket PCs have displaced desktops. Numerous brand-new material sources have been developed and connected via the internet.

  • The Role Of Programming In Architecture

    News

    The Role Of Programming In Architecture

    This article explores the role of programming in architecture, highlighting its impact on collaboration, sustainability, personalized spaces, cost efficiency, and innovative design. Discover how programming is revolutionizing the field of architecture and shaping the future of the industry.

  • Kenya Technology - A Hidden Industry

    News

    Kenya Technology - A Hidden Industry

    The northeastern African country of Kenya is a tiny coastal one. Kenya is praised as a top tourist destination for its tea exports, stunning scenery, and abundant biodiversity. Currently, Kenya technology industry is growing quickly.

  • 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

  • Continuous Integration For Laravel With Jenkins And Git

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

  • Cyclomatic And NPath Complexity Explained

  • Best Shopping Apps For Saving Time While Shopping At Home