javascript - Initial loading spinner for AngularJS -
i want show spinner on first load of application like: https://devart.withgoogle.com/
i've attempted via services module so:
angular.module('initialload', []) .config(function ($httpprovider) { $httpprovider.responseinterceptors.push('myhttpinterceptor'); var spinnerfunction = function (data, headersgetter) { $('#loading').fadein(); return data; }; $httpprovider.defaults.transformrequest.push(spinnerfunction); }) .factory('myhttpinterceptor', function ($q, $window) { return function (promise) { return promise.then(function (response) { $('#loading').fadeout(function(){ $(this).remove(); }); return response; }, function (response) { $('#loading').fadeout(function(){ $(this).remove(); }); return $q.reject(response); }); }; });
but there number of things wrong this... first of doesn't listen first load listens every request. doesn't show , hide loading elegant way it's been done on devart, , i'm using jquery hide , show loading spinner instead of using angular animate.
can help? clarify initial app load! , not showing spinner on subsequent requests. use that: https://github.com/chieffancypants/angular-loading-bar want show splash app start different.
if want hide app while angularjs loads default spinner being displayed using plain html, , use ng-cloak hide angular portions of application.
https://docs.angularjs.org/api/ng/directive/ngcloak
once app loads can turn off spinner using ng-hide/ng-show.
<div ng-controller="topcontroller"> <div class="spinner" ng-hide="apploaded"/> <div ng-cloak ng-view> ... angular view giblets go here... </div> </div>
here working example:
Comments
Post a Comment