angularJs实现倒计时并自动跳转页面

最新推荐文章于 2022-01-23 18:42:58 发布

颜海滨

最新推荐文章于 2022-01-23 18:42:58 发布

阅读量945

点赞数

分类专栏：技术分享文章标签： angularjs 前端定时器 404

本文链接：https://blog.csdn.net/weixin_42174361/article/details/82502240

版权

技术分享专栏收录该内容

22 篇文章 0 订阅

订阅专栏

angularJs实现自定义404页面及倒计时自动化跳转页面经常是我们业务需求

# html 页面
<h3>
页面未找到
</h3>
<p>找不到您要查找的页面</p>
{{ data.result.countdownTime }}s 后自动跳转到导航页
<p>
<a href="/">返回导航页</a>
</p>

# controller  =>箭头函数是ES6写法 5s后自动跳转
angular.module("app").controller("errorPageCtrl", [
    "$scope",
    "$location",
    function ($scope, $location) {
        $scope.init = () => {
            $scope.data = {
                result: {
                    countdownTime: 5,
                }
            };
            $scope.countdown = setInterval(() => {
                $scope.data.result.countdownTime--;
                // 通知视图模型的变化
                $scope.$digest();
            }, 1000);

            setTimeout(() => {
                clearInterval($scope.countdown);
                $scope.$apply(() => {
                    // 填写要跳转的路径
                    $location.path("/")
                });
            }, 5000);
        };
        $scope.init();
    }]);

# 路由
angular.module("app").config((
    $routeProvider,
    $locationProvider) => {
    // 常量 html文件路径
    const templateUrl = "/xxx/xxx/templates";

    $routeProvider
        .when("/", {
            controller: "xxxCtrl",
            templateUrl: `${templateUrl}/xxx.html`
        }
        .otherwise({
            controller: "errorPageCtrl",
            templateUrl: `${templateUrl}/404.html`
        });

});