NG-包括与外部模板很慢 [英] ng-Include is very slow with the external template

查看：184
本文介绍了NG-包括与外部模板很慢的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我用 NG-包括如图所示below.But它是非常slow.In换句话说，它显示了没有it.Later的内容标签的标题，它加载内容。其中真的BAD.But如果我使用所有的内容在同一页上则没有delay.So我怎么能加快速度？你知道的任何窍门或方法来做到这一点？谢谢。

父页：的 

 ＆LT; UIB标签标题=@ L（PropertyInformation）＆GT;
＆LT; D​​IV NG-包括=〜/应用/租户/视图/物业管理/ createPropertyForm.cshtml'＆GT;＆LT; / DIV＆GT;
＆LT; / UIB-标签＆gt;

模板：createPropertyForm.cshtml 的 

 ＆LT;表格名称=createPropertyForm角色=形式的novalidate类=表单验证＆GT;
                ＆LT; D​​IV CLASS =行＆GT;
                    ＆LT; D​​IV CLASS =COL-XS-4＆GT;
                        ＆LT; D​​IV CLASS =表单组形式-MD-线路输入格式MD-浮动标签不提示＆GT;
                            ＆LT;输入类=表格控型=TEXTNAME =StreetNumberNG模型=vm.property.address.streetNumberNG-CLASS ={'编辑'：vm.property.address.streetNumber }需要MAXLENGTH =@ Address.MaxLength＆GT;
                            ＆LT;标签＆gt; @L（StreetNumber）＆LT; /标签＆gt;
                        ＆LT; / DIV＆GT;
                    ＆LT; / DIV＆GT;
                    ＆LT; D​​IV CLASS =COL-XS-4＆GT;
                        ＆LT; D​​IV CLASS =表单组形式-MD-线路输入格式MD-浮动标签不提示＆GT;
                            ＆LT;输入类=表格控型=TEXTNAME =StreetNameNG模型=vm.property.address.streetNameNG-CLASS ={'编辑'：vm.property.address.streetName }需要MAXLENGTH =@ Address.MaxLength＆GT;
                            ＆LT;标签＆gt; @L（StreetName）＆LT; /标签＆gt;
                        ＆LT; / DIV＆GT;
                    ＆LT; / DIV＆GT;
                    ＆LT; D​​IV CLASS =COL-XS-4＆GT;
                        ＆LT; D​​IV CLASS =表单组＆GT;
                            ＆LT;标签类=控制标签＆GT; @L（城市）＆LT; /标签＆gt;
                            ＆LT;选择NG模型=vm.property.address.cityId级=表格控NG选项=a.id为a.name +'|'+ a.zip code为中vm.cities要求＆GT;
                                ＆LT;期权价值=禁用=＆GT;  - 选择一个城市 - ＆LT; /选项＆GT;
                            ＆LT; /选择＆GT;
                        ＆LT; / DIV＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;//有很多元素

当我使用上面，如下图所示，则没有delays.But我想分开的HTML内容单独template.That就是为什么我在上面已经试过了。

所有在同一页：的 

 ＆LT; UIB标签标题=@ L（PropertyInformation）＆GT;
       ＆LT; D​​IV NG-包括='createPropertyForm.html'＆GT;＆LT; / DIV＆GT;
    ＆LT; / UIB-标签＆gt; ＆LT;脚本类型=文/ NG-模板ID =createPropertyForm.html＆GT;
        ＆LT;表格名称=createPropertyForm角色=形式的novalidate类=表单验证＆GT;
            ＆LT; D​​IV CLASS =行＆GT;
                ＆LT; D​​IV CLASS =COL-XS-4＆GT;
                    ＆LT; D​​IV CLASS =表单组形式-MD-线路输入格式MD-浮动标签不提示＆GT;
                        ＆LT;输入类=表格控型=TEXTNAME =StreetNumberNG模型=vm.property.address.streetNumberNG-CLASS ={'编辑'：vm.property.address.streetNumber }需要MAXLENGTH =@ Address.MaxLength＆GT;
                        ＆LT;标签＆gt; @L（StreetNumber）＆LT; /标签＆gt;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV CLASS =COL-XS-4＆GT;
                    ＆LT; D​​IV CLASS =表单组形式-MD-线路输入格式MD-浮动标签不提示＆GT;
                        ＆LT;输入类=表格控型=TEXTNAME =StreetNameNG模型=vm.property.address.streetNameNG-CLASS ={'编辑'：vm.property.address.streetName }需要MAXLENGTH =@ Address.MaxLength＆GT;
                        ＆LT;标签＆gt; @L（StreetName）＆LT; /标签＆gt;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; D​​IV CLASS =COL-XS-4＆GT;
                    ＆LT; D​​IV CLASS =表单组＆GT;
                        ＆LT;标签类=控制标签＆GT; @L（城市）＆LT; /标签＆gt;
                        ＆LT;选择NG模型=vm.property.address.cityId级=表格控NG选项=a.id为a.name +'|'+ a.zip code为中vm.cities要求＆GT;
                            ＆LT;期权价值=禁用=＆GT;  - 选择一个城市 - ＆LT; /选项＆GT;
                        ＆LT; /选择＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; / SCRIPT＆GT;


