Differences between ng-bind and ng-cloak in angularjs - 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.

Answer 3

When you use ng-bind, browser do ignore this while after angular is loaded , it binds the value in the view.
While if you use ng-cloak, {{}} will still appear for a short time, but as soon as angular is loaded and parsed, it will omit the {{}} till the compilation occurs.

Answer 4

From documentation
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.
https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 5

In a practical sense, if you pass your model into a view from the server, then ng-cloak is fine -- when the page renders, your view data is populated. However, if you're using a more mobile-friendly approach of loading your html and loading your data and perhaps localization with an additional call, then ng-model prevents {{}} flicker between when your page loads and your data arrives. However, I find ng-model insufficient as it can't be used universally, so I generally put an ng-show on a container that exposes the view after the data has been retrieved and a flag has been set.