Difference between {{}} and ng-bind in AngularJS – User friendly Tech help
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.
n
n
n
{{}}
n
Example:- 
n
name is JS object or some variable we are referring to.
n
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.
n
Drawbacks of {{}}
n
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.
n
 |
| Flashing content |
n
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.
n
ng-bind is used inside an HTML DOM element:
n
Example:-
n
n
We are using the same expression which we used for double curly brackets.
n
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.
n
ng-bind will only apply when the value passed is changing actually.
n
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.
n
Note:-
n
- n
- {{}} 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
n
n
n
