码迷,mamicode.com
首页 > Web开发 > 详细

angularjs之插件ngRoute和ngAnimate

时间:2016-11-06 17:05:29      阅读:397      评论:0      收藏:0      [点我收藏+]

标签:idt   hang   接受   ng-repeat   leave   .com   www   isp   百度搜   

使用ngRoute和ngAnimate配合使用,可以实现页面切换的效果。

如果有使用过swiper,就知道这个效果是怎么样的。

代码:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-route.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-animate.js"></script>
    <style>
    body{
        margin:0;
        padding:0;
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    #p01{
        width: 100%;
        height: 100%;
        background: red;
    }
    #p02{
        width: 100%;
        height: 100%;
        background: green;
    }
    #p03{
        width: 100%;
        height: 100%;
        background: blue;
    }
    #p04{
        width: 100%;
        height: 100%;
        background: pink;
    }
    #p05{
        width: 100%;
        height: 100%;
        background: skyblue;
    }
    /*以下的ngAniamte插件的关键,因为它靠css来实现动画,
        可以不编写js代码;
        流程:
        为动画的容器添加选择器:如.container
        然后再这个选择器上实现动画
        .ng-enter出现时的样式->>
        (它们之间动画效果,需要自己去编写如添加过渡效果transition,在选择器上编写)
        ->>.ng-enter-active出现后的样式
        .ng-leave离开时的样式-->>.ng-leave-active离开后的样式

           这里ng-show无效 
       ng-if会移除dom,生成dom,而ng-show只是改变其display属性。 
       display来实现显示隐藏,在渲染过程中会对动画效果无效化 

        而它和ng-view,就无需添加这个指令,因为这个页面的切换也是动态删除和添加
    */
    .container{
        width: 100%;
        height: 100%;
        transition: 1s all;
        position: absolute;
        overflow: hidden;
    }
    .container.ng-enter{
        left: 100%;
    }
    .container.ng-enter-active{
        left:0%;
    }
    .container.ng-leave{
        left: 0%;
    }
    .container.ng-leave-active{
        left: -100%;
    }
    </style>
    <script>
        window.onload=function(){
            document.body.style.width=view().w+"px";
            document.body.style.height=view().h+"px";
        }
        // 全屏可视区的宽高
        function view(){
            return {w:document.documentElement.clientWidth,
                    h:document.documentElement.clientHeight};
        }
    </script>
</head>
<body>
    <div ng-controller="myCon" class="wrap">
    <!-- 使用锚点实现路径变换,哈希值 -->
        <a href="#shouye">首页</a>
        <a href="#ziyemian01">子页面01</a>
        <a href="#ziyemian02">子页面02</a>
        <a href="#ziyemian03">子页面03</a>
        <a href="#ziyemian04">子页面04</a>
        <!-- ng-view配合ngRoute一起使用,实现单页面效果 -->
        <div class="container" ng-view ></div>
    </div>
    <script>
    // 依赖注入插件ngAnimate,ngRoute
        var myApp=angular.module("myApp",["ngAnimate","ngRoute"])
        // 在配置中规定路由规则
        .config([‘$routeProvider‘,function($routeProvider){
    
    $routeProvider
        .when(‘/shouye‘,{
            template : ‘<p id="p01">首页的内容</p>‘
        })
        // 路由路径
        .when(‘/ziyemian01‘,{
            template : ‘<p id="p02">子页面01</p>‘
        })
        // 路由路径
        .when(‘/ziyemian02‘,{
            template : ‘<p id="p03">子页面02</p>‘
        })
        // 路由路径
        .when(‘/ziyemian03‘,{
            template : ‘<p id="p04">子页面03</p>‘
        })
        // 路由路径
        .when(‘/ziyemian04‘,{
            template : ‘<p id="p05">子页面04</p>‘
        })
        // 重定向路径,就是默认路径
        .otherwise({
            redirectTo : ‘/shouye‘
        });
    
}])
        .controller("myCon",["$scope",function($scope){

        }])
    </script>
</body>
</html>

ngRoute方面的使用:传送门

ngAnimate和ng-repeat配合:

代码:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-animate.js"></script>
    <style>
    .listBox{
        transition: all 1s;
    }
    .listBox.ng-enter{
        opacity: 0;
    }
    .listBox.ng-enter-active{
        opacity: 1;
    }
    .listBox.ng-leave{
        display: none;
    }
    /*对所有元素同时应用,可能实际运用中需要有一个先后的渐变出现的效果,这时候可以设置ng-enter-stagger来实现.
    */
    .listBox.ng-enter-stagger{
        animation-delay:100ms; 
    }
    </style>
</head>
<body>
    <div ng-controller="myCon">
    <!-- ng-keyup事件指令 -->
        <input type="text" ng-model="text" ng-keyup="change(text)">
        <ul>
            <li class="listBox" ng-repeat="k in dataArr">{{k}}</li>
        </ul>
    </div>
    <script>
        var myApp=angular.module("myApp",["ngAnimate"])
        .controller("myCon",["$scope","$http",function($scope,$http){
            $scope.change=function(val){
                // $http和JQ里的$.ajax()工具使用方式类似
                $http({
                    // 跨域请求方式
                    method:"JSONP",
                    // 百度搜索,数据接口
                    url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=JSON_CALLBACK"
                    // 成功接受数据,第一个参数是数据(json格式)
                    // 这个函数可以接受四个参数,具体查看手册
                }).success(function(data){
                    $scope.dataArr=data.s;
                });
            }
        }])
    </script>
</body>
</html>

ngAnimate简单的使用方式:

代码:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angularjs-v1.5.9.js"></script>
    <script src="ngAnimate.js"></script>
    <style>
    .box{
        width:100px;
        height:100px;
        background: red;
        transition: 1s all;
    }
    .box.ng-enter{
        opacity: 0;
    }
    .box.ng-enter-active{
        opacity: 1;
    }
    .box.ng-leave{
        opacity: 1;
    }
    .box.ng-leave-active{
        opacity: 0;
    }
    </style>
</head>
<body>
    <div ng-controller="myCon">
    <!-- ng-model在复选框里使用时true,false值 -->
        <input type="checkBox" ng-model="bTure">
        <!-- 这里ng-show无效 -->
        <!-- ng-if会移除dom,生成dom,而ng-show只是改变其display属性。 -->
        <!-- display来实现显示隐藏,在渲染过程中会对动画效果无效化 -->
        <div ng-if="bTure" class="box">{{bTure}}</div>
    </div>
    <script>
        var myApp=angular.module("myApp",["ngAnimate"])
        .controller("myCon",["$scope",function($scope){
            $scope.bTure=true;
        }])
    </script>
</body>
</html>

 

其实这些都是简单的方式去使用插件,但由于他们配合起来使用就变复杂了一些。

 

angularjs之插件ngRoute和ngAnimate

标签:idt   hang   接受   ng-repeat   leave   .com   www   isp   百度搜   

原文地址:http://www.cnblogs.com/zhangzhicheng/p/6035427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!