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的读写都应 ...
随机推荐
- El表达式的判断字符串的长度和截取，日期时间的格式化
<c:if test="${fn:length(each.wii_name) >= 20}"> ${fn:substring(each.wii_name, 0,2 ...
- Firefox书签同步工具Xmarks
Xmarks作为Firefox最受欢迎的社会化书签扩展之一,其前身为Foxmarks,并且显著的增加了它的功能.Xmarks已被LastPass(领先的密码和数据管理)收购. 之前一直是只使用火狐浏览 ...
- Cesium剖面分析
- delete操作字符串会报错吗？
其实是不会的."delete只能对对象属性进行操作"的说法是错误的,严谨来说,delete可以对任意变量类型进行操作,只不过只有对对象的属性才能操作成功,对其他变量类型操作失败罢了 ...
- kubernetes中kubeconfig的用法
在开启了 TLS 的集群中,每当与集群交互的时候少不了的是身份认证,使用 kubeconfig(即证书) 和 token 两种认证方式是最简单也最通用的认证方式. 以kubectl为例介绍kubeco ...
- 针对微信的一篇推送附有的数据链接进行MapReduce统计
原推送引用:https://mp.weixin.qq.com/s/3qQqN6qzQ3a8_Au2qfZnVg 版权归原作者所有,如有侵权请及时联系本人,见谅! 原文采用Excel进行统计数据,这里采 ...
- [模拟赛] T3 Exploit
Description 4X概念体系,是指在PC战略游戏中一种相当普及和成熟的系统概念,得名自4个同样以"EX"为开头的英语单词. eXplore(探索) eXpand(拓张与发展 ...
- return false与return true的区别
<a href="http://www.baidu.com" onclick="alert(11);return true;alert(22)">链 ...
- New UWP Community Toolkit - XAML Brushes
概述 上一篇 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾.接下来会针对每个重要更新,结合 SDK 源代码和调用代码详细讲解. 本篇我们 ...
- [bzoj1707]tanning分配防晒霜_贪心+排序
tanning分配防晒霜 bzoj-1707 题目大意:给出每个点所能接受的区间,给出m个可以使单个点固定在一个值的方法,每种方法能使用有限次. 注释:1<=N<=2500 想法:这题是瞎 ...