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的读写都应 ...
随机推荐
- CSS垂直居中技巧
<!-- html结构 --><body><div class="wrap"> <div class="box" ...
- 基于fitnesse浅析waferslim引擎
最近在用fitnesse框架做自动化测试,简单总结一下,后边再补充内容. 1.fitnesse简介:后续补 略,见官网 http://www.fitnesse.org/ 2.waferslim引擎之p ...
- 大数据(2)：基于sogou.500w.utf8数据hive的实践
一．环境的搭建 1.安装配置mysql rpm –ivh MySQL-server-5.6.14.rpm rpm –ivh MySQL-client-5.6.14.rpm 启动mysql 创建hive ...
- Vuejs实例-使用vue-cli创建项目
1,首先从官方网站下载安装Node.js,建议使用6.x版本,同时也会一并安装npm工具,npm>3.10以上. 2,npm安装很慢(国外服务器),所以一般推荐使用npm淘宝镜像cnpm,先安装 ...
- openstack中的环境准备
openstack中环境准备基于Ubuntu系统 author:headsen chen 2017-10-13 11:51:50 个人原创,转载请注明作者,出处. 6 apt-get insta ...
- linux 下后台运行python脚本
这两天要在服务器端一直运行一个Python脚本,当然就想到了在命令后面加&符号 $ python /data/python/server.py >python.log &说明: ...
- servlet实现方式（未完待续）
servlet的是方式有三种,分别是: 1,实现servlt接口 点击查看详情 2,继承GenericServlet类[适配器模式] 3,继承HttpServlet类[模板方法设计模式]最常用的方法 ...
- 研华ADAM 6000系列型号枚举值
public enum Adam6000Type { Non = 0, Adam6015 = 6015, Adam6017 = 6017, ...
- python实现维吉利亚密码加密（Vigenère cipher）
最近有个朋友问我关于维吉利亚密码如何用python实现加密,研究之后发现这是个挺好玩的东西,遂决定写篇博文记录一下. 一.何谓维吉利亚密码 第一列是密钥字母列,第一行是明文字母行.不难看出维吉利亚密码 ...
- UI线程异常处理方法
当应用程序启动,创建了一个叫“main”的线程,用于管理UI相关,又叫UI线程.其他线程叫工作线程(Work Thread). Single Thread Model 一个组件的创建并不会新建一个线程 ...