<!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=http://www.3lian.com/edu/2017/05-17/"jquery.min.js"></script> <script src=http://www.3lian.com/edu/2017/05-17/"angular.js"></script> <link rel="stylesheet" href=http://www.3lian.com/edu/2017/05-17/"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=http://www.3lian.com/edu/2017/05-17/"angular-ui-router.js"></script> <script type="text/javascript" src=http://www.3lian.com/edu/2017/05-17/"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('http://www.3lian.com/'); $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>
共0条 [查看全部]相关评论
