Несколько Полезных Трюков Angularjs Для Новичков

При создании приложений на 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

Вместе с данным постом часто просматривают: