AngularJS с тегами RequireJS, показывающими breifly

Question

Я привожу углы в использовании, но проблема заключается в том, что угловые метки показывают на мгновение, пока не будет проанализирован угловой скрипт.

Должен ли я приводить угловые ошибки из requirejs и определить его до того, как будет инициализирован requirejs или есть лучший способ сделать это?

Вот мои requirejs:

require.config({ 
    map: {}, 
    paths: { 
     "angular": [ 
      "angular" 
     ], 
     "jquery": [ 
      "jquery" 
     ], 
     'bootstrap': [ 
      'bootstrap' 
     ], 
     'kendo': [ 
      'kendo' 
     ] 
    }, 
    shim: { 
     'bootstrap': ['jquery'], 
     'kendo': ['jquery'], 
     'angular': { 
      exports: 'angular' 
     } 
    } 
}) 

Answer 1

При загрузке угловых вне головы документа (как вы делаете с помощью requirejs для загрузки угловым), нг-накидка не будет работать сразу, так как необходимые стили, чтобы скрыть угловые элементы содержатся в angular.js.

Чтобы исправить это, вы можете вручную добавить эти стили самостоятельно в начало документа. Простой тег стиля сделает это.

<style type="text/css"> 
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
     display: none !important; 
    } 
</style> 

Как поймать все, вы можете добавить директиву нг-невидимости в тег тела документа (или же тег, который нг-приложение), хотя лучше практика, чтобы добавить нг-плащ только элементов, которые этого требуют.

Answer 2

Это использование случай, ngCloak предназначен для решения.

директива ngCloak используется для предотвращения углового шаблона HTML от того кратко отображается в браузере в необработанном (неоткомпилированной) форме, когда приложение загружается. Используйте эту директиву, чтобы избежать нежелательного эффекта мерцания, вызванного отображением шаблона html.

Директива может применяться к элементу, но предпочтительным применением является применение нескольких директив ngCloak к небольшим частям страницы, чтобы обеспечить возможность прогрессивного рендеринга просмотра браузера.

<div id="template1" ng-cloak>{{ 'hello' }}</div>