AngularJS1.X学习笔记13-动画和触摸
本文主要涉及了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-动画和触摸的更多相关文章
- Ext.Net学习笔记13：Ext.Net GridPanel Sorter用法
Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridP ...
- SQL反模式学习笔记13 使用索引
目标:优化性能 改善性能最好的技术就是在数据库中合理地使用索引. 索引也是数据结构,它能使数据库将指定列中的某个值快速定位在相应的行. 反模式:无规划的使用索引 1.不使用索引或索引不足 2.使用了 ...
- golang学习笔记13 Golang 类型转换整理 go语言string、int、int64、float64、complex 互相转换
golang学习笔记13 Golang 类型转换整理 go语言string.int.int64.float64.complex 互相转换 #string到intint,err:=strconv.Ato ...
- springmvc学习笔记(13)-springmvc注解开发之集合类型參数绑定
springmvc学习笔记(13)-springmvc注解开发之集合类型參数绑定 标签: springmvc springmvc学习笔记13-springmvc注解开发之集合类型參数绑定 数组绑定 需 ...
- Python3+Selenium3+webdriver学习笔记13（js操作应用：弹出框无效如何处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...
- 并发编程学习笔记(13)----ConcurrentLinkedQueue(非阻塞队列)和BlockingQueue(阻塞队列)原理
· 在并发编程中,我们有时候会需要使用到线程安全的队列,而在Java中如果我们需要实现队列可以有两种方式,一种是阻塞式队列.另一种是非阻塞式的队列,阻塞式队列采用锁来实现,而非阻塞式队列则是采用cas ...
- iOS学习笔记10-UIView动画
上次学习了iOS学习笔记09-核心动画CoreAnimation,这次继续学习动画,上次使用的CoreAnimation很多人感觉使用起来很繁琐,有没有更加方便的动画效果实现呢?答案是有的,那就是UI ...
- python 学习笔记 13 -- 经常使用的时间模块之time
Python 没有包括相应日期和时间的内置类型.只是提供了3个相应的模块,能够採用多种表示管理日期和时间值: * time 模块由底层C库提供与时间相关的函数.它包括一些函数用于获取时钟时间和处 ...
- MiZ702学习笔记13——ZYNQ通过AXI-Lite与PL交互
在<MiZ702学习笔记7——尝试自制带总线IP>,我曾提到了AXI4-Lite的简单用法,驱动了下流水灯,只涉及到了写总线.今天,我想利用之前的VGA模块,将AXI4-Lite的读写都应 ...
随机推荐
- 未来已来，腾讯AI计算网络
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:由鹅厂网事发表在云+社区 ＂鹅厂网事＂由深圳市腾讯计算机系统有限公司技术工程事业群网络平台部运营,我们希望与业界各位志同道合的伙伴交流 ...
- Xamarin改变移动开发的五个理由
企业开发者不能简单的抛弃现有的桌面和Web应用,然而又不得不忙着创建各种各样的应用,没有太多的预算来开发移动版本,尤其是原生版本. 采用Xamarin,C#开发人员可以使用一份基础代码创建桌面版和移动 ...
- jQuary学习の一の初期准备
jQuery 的功能概括: 1.html 的元素选取 2.html的元素操作 3.html dom遍历和修改 4.js特效和动画效果 5.css操作 6.html事件操作 7.ajax异步请求方式 通 ...
- iOS刚进入后台接受推送、打开推送调转到相应的界面
刚进入后台的时候消息处理时候我用了本地推送!可以看我前边写的博客,怎么处理刚进入后台接收推送的案例,链接 /** 注释:打开推送的三种方式:-peter 1.apns的时候,结束进程退出后台:启动的时 ...
- sort命令与cat区别25.1 由于sort默认是把结果输出到标准输出，所以需要用重定向才能将结果写入文件，形如sort filename > newfile [root@shiyan a]# cat a.txt aaaaaa [root@shiyan a]# sort a.txt >c.txt ------------- 在重定向前会自动创建c.txt这个文件。 [root@shiyan
25.1 由于sort默认是把结果按照行排序后输出到标准输出,所以需要用重定向才能将结果写入文件,形如sort filename > newfile[root@shiyan a]# cat a. ...
- 配置puppet的主机端和客户端的自动认证
配置puppet的主机端和客户端的自动认证 author:headsen chen 2017-11-01 17:44:56 个人原创,转载请注明作者,出处,否则依法追究法律责任 1,先在主机 ...
- MySQL异步、同步、半同步复制
异步复制 MySQL复制默认是异步复制,Master将事件写入binlog,提交事务,自身并不知道slave是否接收是否处理: 缺点:不能保证所有事务都被所有slave接收. 同步复制 Master提 ...
- 1-2 hibernate主配置文件hibernate.cfg.xml详解
详 http://www.cnblogs.com/biehongli/p/6531575.html Hibernate的主配置文件hibernate.cfg.xml 1:Hibernate的主配置文件 ...
- Java 泛型进阶
擦除 在泛型代码内部,无法获得任何有关泛型参数类型的信息. 例子1: //这个例子表明编译过程中并没有根据参数生成新的类型 public class Main2 { public static voi ...
- Java飞机大战源代码
刚学不久java,做了一个飞机大战的小小小小游戏,现在把这个思路总结以及代码分享出来.大佬别吐槽(emmmmmm .....开发环境:jdk1.7 开发工具:eclipese PlanelJPanel ...