angularjs之插件ngRoute和ngAnimate

使用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>

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

时间: 2024-10-11 08:09:44

angularjs之插件ngRoute和ngAnimate的相关文章

angularJS 常用插件指令

长时间没有登入博客园了,今天突然想了想,当初开这个的目的,其实就是为了记录你当下的一个状态和累计一些问题,所以记录这些还是很有意义,毕竟不是什么牛,靠脸又吃不饱的这个年代,需要留下一些东西给自己看也好 给需要的人看也好. 好了言归正传,最近在接触angular JS,也碰到了很多问题,可能以后会更多的往这个方向学习,今天给大家分享一些angularJS的插件 图片视频类 angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery.imageloaded

AngularJS Cordova插件介绍

ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用设备能力,即可以在AngularJs代码中访问设备能力Api. 根据我的经验,在cordova插件的sucess和error js回调方法中,是无法使用 angularjs的$scope对象和注入的方法的,只能访问全局的方法和变量,这样会导致很多麻烦,必须使用传统的js方法写很多难看的代码.使用ngCordova应该可以解决这个问题. 目前ngCord

AngularJs练习Demo17 ngRoute

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <script src="../Scri

AngularJS常用插件与指令收集

使用AngularJS有差不多一年时间了,前前后后也用了不少库和指令,整理了一下,分成四大类列出.有demo地址的,就直接连接到demo地址,其它的直接链到github托管库中. 图片视频类 angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery.imageloaded和Masonry angular-deckgrid 另一个照片瀑布流解决方案 ngImgCrop 图片剪裁工具 ngVideo 播放器,直接播放指定地址的mp4,控制按钮美观度远甩朝

AngularJs练习Demo16 ngRoute

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <meta charset="utf-8" /> 7 <script src="../Scrip

angularJS的插件使用

$uibModal&&$uibModalInstance $uibModal和$uibModalInstance是一款angularJS的弹窗控件,github地址 http://angular-ui.github.io/bootstrap/#/modal $uibModal:负责调出弹窗 $uibModalInstance:弹窗实例 例子如下: 弹窗 template: 1 <script type="text/ng-template" id="det

Angularjs 表格插件的使用

对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid.相关的介绍可以参考http://zhenghaoju700.blog.163.com/blog/static/135859518201521343938228/ 对于一般的项目来说 简单的显示表格用bootstrap的相关插件或者自己写也行,对于分页,我尝试了用smart-tablel这个组件来写的

AngularJS分页插件

1.angular.module('app',['mePagination']) .controller('myController',['$scope',function($scope){ $scope.myPage={ currentPage:1,//访问第几页数据,从1开始 totalItems:0,//数据库中总共有多少条数据 itemsPerPage: 30,//默认每页展示多少条数据,可更改 pagesLength: 15, perPageOptions: [10, 20, 30,

理解AngularJS ngRoute

一般来说,我们认为AngularJS是一套前端的MVC框架.那么,为了实现视图的中转,肯定会涉及到路由的概念.这里我们就来说说有关AngularJS的路由--ngRoute. 序 个人了解到AngularJS,是由于在寻找可以动态利用Ajax从服务器端取得部分页面这一功能而找到EmberJS,而后又根据EmberJS找到的AngularJS.而在AngularJS中,实现这一功能的,就是ngRoute. 所以,个人与AngularJS的结缘,是由于ngRoute一点也不为过. 理解 Angula