To bind our data to the HTML page, Angular gives the ability to use {{}} known as double curly brackets or ng-bind.Both ways are performing the same functionality.

Eagle thinking image to learn more


{{}}


Example:-      Double Curly brackets in Angular JS

name is JS object or some variable we are referring to.
It makes your template very readable i.e Anyone going through a code such as {{ name }} can easily understand that “name”  is a variable bounded to the DOM.

Drawbacks of {{}}

Sometimes when we  load our application in the browser , we can notice flashing content for some milliseconds before {{ name }} is resolved and data is loaded.
flashing-content
Flashing content
This happens because the template is loaded before AngularJS had a chance to go in and compile the elements. To resolve this issue, you can use ng-cloak directive.

ng-bind is used inside an HTML DOM element:


Example:-
ng-bind

We are using the same expression which we used for double curly brackets.

The major difference between ng-bind and {{}} is that ng-bind creates a watcher for variable passed to it(i.e. name as in above example), while curly brackets({{}}) will (store the entire expression in memory i.e. }perform dirty-checking and refreshing the expression in every digest cycle even if it is not required.

ng-bind will only apply when the value passed is changing actually.
In the first approach(i.e. {{}}), AngularJS evaluates the expression then replaces it with some value which sometime be left with the flashing double curly brackets but ng-bind saves this time by informing AngularJS to put the contents of the expression within the element itself.
Note:-

  • {{}} sometimes cause performance issue if we have thousand of bindings in our page.In these scenario’s, we should go with ng-bind.
  • For some modules, like translate module is implemented  or having binding which are not going to change , make the practice to use :: (double colon) before our binding. Example


Leave a Reply

Your email address will not be published. Required fields are marked *