Заменить угловой шаблон шаблономUrl с помощью компонентов

Question

Я использую Angular 1.5.7 (структурирование компонентов) и хотел бы иметь Загрузка html пока пока компонент загружается с сервера.

Код ниже не работает, как я этого хочу. Я бы какЗагрузка html код, показанный ниже, пока не будет загружен файл templateUrl html (исходящий с сервера). После загрузки серверной части html замените загружаемый html .

Возможно ли это?

<div class="card field-loading"> 
  <div class="card-body"> 
   <div class="loading-text-3"></div> 
   <div class="loading-text-10"></div> 
   <div class="loading-text-4"></div> 
  </div> 
</div> 

HTML

<text-field ng-show="field.type === 'Text'" 
    presenter="vm" form-name="fieldSettingsModel" 
    sidebar-item="true" design-mode="false" field="field"> 
</text-field> 

JS

angular 
.module('app.forms.fields.basic') 
.component('textField', 
{ 
    require: { 
     'app': '^mainApp' 
    }, 
    bindings: { 
      field: '=', 
      formName: '@', 
      designMode: '<', 
      presenter: '=', 
      mapTo: '<', 
      sidebarItem: '<' 
    }, 
    template:`<div class="card field-loading"> 
                                <div class="card-body"> 
                                    <div class="loading-text-3"></div> 
                                    <div class="loading-text-10"></div> 
                                    <div class="loading-text-4"></div> 
                                </div> 
                            </div>`, 
    templateUrl: ['appSettings', appSettings => ('ng/routeArea/FieldTemplate/Text?v=' + appSettings.version)], 
    controller: TextFieldComponent, 
    controllerAs: 'vm' 
}); 

Answer 1

Во-первых, удалить свойство шаблона на компоненте (оставьте templateUrl).

Затем поместите HTML, который вы хотите показать во время загрузки внутри текстового поля тэгов:

<text-field ng-show="field.type === 'Text'" 
    presenter="vm" form-name="fieldSettingsModel" 
    sidebar-item="true" design-mode="false" field="field"> 
    <div class="card field-loading"> 
     <div class="card-body"> 
      <div class="loading-text-3"></div> 
      <div class="loading-text-10"></div> 
      <div class="loading-text-4"></div> 
     </div> 
    </div> 
</text-field> 

Answer 2

я бы, вероятно, начать с чего-то простого, как торт:

bindings: { 
    templateUrl: '<' 
} 

<div> 
<div ng-if="!vm.loaded"> 
Loading... 
</div> 
<div ng-include="vm.templateUrl" onload="vm.loaded = true"> 
</div> 

http://plnkr.co/edit/zKkNHuSiXwqwxp4p4yup?p=preview