Angularjs:Why Ng-Bind Is Better Than {{}} in Angular

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

If you are not using ng-bind, instead something like this:

<div>
  Hello, {{user.name}}
</div>

you might see the actual Hello, {{user.name}} for a second before user.name is resolved (before the data is loaded)

You could do something like this

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

if that's an issue for you.

Another solution is to use ng-cloak.

AngularJS - Why is ng-bind faster than expressions?

Details like this aren't always available in the documentation - you have to read the source. I took a peek and it seems that (as of 2014-11-24) they both work in a very similar way. Both cause a single directive to be instantiated to change the value when needed (the curly interpolation directive is generated on the fly).

Both directives evaluate the expressions involved on every $digest just like everything else. The main difference is that while ng-bind doesn't do any further processing on the value, with curlies, the entire interpolated text is recalculated on every digest. Essentially a string is built using $interpolate and that is compared with the previous value (this happens within the bowels of $digest). Neither way will update the DOM if the value (either the plain value with ng-bind or the interpolated result with curlies) hasn't changed.

To me the accepted answer on that question is a more compelling reason to use ng-bind, i.e. you can use it to prevent a visible flash of the template tags before Angular loads and compiles them, without resorting to hacks like ng-cloak.

Depending on variables there may also be cases where curly interpolation is actually more performant. One situation I can think of is when using ng-bind instead of interpolation requires you to create a lot of otherwise redundant <span> elements, and that tips the scales in the other direction. An interpolation expression also causes a single watcher to be created for the entire string independent of how many variables you use, as opposed to ng-bind which creates one watcher for each instance.

But as always, don't optimize for performance early, and if you do, profile to find out which part really matters.

Difference between ng-bind and interpolation {{}} in Angular

There is some hint in the official docs: https://docs.angularjs.org/api/ng/directive/ngBind

Typically, you don't use ngBind directly, but instead you use the
double curly markup like {{ expression }} which is similar but less
verbose.

It is preferable to use ngBind instead of {{ expression }} if a
template is momentarily displayed by the browser in its raw state
before Angular compiles it. Since ngBind is an element attribute, it
makes the bindings invisible to the user while the page is loading.

what is the difference between ng-bind vs one time binding in angular

Two-way data binding

Two-way data binding in AngularJS means binding data from Model to View and vice versa (Data flows from the Scope/Controller to the View and from the View to the scope/controller). 'ng-model' is an angular directive used for achieving two-way data binding. Any modifications to that model from the Scope/Controller will be automatically propagated to the view regardless of whether the view is asking for the updated data and any modifications to that model from the View will be immediately reflected back to the Scope/Controller.

One-way data binding

One-way data binding in AngularJS means binding data from Model to View (Data flows from the scope/controller to the view). 'ng-bind' is an angular directive used for achieving one-way data binding. After the binding, any modifications to that model from the scope/controller will be automatically propagated to the view regardless of whether the view is asking for the updated data. No propagation happens for any change to the model from the view to the controller.

One-time data binding

As its name suggests, the binding happens only once, ie, in the first digest cycle. One-time binding allows for a model or view to be updated ONCE from the value set by the controller upon the first digest cycle. As of AngularJS 1.3, you can use the "::" token to create one-time data bindings. These are bindings that deregister their own $watch() functions once the value has stabilized (which basically means the value is defined).

One-time binding is used for values that won't change after the page is stable. "Stable" generally means that the expression has been assigned a value. Once the value is set, changes to the value in the controller won't change the displayed value until the page is reloaded.
The syntax is {{::expression}}.

So, for those values or lists that won't change after the page is stable, always try to use one-time binding. This will reduce the number of unnecessary watchers in our application.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">    <div ng-repeat="customer in ::customers" >    {{::customer.name}}    ({{customer.address}})      <button ng-click="change(customer)">Change</button>     </div></div>
<script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.customers = [{        name: 'Gloria Jane',        address: 'Silo Park, 9300 East Orchard Road,    Greenwood Village, CO, 80114'},{        name: 'Nicholas Michael',        address: 'Village Park,  East Lake Avenue, Aurora, CO, 80016'    }];      $scope.change = function(customer) {        customer.address = 'Cherry Creek State Park, 4201 S Parker Rd, Aurora, CO 80014, USA';        customer.name ='Tessy Thomas';    };});</script>

Can anyone explain the difference between expression, ng-bind and ng-model?

ng-bind and ng-model both are the inbuilt directives in Angular.

While ng-bind helps you to bind a value to innerHTML of an element, ng-model helps you bind the data to the interactive elements (i.e. <input>, <checkbox>, <textarea>), you got it..

Usage:

ng-bind

If you have
$scope.textFromComponent = "Superman" in your controller.

<span ng-bind="textFromComponent"></span> binds this value within this span element.

{{ }}

The same behaviour can be achieved using {{}}.

These set of curly-brackets are called Interpolation directives and they work as a short-hand to ng-bind. While using them you no more need to write ng-bind rather you directly bind them. Like:

<span>{{textFromComponent}}</span>

ng-model

<input ng-model="textFromComponent" />

binds this value to the value property of your input element. This binds the value two-way which means if you make any changes to $scope.textFromComponent in your code, it will reflect on screen automatically. At the same time, if user makes any change to it ( since they are interactive elements, user can change them) the changed value will be passed to your code.

Is an undefined ng-bind more expensive than an ng-bind and ng-show?

To explain this, first of all ng-show and ng-bind both runs at a same priority level. there is nothing in favor of ng-show to increase performance.

here to hide the content ng-show is not required at all. ng-show will also start watching the same (here toShowVar) and will perform on the watcher registered by it (changing the display property to none by adding ng-hide class).
To explain more, if you use ng-show='false' and change toShowVar to some text in a further operation, and visit the DOM by debugger tool, you can check that the updated text is still available. So, obviously ng-show will not add any performance benefit here.
If you use ng-if (running on a higher priority that both), it will remove element from DOM and further subsequent watchers will not be active until it will be re rendered to DOM, so even in case of ng-if you are running something extra, so it will not be faster like only ng-bind but faster than ng-bind and ng-show thgother.

Note: only ng-bind and ng-bind ng-show can differ in UI, if the span having some affect of CSS (maybe inline, hierarchy parent, or any ) that is visible in UI even if it is empty (something like border), otherwise, with look and feel both are same.

Differences between ng-bind and ng-cloak in angularjs

They do the same job relatively.

Looking at api docs, you may find what are they exactly.

ngCloak

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

The ng-cloak directive is a built-in angular directive that hides all of the elements on the page that contain the directive.

<div ng-cloak>
<h1>Hello {{ foo }}</h1>
</div>

After the browser is done loading and the compile phase of the template is
rendering, angular will delete the ngCloak element attribute and the element
will become visible.

ngBind

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

Using ng-bind instead of {{ }} will prevent the unrendered {{ }} from showing up instead of empty elements being rendered. The example from above can be rewritten to the following which will prevent
the page from flickering with {{ }}:

<div>
<h1>Hello <span ng-bind="foo"></span></h1>
</div>

What's the difference between ng-model and ng-bind

ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }}
which displays the scope value $scope.val inserted into html where val is a variable name.

ng-model is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>.

---

Related Topics