При создании приложений на 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
-
Неевклидова Геометрия
19 Dec, 24 -
Китайцам Закрыли Доступ К Живому Журналу
19 Dec, 24 -
Приложения Для Пк В Chrome Store
19 Dec, 24 -
Новый Шаг Яндекса В Борьбе С Продажей Ссылок
19 Dec, 24 -
Выпуск Firefox 23
19 Dec, 24