AngularJS Why ng-bind is better than in angular

Question

I was in one of the angular presentation and one of the person in the meeting mentioned ng-bind is better than      binding    One of the reason  ng-bind put the variable in the watch list and only when there is a model change the data get pushed to view  on the other hand       will interpolate the expression every time  I guess it is the angular cycle  and push the value  even if the value changed or not    Also it is said that  if you have not much data in on the screen you can use      and the performance issue will not be visible  Can someone shed some light on this issue for me

User · Answer

Visibility    While your angularjs is bootstrapping  the user might see your placed brackets in the html  This can be handled with ng-cloak  But for me this is a workaround  that I don t need to use  if I use ng-bind     Performance   The      is much slower    This ng-bind is a directive and will place a watcher on the passed variable   So the ng-bind will only apply  when the passed value does actually change    The brackets on the other hand will be dirty checked and refreshed in every  digest  even if it s not necessary     I am currently building a big single page app   500 bindings per view   Changing from      to strict ng-bind did save us about 20  in every scope  digest     Suggestion   If you use a translation module such as angular-translate  always prefer directives before brackets annotation       WELCOME  translate        lt span ng-translate  WELCOME  gt  lt  span gt   If you need a filter function  better go for a directive  that actually just uses your custom filter   Documentation for  filter service    UPDATE 28 11 2014  but maybe off the topic     In Angular 1 3x the bindonce functionality was introduced  Therefore you can bind the value of an expression attribute once  will be bound when     undefined     This is useful when you don t expect your binding to change    Usage    Place    before your binding     lt ul gt       lt li ng-repeat  item in   items  gt   item   lt  li gt   lt  ul gt     lt a-directive name    item  gt   lt span data-ng-bind    value  gt  lt  span gt    Example    ng-repeat to output some data in the table  with multiple bindings per row   Translation-bindings  filter outputs  which get executed in every scope digest

User · Answer

According to Angular Doc  Since ngBind is an element attribute  it makes the bindings invisible to the user while the page is loading    it s the main difference     Basically until every dom elements not loaded  we can not see them and because ngBind is attribute on the element  it waits until the doms come into play    more info below  ngBind - directive in module ng  The ngBind attribute tells AngularJS 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   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 AngularJS compiles it  Since ngBind is an element attribute  it makes the bindings invisible to the user while the page is loading   An alternative solution to this problem would be using the ngCloak directive  visit here   for more info about the ngbind visit this page  https   docs angularjs org api ng directive ngBind  You could do something like this as attribute  ng-bind    lt div ng-bind  my name  gt  lt  div gt    or do interpolation as below    lt div gt   my name   lt  div gt    or this way with ng-cloak attributes in AngularJs    lt div id  my-name  ng-cloak gt   my name   lt  div gt    ng-cloak avoid flashing on the dom and wait until all be ready  this is equal to ng-bind attribute

User · Answer

There is some flickering problem in       like when you refresh the page then for a short spam of time expression is seen So we should use ng-bind instead of expression for data depiction

User · Answer

This is because with      the angular compiler considers both the text node and it s parent as there is a possibility of merging of 2      nodes  Hence there are additional linkers that add to the load time  Of course for a few such occurrences the difference is immaterial  however when you are using this inside a repeater of large number of items  it will cause an impact in slower runtime environment

User · Answer

Basically the double-curly syntax is more naturally readable and requires less typing   Both cases produce the same output but   if you choose to go with      there is a chance that the user will see for some milliseconds the      before your template is rendered by angular  So if you notice any      then is better to use ng-bind   Also very important is that only in your index html of your angular app you can have un-rendered       If you are using directives so then templates  there is no chance to see that because angular first render the template and after append it to the DOM

User · Answer

is meant two-way data binding  But  ng-bind is actually meant for one-way data binding    Using ng-bind will reduce the number of watchers in your page  Hence ng-bind will be faster than          So  if you only want to display a value and its updates  and do not want to reflect its change from UI back to the controller  then go for ng-bind  This will increase the page performance and reduce the page load time    lt div gt    Hello   lt span ng-bind  variable  gt  lt  span gt   lt  div gt

User · Answer

ng-bind is better than          For example  you could do    lt div gt    Hello    variable    lt  div gt    This means that the whole text Hello    variable   enclosed by  lt div gt  will be copied and stored in memory   If instead you do something like this    lt div gt    Hello   lt span ng-bind  variable  gt  lt  span gt   lt  div gt    Only the value of the value will be stored in memory  and angular will register a watcher  watch expression  which consists of the variable only

User · Answer

The reason why Ng-Bind is better because    When Your page is not Loaded or when your internet is slow or when your website loaded half  then you can see these type of issues   Check the Screen Shot with Read mark  will be triggered on Screen which is Completly weird  To avoid such we should use Ng-bind

User · Answer

ng-bind has its problems too When you try to use angular filters  limit or something else  you maybe can have problem if you use ng-bind  But in other case  ng-bind is better in UX side when user opens a page  he she will see   10ms-100ms  that print symbols                that s why ng-bind is better

User · Answer

ng-bind is also safer because it represents html as a string   So for example    lt script on  maliciousCode   gt  lt  script gt   will be displayed as a string and not be executed

User · Answer

If you are not using ng-bind  instead something like this    lt div gt    Hello    user name    lt  div gt    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   lt div gt    Hello   lt span ng-bind  user name  gt  lt  span gt   lt  div gt    if that s an issue for you   Another solution is to use ng-cloak

User · Answer

You can refer to this site it will give you a explanation which one is better as i know      this is slower than ng-bind   http   corpus hubwiz com 2 angularjs 16125872 html refer this site

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

Examples related to javascript

Examples related to angularjs

Examples related to ng-bind