I am wondering about the performance impact of the code variations below as complexity scales. Part of the answer to this (those using properties) has already been addressed in AngularJS : Why ng-bind is better than {{}} in angular? but I would like to understand the impact of using functions instead of properties.
It would seem to me that with properties Angular "knows" in a sense when there is a change, while a function is opaque so Angular would not know, and would have to evaluate every time. Yet, according to the other SO question mentioned above, Angular is already evaluating every time with direct templating anyway. So is there really any performance penalty for using a function instead of a property? And what are the pros and cons of each of these?
1 Direct templating with property
<div>Hello, {{user.name}}</div>
2 ng-bind-template with property
<div ng-bind-template="Hello, {{user.name}}"</div>
3 ng-bind with property
<div>Hello, <span ng-bind="user.name"></span></div>
4 Direct templating with function
<div>Hello, {{GetUserName()}}</div>
5 ng-bind-template with function
<div ng-bind-template="Hello, {{GetUserName()}}"</div>
6 ng-bind with function
<div>Hello, <span ng-bind="GetUserName()"></span></div>
3). ng-bind with property
Let's see. The best choice is ng-bind='user.name'
because this directive just will just watch to the assigned variable and update the view, only after it will be changed.
1). Direct templating with property & 2). ng-bind-template with property
These two options will be triggering on the every $digest cycle refreshing. Not necessary ng-bind with expression or just expression, no way to increase speed by checking particular value.
4),5),6)
Theoretically, all these cases will be the same speed which will be much slower than above examples. On every $digest cycle, it will invoke associated function, what makes that even slower than just expression.
It is still interesting on practice to check how much it will reduce speed in numbers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With