<!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的更多相关文章

  1. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

  2. 【原创】Ionic单页应用跳转外链，构造路由返回的解决办法及代码

    在开发广汽菲克微信企业号的填单审批webApp的时候出现了一个问题: 单据是带有附件的,而且存在各种不同的格式,需要后台处理后给前台链接地址,点击预览,微信浏览器的特性就是只能存在一个浏览器窗口, 这 ...

  3. 基于VUE的SPA单页应用开发－加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  4. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  5. 单页Web应用优缺点

    一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...

  6. 【单页应用之通信机制】view之间应该如何通信

    前言 在单页应用中,view与view之间的通信机制一直是一个重点,因为单页应用的所有操作以及状态管理全部发生在一个页面上 没有很好的组织的话很容易就乱了,就算表面上看起来没有问题,事实上会有各种隐忧 ...

  7. AnjularJs的增删改查(单页网站)

    2016.6.4 学习文献: 你的第一个AngularJS应用:https://segmentfault.com/a/1190000000347412 AngularJS 提交表单的方式:http:/ ...

  8. [译]用AngularJS构建大型ASP.NET单页应用（二）

    原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客 ...

  9. 单页Web应用：

    概念: Web应用程序: WEB应用程序一般是B(浏览器)/S(服务器)模式.Web应用程序首先是“应用程序”,和用标准的程序语言,如C.C++等编写出来的程序没有什么本质上的不同.然而Web应用程序 ...

随机推荐

  1. linux shell 找端口号及对应的进程

    #!/bin/bash#author:zhongyulin#crteate-time:2016-10-20 netstat -lnpt|grep -v grep>/tmp/script/nets ...

  2. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. JS——控制标记的样式

    1.定义一个div,宽度为100px,高度为100px,背景色为粉色. 定义一个事件,鼠标移入时背景色变为蓝色,宽度变为200px. 定义一个事件,鼠标移出时背景色变为红色. html文件: < ...

  4. HTML的语义化，你需要深入了解

    有关HTML的一些基础课程,很多网站都有讲,于我而言,真正实践起来,我只要求我能够让它表现出我所想要的结果即可.然而,这种要求,对于后期的维护与测试,真的是......想起日前我们所做的这个项目,那里 ...

  5. 老李分享：android app自动化测试工具合集

    老李分享:android app自动化测试工具合集   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨 ...

  6. 解决IE6下 PNG图片有背景问题

    IE6下有时候png格式的图片会存在背景的问题,以下是我常用的解决办法: <!--[if IE 6]> <script src="js/DD_belatedPNG_0.0. ...

  7. .Net Core MVC 过滤器（一）

    1.过滤器   过滤器运行在MVC Action Invocation Pipeline(MVC Action 请求管道),我们称它为Filter Pipleline(过滤器管道),Filter Pi ...

  8. 使用WebView监控网页加载状况，PerformanceMonitor，WebViewClient生命周期

    原理:WebView加载Url完成后,注入js脚本,脚本代码使用W3C的PerformanceTimingAPI, 往js脚本传入一个Android对象(代码中为AndroidObject),在js脚 ...

  9. C语言中关于三目运算符的注意事项

    C语言中常见的条件运算符?:在运算符优先级中排行13.部分时候可以代替if--else语句,使代码更加简洁.但是更容易隐含一些不易觉察的错误. 最近接了一个项目,本来通信协议部分很简单,自己的STM3 ...

  10. HTML和CSS的知识点

    HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!- ...