在AngularJs中使用$ templateCache的更好方法是什么？

Question

我正在使用一些旧的AngularJs代码（1.2），需要进行一些更改。让我感到沮丧的一件事就是自由使用$ templateCache通过字符串连接将整个网页放入缓存中。

这意味着在这个非常大的项目中，我有数百条这样的行：

$templateCache.put("app/mapping/AddFarmField/MassImportWizard.tpl.html", '<div class="panel panel-default" ng-show="currentStep.value == \'select_rlg\'">\n' + '    <div class="panel-heading" id="panel-heading" bs-affix data-offset-top="20">\n' + '        <div class="row">\n' + '            <div class="col-xs-7">\n' + '                <h3 class="panel-title">Select Location or Grower</h3>\n' + "            </div>\n" + '            <div class="col-xs-5">\n' + '                <div style="margin-bottom: 0;">\n' + '                    <div class="pull-right">\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onCancelRlgSelection()"><span class="glyphicon glyphicon-remove red-icon icon-container" aria-hidden="true" ></span> Cancel</button>\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onSelectRlg()"><span class="glyphicon glyphicon-ok green-icon" aria-hidden="true" ></span> Select</button>\n' + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "    </div>\n" + "\n" + '    <div class="panel-body" og-rlgff="rlgffOptions" template-url="tpl.rlgffVertical.html">\n' + "    </div>\n" + "\n" + "</div>\n" + "\n" + '<div class="panel panel-default" ng-show="currentStep.value == \'upload_file\'">\n' + '    <div class="panel-heading" id="panel-heading2" bs-affix data-offset-top="20">\n' + '        <div class="row">\n' + '            <div class="col-xs-7">\n' + '                <h3 class="panel-title">Shapefile Upload</h3>\n' + "            </div>\n" + '            <div class="col-xs-5">\n' + '                <div style="margin-bottom: 0;">\n' + '                    <div class="pull-right">\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onCancelFileUpload()"><span class="glyphicon glyphicon-remove red-icon icon-container" aria-hidden="true" ></span> Cancel</button>\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onUploadButtonClicked()"><span class="glyphicon glyphicon-upload green-icon" aria-hidden="true" ></span> Upload</button>\n' + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "    </div>\n" + "\n" + '    <div class="panel-body">\n' + '        <div class="row">\n' + '            <div class="col-lg-12">\n' + '                <div class="input-group">\n' + '                    <span class="input-group-btn">\n' + '                        <button class="btn btn-default" ng-file-select ng-model="selectedFiles" ng-file-change="onFileSelected($files, $event)" ng-multiple="false">Browse...</button>\n' + "                    </span>\n" + '                    <div class="form-control">\n' + "                        {{getSelectedFileName()}}\n" + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "\n" + '        <div class="row">\n' + '            <div class="col-sm-12">\n' + '                <div class="progress" ng-show="selectedFiles[0].progress > 0">\n' + '                    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"\n' + '                         ng-attr-aria-valuenow="{{selectedFiles[0].progress}}"\n' + '                         ng-attr-style="width: {{selectedFiles[0].progress}}%;"\n' + "                         ng-class=\"{ 'progress-bar-danger': selectedFiles[0].upload.aborted || selectedFiles[0].upload.failed, 'active': selectedFiles[0].upload.active, 'progress-bar-striped': selectedFiles[0].upload.active }\">\n" + "                        {{selectedFiles[0].progress}}%\n" + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "    </div>\n" + "\n" + "</div>\n" + "\n" + '<div class="panel panel-default" ng-show="currentStep.value == \'map_columns\'">\n' + '    <div class="panel-heading" id="panel-heading3" bs-affix data-offset-top="20">\n' + '        <div class="row">\n' + '            <div class="col-xs-7">\n' + '                <h3 class="panel-title">Shapefile Column Mapping</h3>\n' + "            </div>\n" + '            <div class="col-xs-5">\n' + '                <div style="margin-bottom: 0;">\n' + '                    <div class="pull-right">\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onCancelMapColumns()"><span class="glyphicon glyphicon-remove red-icon icon-container" aria-hidden="true" ></span> Cancel</button>\n' + '                        <button class="btn btn-default btn-xs disable-when-busy" ng-click="onMapColumnsButtonClicked()"><span class="glyphicon glyphicon-floppy-disk green-icon" aria-hidden="true" ></span> Submit</button>\n' + "                    </div>\n" + "                </div>\n" + "            </div>\n" + "        </div>\n" + "    </div>\n" + "\n" + '    <div class="panel-body">\n' + '        <div class="form-horizontal">\n' + "\n" + '            <div class="form-group col-sm-offset-1" ng-show="shouldMapGrowerColumn">\n' + '                <label class="col-sm-3 control-label" for="growerNameSelector">Grower name</label>\n' + '                <div class="col-sm-8" id="growerNameSelector">\n' + "                    <ui-select\n" + '                            ng-model="columnMapping.grower"\n' + '                            theme="select2"\n' + '                            search-enabled="false">\n' + "\n" + '                        <ui-select-match placeholder="Select Grower Column">{{$select.selected}}</ui-select-match>\n' + "\n" + '                        <ui-select-choices repeat="n in selectedFiles[0].upload.uploadResponse.columnNames">\n' + '                            <div ng-bind-html="n"></div>\n' + "                        </ui-select-choices>\n" + "\n" + '                        <label class="col-sm-3 control-label" for="growerNameSelector">Grower name</label>\n' + "                    </ui-select>\n" + "                </div>\n" + "            </div>\n" + "\n" + '            <div class="form-group col-sm-offset-1">\n' + '                <label class="col-sm-3 control-label" for="farmNameSelector">Farm name</label>\n' + '                <div class="col-sm-8" id="farmNameSelector">\n' + "                    <ui-select\n" + '                            ng-model="columnMapping.farm"\n' + '                            theme="select2"\n' + '                            search-enabled="false">\n' + "\n" + '                        <ui-select-match placeholder="Select Farm Column">{{$select.selected}}</ui-select-match>\n' + "\n" + '                        <ui-select-choices repeat="n in selectedFiles[0].upload.uploadResponse.columnNames">\n' + '                            <div ng-bind-html="n"></div>\n' + "                        </ui-select-choices>\n" + "\n" + "                    </ui-select>\n" + "                </div>\n" + "            </div>\n" + "\n" + '            <div class="form-group col-sm-offset-1">\n' + '                <label class="col-sm-3 control-label" for="fieldNameSelector">Field name</label>\n' + '                <div class="col-sm-8" id="fieldNameSelector">\n' + "                    <ui-select\n" + '                            ng-model="columnMapping.field"\n' + '                            theme="select2"\n' + '                            search-enabled="false">\n' + "\n" + '                        <ui-select-match placeholder="Select Field Column">{{$select.selected}}</ui-select-match>\n' + "\n" + '                        <ui-select-choices repeat="n in selectedFiles[0].upload.uploadResponse.columnNames">\n' + '                            <div ng-bind-html="n"></div>\n' + "                        </ui-select-choices>\n" + "\n" + "                    </ui-select>\n" + "                </div>\n" + "            </div>\n" + "\n" + "        </div>\n" + "    </div>\n" + "\n" + "</div>\n" + "\n" + "\n" + '<div class="panel panel-default" ng-show="currentStep.value == \'show_conflicts\'">\n' + '    <div class="panel-heading">\n' + "        These fields were not imported:\n" + "    </div>\n" + "\n" + '    <div class="panel-body">\n' + '        <div ag-grid="gridConflicts" class="ag-fresh" style="width: 100%; height: 220px;"></div>\n' + "    </div>\n" + "\n" + '    <div class="panel-footer clearfix">\n' + '        <div class="pull-right">\n' + '            <button class="btn btn-default" ng-click="onConflictsDone()">Done</button>\n' + "        </div>\n" + "    </div>\n" + "</div>");

