在AngularJS中,可以使用$interval服务来实现在进度条达到100%后每5秒重新加载页面的功能。以下是一个示例代码:
HTML代码:
Welcome to my website!
This is the content of the page.
Loading...
JavaScript代码(app.js):
angular.module('myApp', [])
.controller('myController', function($scope, $interval) {
$scope.loading = true; // 初始化为加载状态
$scope.progress = 0; // 初始化进度为0
// 模拟进度条的增长
var intervalPromise = $interval(function() {
$scope.progress += 10;
if ($scope.progress >= 100) {
$scope.loading = false; // 进度达到100%,隐藏加载中的元素
$interval.cancel(intervalPromise); // 取消定时器
$interval(reloadPage, 5000); // 每5秒重新加载页面
}
}, 1000);
// 重新加载页面
function reloadPage() {
location.reload();
}
});
在上面的代码中,通过使用$interval服务定时更新进度条的值,当进度条达到100%后,隐藏加载中的元素,并使用$interval服务每5秒重新加载页面。