Differences between ng-bind and ng-cloak in angularjs

Question

In this question why ng-bind is better than {{}} in angular? I understand the differences between {{}} and ng-bind. On the other hand, I can use ng-cloak instead of ng-bind.

Now my question is what are the differences between ng-bind and ng-cloak?

Answer 1

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>

Answer 2

You can look up things like that in the Angular Api Docs.

ng-cloak is just a css rule that sets the style to display: none !important so your {{}} expression is not visible until replaced with actual data. https://docs.angularjs.org/api/ng/directive/ngCloak

While ng-bind is an expression itself.