本文主要涉及了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. IE浏览器右键菜单插件开发（下篇）——如何用c#安装、卸载IE右键插件

    建立Installer安装类,如图: 代码如下: using Microsoft.Win32; using ResourceShare.UserClient.Common; using System; ...

  2. createjs绘制扇形的方法

    扇形由三段线条组成,两条直线和一条弧线,直线可以用createjs中的lineTo函数画出,弧线用Graphics.arc函数来画. 一.关于createjs中的Graphics.Arc API Gr ...

  3. 403 forbidden 错误解决方案

    在本机启动程序,访问手机移动端(wap)的程序时,返回404无法访问,控制台报错403 forbidden,网上找问题所在: [ 以下引用百度知道:https://zhidao.baidu.com/q ...

  4. QT 中setUserData和setProperty问题

    在5.9的官方文档里是找不到QObject中的setUserData 的,相反他提供了setProperty(). void setUserData(uint id, QObjectUserData ...

  5. WebGL 3D 电信机架实战之数据绑定

    前言 在前端中,视图层和数据层需要进行单向或者双向数据绑定,大家都已经不陌生了,有时候 2D 做的比较顺了之后,就会想要挑战一下 3D,不然总觉得痒痒的.这个 3D 机架的 Demo 我觉得非常有代表 ...

  6. Mycat 分片规则详解--取模范围分片

    实现方式:该算法先进行取模,然后根据取模值所属范围进行分片 优点:可以自主决定取模后数据的节点分布 缺点:dataNode 划分节点是事先建好的,需要扩展时比较麻烦. 配置示例: <tableR ...

  7. 给定n，求1/x + 1/y = 1/n （x<=y）的解数~hdu-1299~(分解素因子详解）

    链接:https://www.nowcoder.com/acm/contest/90/F来源:牛客网 题目描述 给定n,求1/x + 1/y = 1/n (x<=y)的解数.(x.y.n均为正整 ...

  8. linux --> 计算机是如何启动的？

    计算机是如何启动的? 零.boot的含义 "启动"用英语怎么说?回答是boot.boot原来的意思是靴子,"启动"与靴子有什么关系呢? 原来,这里的boot是b ...

  9. python入门（Python和Pycharm安装）

      Python简介 Python是一种计算机程序设计语言,它结合了解释性.编译性.互动性和面向对象的脚本语言,非常简单易用.Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他 ...

  10. JVM内存管理概述与android内存泄露分析

    一.内存划分 将内存划分为六大部分,分别是PC寄存器.JAVA虚拟机栈.JAVA堆.方法区.运行时常量池以及本地方法栈. 1.PC寄存器(线程独有):全称是程序计数寄存器,它记载着每一个线程当前运行的 ...