如何一个接一个地渲染多个html文件？

Posted 2023-03-05

【中文标题】如何一个接一个地渲染多个html文件？

【英文标题】：How to render multiple html files one after the other angular?

【发布时间】：2015-10-10 00:18:38

【问题描述】：

我有许多需要呈现到单个页面的 html 模板。有没有办法一个接一个地呈现每个单独的模板，这样用户就不必在导航页面之前等待所有模板？

每个部分都是模板化的，我正在使用指令在主 html 文件中访问它们。每个模板还访问一个数据库，所以我认为这是减慢渲染过程的原因。我想我要问的是是否有一种方法可以在角度访问数据并为前几个模板渲染并让用户浏览页面，而其余的则处于渲染过程中。

<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>

【问题讨论】：

需要更具体，问题很模糊......但是是的，有很多方法可以呈现多个 html 文件......angular 旨在做到这一点

同意@charlietfl，需要更多信息。如果加载是个问题，您可能需要考虑将模板内联注入到主 index.html 文件中。

为什么不使用嵌套指令......

你可以关注这个Link！希望这会有所帮助..！

【参考方案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 自动执行此任务。