外部模板

Question

我使用ng-include如下所示。但它非常慢。换句话说，它显示标签的标题没有它的内容。后来加载内容。这真的很糟糕。但是如果我全部使用在同一页面上的内容然后没有延迟。所以我怎样才能加快这个速度？你知道任何技巧或方法吗？谢谢。

父页面：

<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内容分开到单独的模板。这就是我在上面尝试过的原因。

全部在同一页面中：

    <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

以下是解决方案。您可以使用 $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>