ng-bind necessary in AngularJS?

[AndresGT1]

I'm learning AngularJS and I just found my first concern.

When building an app you use the ng-app, ng-model and ng-bind, but what's the difference between using ng-bind and not using it?

For example I can build a simple app to show what's being written in my input:

<div ng-app="">

  <p>Name: <input type="text" ng-model="name"></p>

  <p ng-bind="name"></p>

</div>

But if I omit the ng-bind and just call what has being input works the same:

<div ng-app="">

  <p>Name: <input type="text" ng-model="name"></p>

  {{name}}

</div>

So, this are the questions I have when facing this:

Does it works the same if I omit it?

What are best practices?

What's the difference between using bind and not using it?

[tltoulson]

Hi Andres,

The two approaches are nearly the same.   The ng-bind directive and the curly brace notation are both methods of replacing a template with the value of an expression.   There are only a couple, nearly insignificant differences:

1.   ng-bind is more verbose while curly braces are often easier to identify at a glance

2.   ng-bind requires an additional HTML element (the p tag in your example)

3.   Curly braces can occasionally be seen by the end user before angular compiles and runs the first digest loop.   In other words, the user can sometimes see the {{variableName}} in the rendered HTML.   This usually happens on slow loading pages or slow internet connections.   The ng-bind directive does not have this problem, it will be seen as an empty <p> tag to the end user.   Curly braces can achieve similar results using ng-cloak.

My personal recommendation is to use the Curly Braces as your default approach.   It makes for a more readable template.

[Rushit Patel2]

this question is better suited for stackoverflow.

refer to 2nd anwser from below thread

javascript - AngularJS : Why ng-bind is better than {{}} in angular? - Stack Overflow

also.

angularjs - Difference between ng-bind and interpolation {{}} in Angular - Stack Overflow

so basically ng-bind does give you better performance and it has ability to do one time binding in case if you dont expect your data to change after initial load.(:: before your binding)

i hope this helps.

(please mark helpful/like/correct if it helps)