Часто при создании приложения на AngularJS можно наблюдать исходний код теплейтов при старте. Это создает не сильно хорошее впечатление для конечного пользователя, так как он может подумать, что сайт поломан. Особенно хорошо это заметно на слабом соединении, допустим на мобильном телефоне.
Намного лучше было бы заменить разметку отображения на индикатор загрузки.
Сделать это не сложно. AngularJS предусмотрел для этого директиву ngCloak, с помощью которой мы можем спрятать шаблон «под мантию».
<div ng-cloak>
Name: {{name}}
Age: {{age}}
</div>
Заметим, что эта директива выполнит свою задачу лучше всего если Ангулар будет подключен выше этого кода (в <head /> к примеру). Иначе — можно прописать выше такой CSS-стиль:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none;
}
Для поддержки старых браузеров (IE7) — директиву нужно подключать через класс:
<div class="ng-cloak">...</div>
Чтобы добавить индикатор загрузки, можно воспользоваться директивой ngHide. Допустим, у нас в скопе есть список $scope.list, загрузку которого мы ожидаем, тогда комплексный пример будет выглядеть примерно так:
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body ng-controller="MyController">
<div ng-hide="list">Загрузка...</div>
<ul ng-cloak>
<li ng-repeat="item in list">Name: {{item.name}}<li>
</ul>
</div>
</body>
</html>
Более подробно можно почитать на официальном сайте: директива ng-cloak.
Интересно. А что есть по drag-n-drop на AngularJS?
Спасибо, долго не мог понять как решить проблемы скачков отдельных блоков в angular.
Будем пробовать