本文主要涉及了ngAnimation和ngTouch模块，自由男人讲的比较少，估计要用的时候还要更加系统的学习一下。

一、安装

　　

　　没错，就是酱紫。

二、玩玩动画

　　

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>route test</title>

    <style type="text/css">

        .ngFadeIn.ng-enter{

            transition: .3s linear all;

            opacity: 0;

            background: red;

        }

        .ngFadeIn.ng-enter-active{

            background: white;

            opacity: 1;

        }

    </style>

</head>

<body ng-controller="getCtrl">

    <h1>This is fixed part</h1>

    <ul>

        <li><a href="./">home</a></li>

        <li><a href="./#!/page1/{{1}}">page1</a></li>

        <li><a href="./#!/page2/{{2}}">page2</a></li>

        <li><a href="./#!/page3/{{3}}/我是一个小傻瓜/乌拉啦五">page3</a></li>

    </ul>

    <div>参数id为:{{id || "unknown"}}</div>

    <div>参数data为:{{data || "unknown"}}</div>

    <div ng-view class="ngFadeIn"></div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>

    <script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>

    <script type="text/javascript" src="../node_modules/angular-animate/angular-animate.min.js"></script>

    <script type="text/javascript">

        angular.module("myApp",['ngRoute','ngAnimate'])

        .factory('serv',function(){

            return {

                log:function(){

                    return "hello";

                }

            };

        })

        .config(function($routeProvider,$locationProvider){

            $routeProvider

            .when("/page1/:id",{

                templateUrl:"./1.html"

            })

            .when("/page2/:id",{

                templateUrl:"./2.html"

            })

            .when("/page3/:id/:data*",{

                templateUrl:"./3.html",

                controller:"page3Ctrl",

                resolve:{

                    data:function(serv){

                        return serv.log();

                    }

                }

            })

            .otherwise({

                templateUrl:"./home.html"

            });

        })

        .controller("getCtrl",function($location,$routeParams,$scope,$route){

            $scope.show = function(){

                alert("我是index里边的控制器");

            }

            $scope.$on("$routeChangeSuccess",function(){

                if($location.path().indexOf("/page")==0){

                var id = $routeParams["id"];

                var data  = $routeParams['data'];

                $scope.id = id;

                $scope.data = data;

                }

            })

        })

        .controller('page3Ctrl',function($scope,data){

            $scope.show = function(){

                alert("我是page3的控制器");

            }

            console.log(data);

        })

    </script>

</body>

</html>

　　这是一个很丑的动画，但是它确实动了。这里先了解一下Angular有提供动画支持，后面看官方文档学习一下。

三、触摸事件

　　

<!DOCTYPE html>

<html lang="en" ng-app='myApp'>

<head>

    <meta charset="UTF-8">

    <title>touch</title>

    <style type="text/css">

        div{

            width: 300px;

            height: 300px;

            background: red;

        }

    </style>

</head>

<body>

    <div ng-controller='touchCtrl' ng-swipe-right="handler('ffffffff')">

    </div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>

    <script type="text/javascript" src="../node_modules/angular-touch/angular-touch.min.js"></script>

    <script type="text/javascript">

        var myApp = angular.module("myApp",['ngTouch']);

        myApp.controller('touchCtrl',function($scope){

            $scope.handler = function(e){

                console.log(e);

            }

        })

    </script>

</body>

</html>

　　我尝试获取事件对象然而获取不到，太奇怪了，过几天研究一下。

　　这部分自由男人讲的太简单了，这远远不够啊！过几天研究一下，说的研究一定会研究的。

　　完！吃饭去了！

　

