LESS CSSがコンパイルを開始するとすぐに、$ routeChangeStartに表示されるメッセージが表示されなくなります

Question

多くの依存関係（JSライブラリとLESS CSS）を持つかなり重いAngularJSアプリケーションを作成しました。アプリケーション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がなくても正しく動作します（this Plunker参照）

実際のアプリケーションでは、bodyタグの後ろにローディングインジケータテキストを配置しています、インジケータテキストの後ろには多くのJSスクリプト（LESS.jsを含む）があります。LESSがコンパイルを開始するまで、ローディングインジケータが表示され、コンパイルが開始されると消えます。

Answer 1

私は角度の.run（）メソッドがあなたの問題を解決できると信じています。ランブロックは、メインメソッドの角に最も近いものです。実行ブロックは、アプリケーションを起動するために実行する必要があるコードです。すべてのサービスが設定され、インジェクタが作成された後に実行されます。

アプリケーションの読み込み中にローダーを表示/非表示にすることができます。

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