Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does double colon before expression variable do in angular js?

Tags:

angularjs

In angularjs, what is a double colon :: before an expression variable, and what is the difference between {{ firstName }} and {{ ::firstName }}?

like image 645
Rajeev Jayaswal Avatar asked Feb 13 '16 19:02

Rajeev Jayaswal


People also ask

What does double colon mean in Angularjs?

With the new one-time binding syntax, we introduce a double-colon before our value: <h1>{{ ::title }}</h1> Angular processes the DOM as usual and once the value has been resolved it removes the particular property from its internal $$watchers list.

What is a colon in TypeScript?

Variable Declaration in TypeScriptThe type syntax for declaring a variable in TypeScript is to include a colon (:) after the variable name, followed by its type. Just as in JavaScript, we use the var keyword to declare a variable.


1 Answers

Taken from: https://www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135

It reads:

One-time binding syntax {{ ::value }}

AngularJS dropped a really interesting feature recently in the beta version of 1.3.0: the ability to render data once and let it persist without being affected by future Model updates. This is fantastic news for developers highly concerned with performance! Before this update, we’d typically render a value in the DOM like so:

 <h1>{{ title }}</h1>

With the new one-time binding syntax, we introduce a double-colon before our value:

 <h1>{{ ::title }}</h1>

Angular processes the DOM as usual and once the value has been resolved it removes the particular property from its internal $$watchers list. What does this mean for performance? A lot! This is a fantastic addition to helping us fine tune our applications.

It’s known that Angular becomes slower with around 2,000 bindings due to the process behind dirty-checking. The less we can add to this limit the better, as bindings can add up without us really noticing it!

Using the single binding syntax is easy and most importantly fast. The syntax is clear and concise, and a real benefit to lowering the $$watcher overhead. The less work Angular has to do, the more responsive our applications will become.

like image 102
pczeus Avatar answered Dec 07 '22 19:12

pczeus