AngularJS1.X学习笔记13-动画和触摸的更多相关文章

  1. Ext.Net学习笔记13：Ext.Net GridPanel Sorter用法

    Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridP ...

  2. SQL反模式学习笔记13 使用索引

    目标:优化性能 改善性能最好的技术就是在数据库中合理地使用索引.  索引也是数据结构,它能使数据库将指定列中的某个值快速定位在相应的行. 反模式:无规划的使用索引 1.不使用索引或索引不足 2.使用了 ...

  3. golang学习笔记13 Golang 类型转换整理 go语言string、int、int64、float64、complex 互相转换

    golang学习笔记13 Golang 类型转换整理 go语言string.int.int64.float64.complex 互相转换 #string到intint,err:=strconv.Ato ...

  4. springmvc学习笔记(13)-springmvc注解开发之集合类型參数绑定

    springmvc学习笔记(13)-springmvc注解开发之集合类型參数绑定 标签: springmvc springmvc学习笔记13-springmvc注解开发之集合类型參数绑定 数组绑定 需 ...

  5. Python3+Selenium3+webdriver学习笔记13（js操作应用：弹出框无效如何处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...

  6. 并发编程学习笔记(13)----ConcurrentLinkedQueue(非阻塞队列)和BlockingQueue(阻塞队列)原理

    · 在并发编程中,我们有时候会需要使用到线程安全的队列,而在Java中如果我们需要实现队列可以有两种方式,一种是阻塞式队列.另一种是非阻塞式的队列,阻塞式队列采用锁来实现,而非阻塞式队列则是采用cas ...

  7. iOS学习笔记10-UIView动画

    上次学习了iOS学习笔记09-核心动画CoreAnimation,这次继续学习动画,上次使用的CoreAnimation很多人感觉使用起来很繁琐,有没有更加方便的动画效果实现呢?答案是有的,那就是UI ...

  8. python 学习笔记 13 -- 经常使用的时间模块之time

    Python 没有包括相应日期和时间的内置类型.只是提供了3个相应的模块,能够採用多种表示管理日期和时间值: *    time 模块由底层C库提供与时间相关的函数.它包括一些函数用于获取时钟时间和处 ...

  9. MiZ702学习笔记13——ZYNQ通过AXI-Lite与PL交互

    在<MiZ702学习笔记7——尝试自制带总线IP>,我曾提到了AXI4-Lite的简单用法,驱动了下流水灯,只涉及到了写总线.今天,我想利用之前的VGA模块,将AXI4-Lite的读写都应 ...

随机推荐

  1. webpack开发环境配置和生产环境配置

    开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...

  2. signalR的集群与负载均衡

    signalR是相当不错的websocket应用,最近要做集群和负载均衡 主要用到了redis进行集群,signalR的backplane集成redis. 细节,订阅redis之后注意database ...

  3. PAT乙级-1056. 组合数的和(15)

    给定N个非0的个位数字,用其中任意2个数字都可以组合成1个2位的数字.要求所有可能组合出来的2位数字的和.例如给定2.5.8,则可以组合出:25.28.52.58.82.85,它们的和为330. 输入 ...

  4. C++中 #include<>与#include""

    #include<> 使用尖括号表示在包含文件目录中去查找(包含目录是由用户在设置环境时设置的),而不在源文件目录去查找: #include"" 使用双引号则表示首先在 ...

  5. CucumberJS 资源

    https://cucumber.io/docs/reference/javascript https://github.com/cucumber/cucumber-js

  6. js获取元素的滚动高度，和距离顶部的高度

    jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...

  7. u-boot的SPL源码流程分析

    上次梳理了一下SPL的基本概念和代码总体思路,这次就针对代码跑的流程做个梳理.SPL中,入口在u-boot-spl.lds中 ENTRY(_start) SECTIONS { .text : { __ ...

  8. 漫谈Java IO之基础篇

    Java的网络编程如果不是专门搞服务器性能开发或者消息分发,几乎可能涉及不到.但是它却是面试找工作必问的一个知识点,涵盖的知识体系也非常广泛,从Java底层IO原理到操作系统内核组成,再到网络TCP. ...

  9. MyBatis-plus 代码生成器

    1.添加pom文件依赖 <!-- Mybatis-Plus 自动生成实体类--> <dependency> <groupId>com.baomidou</gr ...

  10. django之urls系统

    Django的urls系统简介 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映 ...