AngularJS使用拦截器实现的loading功能完整实例
程序员文章站
2022-06-24 17:35:24
本文实例讲述了angularjs使用拦截器实现的loading功能。分享给大家供大家参考,具体如下:
本文实例讲述了angularjs使用拦截器实现的loading功能。分享给大家供大家参考,具体如下:
<!doctype html> <html lang="zh-cn" ng-app="myapp"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="jquery.min.js"></script> <script src="angular.js"></script> <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" > <style type="text/css"> .mask-loading .loading-icon { -webkit-animation: rotate 1s linear infinite; -o-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -20px 0 0 -20px; border-width: 5px; border-style: solid; border-color: #37c3aa #37c3aa #fff #fff; opacity: .9; border-radius: 20px; } @-webkit-keyframes rotate{ 0% {-webkit-transform:rotate(0)} 100% {-webkit-transform:rotate(360deg)} } @keyframes rotate{ 0% {transform:rotate(0)} 100% {transform:rotate(360deg)} } .mask-loading { position:fixed; top:0; right:0; bottom:0; left:0; background:0 0; z-index:9999; } </style> <script type="text/javascript" src="angular-ui-router.js"></script> <script type="text/javascript" src="angular-animate.js"></script> <script type="text/javascript"> var myapp = angular.module('myapp', ['ui.router', 'nganimate']); myapp.config(["$stateprovider", "$httpprovider", '$urlrouterprovider', function ($stateprovider, $httpprovider, $urlrouterprovider) { $stateprovider .state('a', { url: '/a', templateurl: "loadpath/a.html", controller: "acontroller" }) .state('b', { url: '/b', templateurl: "loadpath/b.html", controller: "bcontroller" }); $urlrouterprovider.otherwise('/'); $httpprovider.interceptors.push('myinterceptor'); }]); //loading myapp.factory('myinterceptor', ["$rootscope", function ($rootscope) { var timestampmarker = { request: function (config) { $rootscope.loading = true; return config; }, response: function (response) { $rootscope.loading = false; return response; } }; return timestampmarker; }]); myapp.controller('acontroller', function($scope) { $scope.page = "a"; }); myapp.controller('bcontroller', function($scope) { $scope.page = "b"; }); </script> </head> <body> <h1>index</h1> <div id="mask-loading" class="mask-loading" ng-if="loading" style="background-color: rgba(0, 0, 0, 0.17);"> <div class="loading-icon"></div> </div> <div ui-view></div> <a ui-sref="a">go to a.html</a> <br/> <a ui-sref="b">go to b.html</a> </body> </html>
更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
上一篇: 他们又不会说英语