AngularJS directive rendering is jumpy

Question

I'm using AngularJS to create my site.

I've applied the ng-cloak directive over the entire body.

However, when loading, the elements appear to load asynchronously, (for example, when loading directive templates), causing elements to move around until the full page is loaded.

How do I avoid this brief flash of elements moving around? I've already applied ng-cloak. Is there a better way to do this?

It seems that part of the problem is that the CSS styles are not applied immediately. For example, if I set the width of something that is slow to load, then it sometimes takes a brief millisecond before that style is applied to the element.

Answer 1

You should concatenate your templates into your index.html file. Loading them asynchronously only creates unnecessary latency, slows down your website and ruins user experience.

That doesn't mean however that you should write all the templates in your index file, that would be nightmare to maintain. Use a task processor like grunt or gulp to merge all your individual templates into index.html before deploying.

The templates need to be within the ng-app element, inside script tags, like this:

<div ng-app="myApp">
    <div my-directive></div>

    <script type="text/ng-template" id="/my-directive.html">
        Content of the template.
    </script>
</div>