因此，一长串代码基本上是由连接字符串组成的整个网页。

是不是有某种方法，开发人员只能指向一个实际的文件，而不是在一堆连接的字符串中干扰？像这样：

$templateCache.put("test.html","templateTest.html");

到目前为止，我从来没有使用过$ templateCache，所以我不太确定我所问的是否可行。特别是在AngularJs的旧版本中。

Answer 1

您可以使用脚本标记

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

From the docs，包含模板的脚本标记不需要包含在文档的头部，但它必须是$ rootElement（IE，具有ng-app属性的元素）的后代，否则模板将被忽略。

稍后检索模板

$templateCache.get('templateId.html')

同样在1.3.0版中，您可以使用$templateRequest（它允许您加载模板网址并将内容存储在$templateCache）内，

$templateRequest('template.html').then(function(html){
  // Convert the html to an actual DOM node
  var template = angular.element(html);
  // Append it to the directive element
  $element.append(template);
  // And let Angular $compile it
  $compile(template)($scope);
});

Check this link，我发现它非常有用。我希望它有所帮助。

Answer 2

如果您没有延迟加载，这实际上是使用$templateCache的正确方法。像angular-bootstrap这样的库就是这样做的。

当您使用延迟加载并需要一些tempalte.html时 - 首先在$templateCache中进行检查，如果没有这样的模板，则会加载并存储（例如，ng-include就像这样）。所以$templateCache实际上存储了你的html模板，这就是它的用途。