AngularJS 单页面应用中的 loading 效果实现

随着单页面应用的流行，用户对于网站的加载速度要求越来越高，因此在单页面应用中实现 loading 效果是非常必要的。本文将介绍如何在 AngularJS 单页面应用中实现 loading 效果。

1. 使用 ng-show 和 ng-hide

最简单的实现方式是使用 ng-show 和 ng-hide 指令。在页面的顶部和底部分别添加 div，当页面加载时显示顶部 div，页面加载完成后隐藏顶部 div，当页面发生请求时显示底部 div，请求完成后隐藏底部 div。

<div ng-show="loadingTop">加载中...</div>
<div ng-show="loadingBottom">加载中...</div>

在控制器中定义 loadingTop 和 loadingBottom 变量，并在请求开始和结束时修改变量的值。

// javascriptcn.com 代码示例
app.controller('myController', function($scope, $http) {
  $scope.loadingTop = true;
  $scope.loadingBottom = false;
  
  $http.get('/api/data')
    .then(function(response) {
      $scope.loadingTop = false;
      $scope.data = response.data;
    })
    .finally(function() {
      $scope.loadingBottom = false;
    });
});

这种实现方式比较简单，但是缺点是 loading 效果不够美观，用户体验不佳。

2. 使用 ng-class

为了让 loading 效果更加美观，可以使用 ng-class 指令。在页面中添加一个 div，使用 ng-class 根据 loading 变量的值动态添加不同的 class，从而实现不同的 loading 效果。

<div class="loading" ng-class="{'loading-show': loading}">
  <div class="loading-spinner"></div>
</div>

在控制器中定义 loading 变量，并在请求开始和结束时修改变量的值。

// javascriptcn.com 代码示例
app.controller('myController', function($scope, $http) {
  $scope.loading = true;
  
  $http.get('/api/data')
    .then(function(response) {
      $scope.data = response.data;
    })
    .finally(function() {
      $scope.loading = false;
    });
});

在 CSS 中定义 loading-show 和 loading-spinner 两个 class，实现 loading 效果。

// javascriptcn.com 代码示例
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

.loading-show {
  display: block;
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-top-color: #888;
  animation: loading-spinner 1s ease infinite;
}

@keyframes loading-spinner {
  to {
    transform: rotate(360deg);
  }
}

这种实现方式比较复杂，但是 loading 效果更加美观，用户体验更好。

3. 总结

本文介绍了两种在 AngularJS 单页面应用中实现 loading 效果的方式，分别是使用 ng-show 和 ng-hide 指令以及使用 ng-class 指令。在实际项目中，可以根据实际情况选择合适的方式实现 loading 效果，以提高用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65098d9295b1f8cacd43fff0