How to render multiple html files one after another angular?

Question

I have many html templates that need to be displayed on one page. Is there a way to visualize each individual template one by one so that the user does not have to wait for them all before going to the page?

Each section is templated, and I use directives to access them in the main html file. Each template also refers to a database, so I think it slows down the rendering process. I assume that I am asking if there is a way in angular for accessing data and rendering for the first few templates and allowing the user to navigate the page while the rest are in the process of rendering.

<company-header ctrl='infoCtrl' class='company-fixed-header'></company-header>
<div class="wrap">
    <div class='dynamic-container'> 

        <div class='content'>
            <section id='details'>
                <company-Identifiers-List ctrl='infoCtrl'></company-Identifiers-List>
                <contact-Information-List ctrl='infoCtrl'></contact-Information-List>
                <company-Information-List ctrl='infoCtrl'></company-Information-List>
                <regulatory-Filing-List ctrl='infoCtrl'></regulatory-Filing-List>
                <securities-Manuals ctrl='infoCtrl'></securities-Manuals>
            </section>
            <section id="securities">
                <security-info ctrl='infoCtrl'></security-info>
            </section>
        </div>
    </div>
</div>

Answer 1

, $templateCache (https://docs.angularjs.org/api/ng/service/ $templateCache). , AJAX , , .

- :

$templateCache.put('company-identifiers-list.html', '<div>your content</div>');
$templateCache.put('company-information-list.html', '<div>your content</div>');

, Grunt, , grunt-angular-templates.