javascript – AngularJS的初始加载微调器

前端之家收集整理的这篇文章主要介绍了javascript – AngularJS的初始加载微调器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在我的应用程序的第一次加载时显示一个微调器,如: https://devart.withgoogle.com/

我试图通过服务模块这样做:

  1. angular.module('InitialLoad',[])
  2. .config(function ($httpProvider) {
  3. $httpProvider.responseInterceptors.push('myHttpInterceptor');
  4. var spinnerFunction = function (data,headersGetter) {
  5. $('#loading').fadeIn();
  6. return data;
  7. };
  8. $httpProvider.defaults.transformRequest.push(spinnerFunction);
  9. })
  10. .factory('myHttpInterceptor',function ($q,$window) {
  11. return function (promise) {
  12. return promise.then(function (response) {
  13. $('#loading').fadeOut(function(){
  14. $(this).remove();
  15. });
  16. return response;
  17. },function (response) {
  18. $('#loading').fadeOut(function(){
  19. $(this).remove();
  20. });
  21. return $q.reject(response);
  22. });
  23. };
  24. });

但是这有很多问题……首先是它不会监听它收听每个请求的第一个负载.它也没有显示和隐藏加载,就像在DevArt上完成它一样优雅,我使用jQuery来隐藏和显示加载微调器,而不是使用Angular Animate.

有人可以帮忙吗?澄清这是INITIAL app加载!而不是在后续请求中显示微调器.我用它来做到这一点:https://github.com/chieffancypants/angular-loading-bar但我想展示应用启动的不同之处.

解决方法

如果您想在AngularJS加载时隐藏您的应用程序,则默认您的微调器使用纯HTML显示,并使用ng-cloak隐藏应用程序的角度部分.

https://docs.angularjs.org/api/ng/directive/ngCloak

加载应用后,您可以使用ng-hide / ng-show关闭微调器.

  1. <div ng-controller="TopController">
  2. <div class="spinner" ng-hide="appLoaded"/>
  3. <div ng-cloak ng-view>
  4. ... All Angular view giblets go here...
  5. </div>
  6. </div>

这是一个工作示例:

http://jsfiddle.net/kLtzm93x/

猜你在找的JavaScript相关文章