对于外部模板，ng-Include非常慢。

Question

我使用了ng-include，如below.But所示，这是非常slow.In的，换句话说，它显示标签的标题而没有it.Later的内容，它加载的content.Which是真正的BAD.But，如果我在同一个页面上使用所有的内容，那么就没有delay.So了，我如何加快速度呢？你知道做那件事的方法或技巧吗？谢谢。

父页面:

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

模板: 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

如下图所示，当我使用上面的内容时，我不希望将这些html内容分离为单独的delays.But，这就是我在上面尝试的原因。

在同一个页面中:

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

Answer 1

这里是solution.You可以使用$templateCache服务。

app.js

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

}]);

cshtml页面

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

Answer 2

我建议使用像grunt-html2js这样的模板缓存生成器。

但是，根据angularjs文档，您可以将嵌套内容的模板缓存为：

<script type="text/ng-template" id="templateId.html">
    <p>This is the content of the template</p>
</script>

然后通常包括模板：

<div ng-include=" 'templateId.html' "></div>