Загрузка сообщения, показанного в $ routeChangeStart, исчезает, как только LESS CSS начинает компилировать

Question

Загрузка сообщения, показанного в $ routeChangeStart, исчезает, как только LESS CSS начинает компилировать

0

Я создал довольно тяжелое приложение AngularJS, которое имеет множество зависимостей (JS-библиотеки и LESS css). При попадании URL-адреса приложения он определяет маршрут на основе состояния входа и перенаправляет маршрут входа в систему, если он не вошел в систему. Проблема заключается в том, что до тех пор, пока маршрут не перенаправлен, а HTML не загружен, страница остается полностью пустой для почти 4 -5 секунд, что выглядит очень запутанным.

Я попытался реализовать некоторое сообщение, используя $ routeChangeStart, но это не дает мне желаемых результатов. Я хочу получить сообщение "Загрузка...", как только URL-адрес будет удален, и пока приложение не будет перенаправлено, а HTML полностью загружен, но сообщение исчезает через пару миллисекунд.

$rootScope.$on('$routeChangeStart', function() {
  $rootScope.layout.loading = true;
});

$rootScope.$on('$routeChangeSuccess', function() {
  $rootScope.layout.loading = false;
});

UPDATE: проблема заключается в том, что CSS-код LESS компилируется и загружается, чтобы подготовить страницу. Текст индикатора загрузки корректно работает без LESS CSS (см. Этот Plunker)

В фактическом приложении я поместил текст индикатора загрузки после тега body, и после текста индикатора появилось много сценариев JS (включая LESS.js). Индикатор загрузки показывает, пока LESS не начнет компиляцию и не исчезнет после начала компиляции. Любое решение?

Rishabh 25 июль 2016, в 19:09

Источник

Теги:

angularjs

less

1 ответ

Ещё вопросы

MechanicalCoder · Answer 1 · 2016-07-25T15-30-00.000Z

Я считаю, что метод углового решения.run() может решить вашу проблему, Run block - это самая близкая вещь в Angular для основного метода. Блок запуска - это код, который необходимо запустить, чтобы запустить приложение. Он выполняется после того, как все службы настроены и инжектор создан.

Вы можете попробовать следующее: показать/скрыть загрузчик, когда приложение загружается.

.run(['$location', function ($location) {    
		// if your application URL os https://myApplication/Login/loginStatus
        if ($location.path() === '' && $location.$$absUrl.indexOf('/loginStatus') > -1) {
			// show loading
			// some code here to return route based on login status for example,
			var promise = getLoginStatus();
			promise.then(function (result) {
				// redirect to the route as per login status			
				$location.path(result); //Where result is route url.
				// hide loading			
			});			
        }
    }]);

Пожалуйста, смотрите обновленный вопрос.