Don't display AngularJS code before execution

Question

When I reload page my AngularJS code is displaying

Problem: Code should not display if my internet is slow or page not fully reload. It should display just result.

Please help me with the best solution.

Answer 1

ng-cloak is for the same usage. Read it here https://docs.angularjs.org/api/ng/directive/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.

Or, you can also replace your content from

<div>{{cat1.Title | limitTo:18}}</div>

To like this:

<div ng-bind="cat1.Title | limitTo:18"></div>

Answer 2

Using ngCloak is the right approach.

Make sure to add CSS too, based on this post: Angularjs - ng-cloak/ng-show elements blink

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}