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

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

代码：

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js"></script>
  7.     <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-route.min.js"></script>
  8.     <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-animate.js"></script>
  9.     <style>
  10.     body{
  11.         margin:0;
  12.         padding:0;
  13.         position: relative;
  14.         width: 100%;
  15.         height: 100%;
  16.         overflow: hidden;
  17.     }
  18.  
  19.     #p01{
  20.         width: 100%;
  21.         height: 100%;
  22.         background: red;
  23.     }
  24.     #p02{
  25.         width: 100%;
  26.         height: 100%;
  27.         background: green;
  28.     }
  29.     #p03{
  30.         width: 100%;
  31.         height: 100%;
  32.         background: blue;
  33.     }
  34.     #p04{
  35.         width: 100%;
  36.         height: 100%;
  37.         background: pink;
  38.     }
  39.     #p05{
  40.         width: 100%;
  41.         height: 100%;
  42.         background: skyblue;
  43.     }
  44.     /*以下的ngAniamte插件的关键，因为它靠css来实现动画，
  45.         可以不编写js代码；
  46.         流程：
  47.         为动画的容器添加选择器：如.container
  48.         然后再这个选择器上实现动画
  49.         .ng-enter出现时的样式->>
  50.         (它们之间动画效果，需要自己去编写如添加过渡效果transition，在选择器上编写)
  51.         ->>.ng-enter-active出现后的样式
  52.         .ng-leave离开时的样式-->>.ng-leave-active离开后的样式

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

  1.         而它和ng-view，就无需添加这个指令，因为这个页面的切换也是动态删除和添加
  2.     */
  3.     .container{
  4.         width: 100%;
  5.         height: 100%;
  6.         transition: 1s all;
  7.         position: absolute;
  8.         overflow: hidden;
  9.     }
  10.     .container.ng-enter{
  11.         left: 100%;
  12.     }
  13.     .container.ng-enter-active{
  14.         left:0%;
  15.     }
  16.     .container.ng-leave{
  17.         left: 0%;
  18.     }
  19.     .container.ng-leave-active{
  20.         left: -100%;
  21.     }
  22.     </style>
  23.     <script>
  24.         window.onload=function(){
  25.             document.body.style.width=view().w+"px";
  26.             document.body.style.height=view().h+"px";
  27.         }
  28.         // 全屏可视区的宽高
  29.         function view(){
  30.             return {w:document.documentElement.clientWidth,
  31.                     h:document.documentElement.clientHeight};
  32.         }
  33.     </script>
  34. </head>
  35. <body>
  36.     <div ng-controller="myCon" class="wrap">
  37.     <!-- 使用锚点实现路径变换，哈希值 -->
  38.         <a href="#shouye">首页</a>
  39.         <a href="#ziyemian01">子页面01</a>
  40.         <a href="#ziyemian02">子页面02</a>
  41.         <a href="#ziyemian03">子页面03</a>
  42.         <a href="#ziyemian04">子页面04</a>
  43.         <!-- ng-view配合ngRoute一起使用，实现单页面效果 -->
  44.         <div class="container" ng-view ></div>
  45.     </div>
  46.     <script>
  47.     // 依赖注入插件ngAnimate,ngRoute
  48.         var myApp=angular.module("myApp",["ngAnimate","ngRoute"])
  49.         // 在配置中规定路由规则
  50.         .config(['$routeProvider',function($routeProvider){
  51.  
  52.     $routeProvider
  53.         .when('/shouye',{
  54.             template : '<p id="p01">首页的内容</p>'
  55.         })
  56.         // 路由路径
  57.         .when('/ziyemian01',{
  58.             template : '<p id="p02">子页面01</p>'
  59.         })
  60.         // 路由路径
  61.         .when('/ziyemian02',{
  62.             template : '<p id="p03">子页面02</p>'
  63.         })
  64.         // 路由路径
  65.         .when('/ziyemian03',{
  66.             template : '<p id="p04">子页面03</p>'
  67.         })
  68.         // 路由路径
  69.         .when('/ziyemian04',{
  70.             template : '<p id="p05">子页面04</p>'
  71.         })
  72.         // 重定向路径，就是默认路径
  73.         .otherwise({
  74.             redirectTo : '/shouye'
  75.         });
  76.  
  77. }])
  78.         .controller("myCon",["$scope",function($scope){
  79.  
  80.         }])
  81.     </script>
  82. </body>
  83. </html>

ngRoute方面的使用：传送门

ngAnimate和ng-repeat配合：

代码：

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular.min.js"></script>
  7.     <script src="http://cdn.bootcss.com/angular.js/1.3.0/angular-animate.js"></script>
  8.     <style>
  9.     .listBox{
  10.         transition: all 1s;
  11.     }
  12.     .listBox.ng-enter{
  13.         opacity: 0;
  14.     }
  15.     .listBox.ng-enter-active{
  16.         opacity: 1;
  17.     }
  18.     .listBox.ng-leave{
  19.         display: none;
  20.     }
  21.     /*对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的效果，这时候可以设置ng-enter-stagger来实现.
  22.     */
  23.     .listBox.ng-enter-stagger{
  24.         animation-delay:100ms;
  25.     }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div ng-controller="myCon">
  30.     <!-- ng-keyup事件指令 -->
  31.         <input type="text" ng-model="text" ng-keyup="change(text)">
  32.         <ul>
  33.             <li class="listBox" ng-repeat="k in dataArr">{{k}}</li>
  34.         </ul>
  35.     </div>
  36.     <script>
  37.         var myApp=angular.module("myApp",["ngAnimate"])
  38.         .controller("myCon",["$scope","$http",function($scope,$http){
  39.             $scope.change=function(val){
  40.                 // $http和JQ里的$.ajax()工具使用方式类似
  41.                 $http({
  42.                     // 跨域请求方式
  43.                     method:"JSONP",
  44.                     // 百度搜索,数据接口
  45.                     url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=JSON_CALLBACK"
  46.                     // 成功接受数据，第一个参数是数据（json格式）
  47.                     // 这个函数可以接受四个参数，具体查看手册
  48.                 }).success(function(data){
  49.                     $scope.dataArr=data.s;
  50.                 });
  51.             }
  52.         }])
  53.     </script>
  54. </body>
  55. </html>