解决方案

下面是solution.You可以使用的 $ templateCache 服务。

app.js 

  appModule.run（[$ templateCache，$ HTTP功能（$ templateCache，$ HTTP）{
    $ http.get（〜/应用/租户/视图/物业管理/标签/ createPropertyForm.cshtml'，{缓存：$ templateCache}）;}]）;

CSHTML页 

 ＆LT; D​​IV NG-包括=〜/应用/租户/视图/物业管理/标签/ createPropertyForm.cshtml'＆GT;＆LT; / DIV＆GT;

I have used ng-include as shown below.But it is very slow.In other words it shows tab's heading without the content of it.Later it loads the content.Which is really BAD.But if I use all the content on the same page then there is no delay.So how can I speed this ? Do you know any trick or method to do that ? Thanks.

Parent page :

<uib-tab heading="@L("PropertyInformation")">
<div ng-include="'~/App/tenant/views/propertymanagement/createPropertyForm.cshtml'"></div>
</uib-tab>

Template : createPropertyForm.cshtml

     <form name="createPropertyForm" role="form" novalidate class="form-validation">
                <div class="row">
                    <div class="col-xs-4">
                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                            <input class="form-control" type="text" name="StreetNumber" ng-model="vm.property.address.streetNumber" ng-class="{'edited':vm.property.address.streetNumber}" required maxlength="@Address.MaxLength">
                            <label>@L("StreetNumber")</label>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                            <input class="form-control" type="text" name="StreetName" ng-model="vm.property.address.streetName" ng-class="{'edited':vm.property.address.streetName}" required maxlength="@Address.MaxLength">
                            <label>@L("StreetName")</label>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="control-label">@L("City")</label>
                            <select ng-model="vm.property.address.cityId" class="form-control" ng-options="a.id as a.name + ' | '+ a.zipCode for a in vm.cities" required>
                                <option value="" disabled="">-- Select a City --</option>
                            </select>
                        </div>
                    </div>
                </div>

// having lot more elements

When I use above as shown below,then no delays.But I would like to separate those html content to separate template.That is why I have tried above.

All in the same page :

    <uib-tab heading="@L("PropertyInformation")">
       <div ng-include="'createPropertyForm.html'"></div>
    </uib-tab> 

 <script type="text/ng-template" id="createPropertyForm.html">
        <form name="createPropertyForm" role="form" novalidate class="form-validation">
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input class="form-control" type="text" name="StreetNumber" ng-model="vm.property.address.streetNumber" ng-class="{'edited':vm.property.address.streetNumber}" required maxlength="@Address.MaxLength">
                        <label>@L("StreetNumber")</label>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input class="form-control" type="text" name="StreetName" ng-model="vm.property.address.streetName" ng-class="{'edited':vm.property.address.streetName}" required maxlength="@Address.MaxLength">
                        <label>@L("StreetName")</label>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="control-label">@L("City")</label>
                        <select ng-model="vm.property.address.cityId" class="form-control" ng-options="a.id as a.name + ' | '+ a.zipCode for a in vm.cities" required>
                            <option value="" disabled="">-- Select a City --</option>
                        </select>
                    </div>
                </div>
            </div>
</form>
</script>

解决方案

Here is the solution.You can use $templateCache service.

app.js

appModule.run(["$templateCache", "$http", function ($templateCache, $http) {
    $http.get('~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml', { cache: $templateCache });

}]);

cshtml page 

  <div ng-include="'~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml'"></div>

这篇关于NG-包括与外部模板很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