首页 > 代码库 > 单页应用跳转ui-view,$stateProvider,$urlRouterProvider

单页应用跳转ui-view,$stateProvider,$urlRouterProvider

2024-09-16 11:48:18   220人阅读

<!DOCTYPE HTML>
<html ng-app="myApp">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
        <title>angular animation-ngView例子</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css">
        <style type="text/css">
            .container {
                -webkit-perspective: 500;
                -moz-perspective: 500;
                -ms-perspective: 500;
                perspective: 500;
                position: relative;
            }
            
            .slide.ng-leave {
                position: relative;
            }
            
            .slide.ng-enter {
                position: absolute;
            }
            
            .slide.ng-enter,
            .slide.ng-leave {
                -webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.3s ease-in;
                -moz-transition: -moz-transform 0.3s ease-in, opacity 0.3s ease-in;
                -o-transition: -o-transform 0.3s ease-in, opacity 0.3s ease-in;
                transition: transform 0.3s ease-in, opacity 0.3s ease-in;
            }
            
            .slide.ng-enter,
            .slide.ng-leave.ng-leave-active {
                -webkit-transform: scaleX(0.0001);
                -o-transform: scaleX(0.0001);
                transform: scaleX(0.0001);
                opacity: 0;
            }
            
            .slide,
            .slide.ng-enter.ng-enter-active {
                -webkit-transform: scaleX(1);
                -o-transform: scaleX(1);
                transform: scaleX(1);
                opacity: 1;
            }
        </style>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.3.0-beta.8/angular-animate.min.js"></script>
        <script type="text/javascript" src="http://cdn.staticfile.org/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
    </head>

    <body>
        <header role="banner" id="top" class="navbar navbar-static-top navbar-inverse">
            <div class="container">
                <nav role="navigation" class="collapse navbar-collapse ">
                    <ul class="nav navbar-nav">
                        <li ui-sref-active="active">
                            <a href ui-sref="home">Home</a>
                        </li>
                        <li ui-sref-active="active">
                            <a href ui-sref="about">About</a>
                        </li>
                        <li ui-sref-active="active">
                            <a href ui-sref="contacts">Contacts</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <!--//-->
        <div class="container">
            <div class="slide" ui-view></div>
        </div>
        <!--//-->
        <script type="text/javascript">
            var myApp = angular.module("myApp", ["ui.router", "ngAnimate"]);
            myApp.config([‘$stateProvider‘, ‘$urlRouterProvider‘,
                function($stateProvider, $urlRouterProvider) {
                    $stateProvider.state("home", {
                        url: "/home",
                        template: "<h1>三十年功尘与土</h1>"
                    }).state("about", {
                        url: "/about",
                        template: "<h1>八千里路云和月</h1>"
                    }).state("contacts", {
                        url: "/contacts",
                        template: "<h1>莫等闲，白了少年头，空悲切</h1>"
                    });
                    $urlRouterProvider.otherwise("/home");
                }
            ]);
        </script>
    </body>

</html>

 

单页应用跳转ui-view,$stateProvider,$urlRouterProvider


联系
我们