After creating a basic TODO app using AngularJS, I discovered some interesting features.
https://i.sstatic.net/QHfdy.png
The app allows me to manage my list of tasks, such as deleting, marking as completed, and adding new ones.
A unique functionality is the ability to edit the task title by double-clicking on the bold text, triggering a text input field to appear:
https://i.sstatic.net/cAsGD.png
In each row under the ng-repeat directive, there's an invisible input element that switches its visibility based on certain conditions:
<li ng-repeat="todo in vm.todos....." ...>
<div ng-hide="vm.isTheEdited(todo)"> //this is "read" mode
....show checkbox + Label + Delete button
</div>
<input ... show="vm.isTheEdited(todo)".... /> // this is the "edit" mode
</li>
Everything seems fine with these functionalities.
However, I came across a code snippet that counts watchers in an AngularJS app. Intrigued, I decided to enhance it to display unique items in a string format.
(I simply added):
Array.prototype.unique = function(a){
return function(){ return this.filter(a) }
}(function(a,b,c){ return c.indexOf(a,b+1) < 0 })
console.log(getWatchers().unique().length);
console.log(getWatchers().unique().map(function (a){return a.exp;}));
)*
Focusing on duplicates,
I noticed numerous duplicated watchers in the app. This led me to question why the duplicates exist and how I can reduce their number while eliminating them entirely.
Take a look at the results below:
https://i.sstatic.net/i2tc4.png
Question: What causes the high number of duplicate entries in the watchers, and what steps can be taken to decrease and prevent duplication?
The situation arose from utilizing ng-show and hide based on specific function values within the app.