При создании приложений на AngularJS у начинающего разработчика возникает много вопросов, особенно если до определенного времени он использовал библиотеки, аналогичные jQuery или Prototype. В этом посте я хотел бы поделиться некоторыми приемами, которые будут полезны начинающим разработчикам AngularJS.
Менеджер загрузки приложений и состояний
Пока сам фреймворк, его зависимости не загружены и все запросы не обработаны в фоновом режиме, приложение может выглядеть очень уныло.И даже нг-плащ в большинстве случаев не поможет. Обычно для таких целей используется div, имеющий более высокий z-индекс, чем основной контент сайта, и перекрывающий его до тех пор, пока не будут загружены все компоненты и состояния.
Это может выглядеть так:
и его стили такие:<div class="loader" ng-show="loader"><div class="loader-content">Loading.</div></div>
.
loader {
position: fixed;
width: 100%;
height: 100%;
z-index: 9;
}
.
loader-content {
width: 128px;
height: 128px;
overflow: auto;
margin: auto;
position: absolute;
z-index: 10;
top: 0; left: 0; bottom: 0; right: 0;
}
В AngularJS мы будем использовать переменную загрузчика, которая будет расположена в $rootScope, и в зависимости от ее значения наш div будет скрыт или показан в окне браузера.
Постоянно менять значение переменной в $rootScope довольно неудобно, и у нас может быть несколько операций, которые будут выполняться одновременно, и в тот момент, когда одна из них завершится, вторая может не завершить свою работу.
В этом случае загрузчик скроется.
Чтобы избежать подобных случаев, можно создать сервис, который будет отвечать за хранение всех состояний и в зависимости от того, выполняются ли какие-либо операции, управлять значением $rootScope.loader. В самой простой форме это можно описать следующим образом: 'use strict';
app.factory('StateManager', function StatemManager($rootScope, $log) {
Теги: #angularjs #javascript framework #JavaScript #советы и подсказки #JavaScript #программирование #angular
-
Новые Коды Статуса Http
19 Oct, 24 -
"… И Снова Здравствуйте..."
19 Oct, 24 -
Эволюция Фотожурналистики В Эпоху Интернета
19 Oct, 24 -
Мега: (Не)Проверка Безопасности
19 Oct, 24
