CODEWITHSUNDEEP
javascripthtmlangularjsnode.jsoptimization
Patricia Rozario
Patricia Rozario

Reputation: 43

How to render multiple html files one after the other angular?

I have many html templates that need to be rendered to a single page. Is there any way to render each individual template one after the other so the user doesn't have to wait for all of them before navigating the page?

Each section is templated out and i'm using directives to access them in a main html file. Each template also accesses a database so i think that's what's slowing down the rendering process. I guess what i'm asking is whether there is a way in angular to access the data and render for the first few templates and let the user 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>

Upvotes: 4

Views: 883

Answers (1)

yvesmancera
yvesmancera

Reputation: 2925

There is a different way to fix your problem, which is loading your partials in the $templateCache (https://docs.angularjs.org/api/ng/service/$templateCache). This way you don't have to make an AJAX request for each view when they're needed, therefore loading the content of your directives virtually immediately.

You could do something like:

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

Additionally, if you're using Grunt, you could automate this task using grunt-angular-templates.

Upvotes: 1

Related Questions