Angularjs как правильнее сделать загрузочный экран?

Question

[Stricker]

Приветствую, такой вопрос, есть вот у нас сервис stateManager и init,
init запускается после того как все сервисы прогрузились, и запускает инициализацию всех основных сервисов оперируя очередью сервисов в stateManager, и т.е. за время пока все это делается нам нужно отображение загрузочного экрана. По началу он был просто как stateManager -> $rootScope.loaders.init.active = true. В темплайте от этой переменной зависят два элемента, первое сам загрузчик и второй сам контент страницы. Но вот задался вопросом - как если что мне контролировать загрузочник, не сервисом же это делать, нужен контроллер, но тогда и по логике вроде как его отображение должен отвечать контроллер, а не сервис. Но незадача, ведь еще и контент зависит от rootScope переменной, а контроллер этот же к нему приделывать не хочется.
Как правильнее всего решить эту задачу? Все же контролировать отображение через rootScope? Но тогда и в контроллере придется например еще и с rootScope работать, например если хотим отложить появление на N сек после всей инициализации.
Заранее благодарен.

Answer 1

[Сергей Протько]

Ничего не понял... Если под загрузочным экраном вы подразумеваете спиннер, можно сделать его глобально на ивентах (например показывать спиннер по $stateChangeStart и прятать по $stateChangeSuccess или $stateChangeError. Так же такие вещи стоит делать в ресолверах для контроллеров. Они запускаются как раз таки между $staeChangeStart и Success и возвращают промисы. Вы можете просто вклиниться в цепочку промисов и отловить что произошло что-то.

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

Можно по всякому сделать собственно...

Comments

[Stricker]

Неправильно поняли меня, это загрузочный экран первоначальной инициализации, т.е. авторизация и всякие другие процессы. Вы говорите про спиннер который будет обслуживать переходы между роутами и что-то вроде этого. Вроде все понятно объяснил что мне нужно

[Stricker]

Сча попробую кодом показать.
stateManager -> $rootScope.loader = {
init: {
active: true,
current: {}
}
};

И HTML ->



Загрузка...





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

[Stricker]

Извиняюсь, вот через code

$rootScope.loader = {
            init: {
                active: true,
                current: {}
            }
        };

<div id="loader-init" ng-show="loader.init.active">
            <div class="logo pulse"></div>
            <p>Загрузка...</p>
        </div>

        <div class="wrapper animate-show-hide ng-cloak" ng-hide="loader.init.active">
        </div>

[Сергей Протько]

@Stricker: опять же ресолвы, и нужно как-то его отображать еще до того как начнет работать JS.

[Сергей Протько]

@Stricker: у меня есть подозрение что вы придумали себе какую-то странную штуку... что такое stateManager?

[Stricker]

Вот оба сервиса
pastebin.com/DM6130qW

[Сергей Протько]

@Stricker: оформите пример на планкере: plnkr.co
будет проще, я смогу форкнуть к примеру и поменять исходники.

[Stricker]

@Fesor: Вот, без init сервиса правда, но вроде все понятно - plnkr.co/edit/ztzHWWZR2O5zPR0ejmaC?p=preview

Т.е. этот stateManager сейчас как менеджмент панель сервисами, и через него управляется этот загрузчик. А хотелось бы в контроллере управлять им, т.е. его отображением. а бизнес-логику оставить в сервисе

Answer 2

[_ _]

Используйте модуль deferredBootstrap, чтобы загрузить все необходимые данные перед инициализацией приложения, не надо будет городить эти самые очереди.

Comments

[Stricker]

Спасибо, полезная штука, но увы в моем случае не подходит

[_ _]

@Stricker Я посмотрел ваш код. Это именно то, что вам нужно.

[Stricker]

@AMar4enko: т.е. все инит функции вынести в провайдер чтобы можно было его использовать на этом моменте и там получить данные? Просто данные юзера у меня не в константах хранятся

[Stricker]

@AMar4enko: ибо цепочка мне нужна, например чтобы получить данные для коннекта к сокетам - нужно инициализировать вк и достать из него данные, после некоторые из этих данных мы отправляем при подключение к сокетам, а уже после подключения запрашиваем все данные юзера

[_ _]

@Stricker, опишите подробно всю последовательность действий, какие данные откуда берутся и где используются

[Stricker]

@AMar4enko:
1. vkInit - инициализурется, после VK.loadParams(document.location.href);
2. socketInit - из VK сервиса вызывает getParams и получает нужные данные для коннекта, т.е. viewer_id, access_token и подключается
3. getData - Если подключение к socket прошло успешно, получаем данные user'a - количество сообщений, логин, и остальные данные, которые в любой момент могут поменяться, и тут конснтанта не подойдет, в данный момент она хранится просто как объект в методе getData - data = { user: {name: '', etc} }
4. После того как все сервисы удалены из очереди, происходит stateManager.init.clean, который очищает очередь и задает переменной $rootScope.loaders.init.active = false;