随着单页面应用的流行，用户对于网站的加载速度要求越来越高，因此在单页面应用中实现 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 变量，并在请求开始和结束时修改变量的值。
-- -------------------- ---- -------
------------------------------ ---------------- ------ -
----------------- - -----
-------------------- - ------
----------------------
------------------------ -
----------------- - ------
----------- - --------------
--
------------------- -
-------------------- - ------
---
---这种实现方式比较简单，但是缺点是 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 变量，并在请求开始和结束时修改变量的值。
-- -------------------- ---- -------
------------------------------ ---------------- ------ -
-------------- - -----
----------------------
------------------------ -
----------- - --------------
--
------------------- -
-------------- - ------
---
---在 CSS 中定义 loading-show 和 loading-spinner 两个 class，实现 loading 效果。
-- -------------------- ---- -------
-------- -
--------- ------
---- --
----- --
------ -----
------- -----
----------- ------- -- -- -----
-------- -----
-------- -----
-
------------- -
-------- ------
-
---------------- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
------ -----
------- -----
-------------- ----
------- --- ----- -----
----------------- -----
---------- --------------- -- ---- ---------
-
---------- --------------- -
-- -
---------- ---------------
-
-这种实现方式比较复杂，但是 loading 效果更加美观，用户体验更好。
3. 总结
本文介绍了两种在 AngularJS 单页面应用中实现 loading 效果的方式，分别是使用 ng-show 和 ng-hide 指令以及使用 ng-class 指令。在实际项目中，可以根据实际情况选择合适的方式实现 loading 效果，以提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65098d9295b1f8cacd43fff0