angularjs - Loading message shown on $routeChangeStart disappears as soon as LESS CSS starts compiling -
i've created pretty heavy angularjs application has many dependencies (js libraries , less css). when application url hit, determines route based on login status , redirects login route if not logged in. problem is, until route redirected to, , html loaded, page remains blank 4-5 seconds, looks confusing.
i tried implement message using $routechangestart it's not giving me desired results. want 'loading..." message url hit , until app routed , html loaded. message disappearing after couple of milliseconds.
$rootscope.$on('$routechangestart', function() { $rootscope.layout.loading = true; }); $rootscope.$on('$routechangesuccess', function() { $rootscope.layout.loading = false; });
update: problem seems less css being compiled , loaded page ready. loading indicator text correctly works without less css (see this plunker)
in actual application, have put loading indicator text after body tag, , there many js scripts (including less.js) after indicator text. loading indicator shows until less starts compiling, , disappears after compilation starts. solution this?
i believe .run() method of angular can solve issue, run blocks closest thing in angular main method. run block code needs run kick start application. executed after of services have been configured , injector has been created.
you can try following show/hide loader when application loading.
.run(['$location', function ($location) { // if application url os https://myapplication/login/loginstatus if ($location.path() === '' && $location.$$absurl.indexof('/loginstatus') > -1) { // show loading // code here return route based on login status example, var promise = getloginstatus(); promise.then(function (result) { // redirect route per login status $location.path(result); //where result route url. // hide loading }); } }]);
Comments
Post a Comment