• News

The Depths Of AngularJS's Watches

9.1KShares
314.8KViews

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.

  • Political Opinion Analysis - Understanding Public Sentiment Using Programming Languages

    News

    Political Opinion Analysis - Understanding Public Sentiment Using Programming Languages

    Discover the Power of Political Opinion Analysis with Programming Languages: Learn how Python and R can help shape public discourse, inform policy decisions, and forecast election outcomes. Explore the applications and limitations of political opinion analysis, and delve into the ethical considerations that researchers need to keep in mind. Unlock the potential of political opinion analysis and stay ahead in the world of politics with programming languages.

  • 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 Importance Of Web Development In Digital Marketing

    News

    The Importance Of Web Development In Digital Marketing

    This article explains the web development process and the role of web design in creating an effective website optimized for SEO and user experience. It also discusses the essential elements of e-commerce web development and how to choose the right web development framework.

  • 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

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

  • Famous Celebrities Who Learn To Code

  • Continuous Integration For Laravel With Jenkins And Git

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