我正在使用一些旧的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的旧版本中。
答案 0 :(得分：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，我发现它非常有用。我希望它有所帮助。
答案 1 :(得分：0)
如果您没有延迟加载，这实际上是使用$templateCache的正确方法。像angular-bootstrap这样的库就是这样做的。
当您使用延迟加载并需要一些tempalte.html时 - 首先在$templateCache中进行检查，如果没有这样的模板，则会加载并存储（例如，ng-include就像这样）。所以$templateCache实际上存储了你的html模板，这就是它的用途。