ngAnimate简单的使用方式：

代码：

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="angularjs-v1.5.9.js"></script>
  7.     <script src="ngAnimate.js"></script>
  8.     <style>
  9.     .box{
  10.         width:100px;
  11.         height:100px;
  12.         background: red;
  13.         transition: 1s all;
  14.     }
  15.     .box.ng-enter{
  16.         opacity: 0;
  17.     }
  18.     .box.ng-enter-active{
  19.         opacity: 1;
  20.     }
  21.     .box.ng-leave{
  22.         opacity: 1;
  23.     }
  24.     .box.ng-leave-active{
  25.         opacity: 0;
  26.     }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div ng-controller="myCon">
  31.     <!-- ng-model在复选框里使用时true，false值 -->
  32.         <input type="checkBox" ng-model="bTure">
  33.         <!-- 这里ng-show无效 -->
  34.         <!-- ng-if会移除dom，生成dom，而ng-show只是改变其display属性。 -->
  35.         <!-- display来实现显示隐藏，在渲染过程中会对动画效果无效化 -->
  36.         <div ng-if="bTure" class="box">{{bTure}}</div>
  37.     </div>
  38.     <script>
  39.         var myApp=angular.module("myApp",["ngAnimate"])
  40.         .controller("myCon",["$scope",function($scope){
  41.             $scope.bTure=true;
  42.         }])
  43.     </script>
  44. </body>
  45. </html>

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

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

  1. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  2. angularJS 常用插件指令

    长时间没有登入博客园了,今天突然想了想,当初开这个的目的,其实就是为了记录你当下的一个状态和累计一些问题,所以记录这些还是很有意义,毕竟不是什么牛,靠脸又吃不饱的这个年代,需要留下一些东西给自己看也好 ...

  3. 转AngularJS路由插件

    AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...

  4. AngularJs练习Demo17 ngRoute

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. AngularJS 路由：ng-route 与 ui-router

    AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL. 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化, ...

  6. AngularJS Best Practices: ngRoute

    app/----- components/---------- users/--------------- controllers/-------------------- users.control ...

  7. AngularJs练习Demo16 ngRoute

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. angularjs上传图片插件使用

    一. angurlajs 相关 远程 jar 包 https://code.angularjs.org/angular-1.0.1.min.js 二. 正文 1. html 部分 <!-- 需要 ...

  9. angularJS的插件使用

    $uibModal&&$uibModalInstance $uibModal和$uibModalInstance是一款angularJS的弹窗控件,github地址 http://an ...

随机推荐

  1. 注意ArrayAdapter的Add()方法

    ArrayAdapter类可以作为ListView等的适配器资源,并且可以动态向适配器中添加新的数据,这就是ArrayAdapter.Add()方法的作用.但是在使用该方法时如果出错,那就需要检查Ar ...

  2. Android 断点续传 思路

    大部分http服务器本身是可以支持range字段和断点续传的.另外 http返回206字段表示支持断点续传. 但是遇到支持的服务器的时候,就需要手动去处理断点续传的功能. 客户端在请求文件的时候添加 ...

  3. .PRT extension and multiple NX versions

    http://nxway.blogspot.ca/2007/10/prt-extension-and-multiple-nx-versions.html To open prt files with ...

  4. [Leetcode]String to Integer (atoi) 简易实现方法

    刚看到题就想用数组做,发现大多数解也是用数组做的,突然看到一个清新脱俗的解法: int atoi(const char *str) { ; int n; string s(str); istrings ...

  5. wampserver 2.5 首页链接问题,wampserver Your Projects

    在wampserver 2.5之后,在首页的Your projects里面,链接的地址为http://直接加你的系统名称,会导致无法访问, 正常的应该为http://localhost+你的系统名称, ...

  6. 为什么没调用 didRegisterForRemoteNotificationsWithDeviceToken 和 didFailToRegisterForRemoteNotificationsWithError

    一步一步按照网上 push notification 教程走下来,发现didRegisterForRemoteNotificationsWithDeviceToken 和 didFailToRegis ...

  7. 编码符_new

    begin#6BE3803ED5339EBA1028EF9FC2BBD85F196391DFC603EAE8B10BA25D0B69029667A9BD2D914CE59A26EF5ECF370D5C ...

  8. Oracle的update语句优化研究

    最近研究sql优化,以下文章转自互联网: 1.     语法 单表:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 如:update t_join_situation s ...

  9. MVC 伪静态

    1.config <system.webServer> <validation validateIntegratedModeConfiguration="false&quo ...

  10. AMD加载器实现笔记（五）

    前几篇文章对AMD规范中的config属性几乎全部支持了,这一节主要是进一步完善.到目前为止我们的加载器还无法处理环形依赖的问题,这一节就是解决环形依赖. 所谓环形依赖,指的是模块A的所有依赖项的依赖 ...