Лучший способ использовать $ templateCache в AngularJs?

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

Это действительно правильный способ использования $templateCache, если у вас нет отложенной загрузки.Некоторые библиотеки, такие как angular-bootstrap, делают именно это.

Когда вы используете отложенную загрузку и требует некоторый tempalte.html - сначала он проверяется в $templateCache, если такого шаблона нет, он загружается и сохраняется (Т.е. ng-include работает так).Так что $templateCache на самом деле хранит ваши HTML-шаблоны, и это то, для чего оно.

Answer 2

Вы можете использовать тег сценария,

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

Из документов тег сценария, содержащий шаблон, не обязательно должен быть включен в заголовок документа, но ондолжен быть потомком $ rootElement (IE, элемент с атрибутом ng-app), иначе шаблон будет проигнорирован.

Чтобы получить шаблон позже,

$templateCache.get('templateId.html')

Также в версии1.3.0 вы можете использовать $templateRequest (он позволяет загружать URL-адрес шаблона и хранить содержимое внутри $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);
});

Проверить эту ссылку , я нашелэто очень полезно.Надеюсь, это поможет.