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的读写都应 ...
随机推荐
- c# ffmpeg视频转换【转载】
c# ffmpeg视频转换 什么是ffmpeg,它有什么作用呢,怎么可以使用它呢,带着问题去找答案吧!先参考百度百科把,我觉得它很强大无奇不有,为了方便大家我就把链接提供了! http://baik ...
- MyBatis延迟加载和缓存
一.延迟加载 1.主对象的加载: 根本没有延迟的概念,都是直接加载. 2.关联对象的加载时机: 01.直接加载: 访问主对象,关联对象也要加载 02.侵入式延迟: 访问主对象,并不加载关联对象 访问主 ...
- QT 创建一个具有复选功能的下拉列表控件
最近研究了好多东西,前两天突然想做一个具有复选功能的下拉列表框.然后在网上"学习"了很久之后,终于发现了一个可以用的,特地发出来记录一下. 一.第一步肯定是先创建一个PROJECT ...
- 初始化angularJS之ng-app的自动绑定和手动绑定
在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstr ...
- git分支的创建与合并
在git中提倡使用分支,这就涉及到了分支的创建和合并.在git中我们的每次提交类似于一个链表,按照时间顺序向下排列,大约画了一个图,每个小圆圈代表一次提交,在git中有有一个主分支master,我们新 ...
- UITableViewStyleGrouped模式下烦人的多余间距
第一个section上边多余间距处理 // 隐藏UITableViewStyleGrouped上边多余的间隔 _tableView.tableHeaderView = [[UIView alloc] ...
- Myeclipse快速补充返回值快捷键
比如 image.getGraphics(); 按ALT+Shift+L键,弹出一个确认变量名称框,确认之后会补全语句Graphics graphics = image.getGraphics();
- iOS之内存管理（ARC）
iOS的内存管理,相信大家都不陌生,之前是使用的MRC,由开发人员手动来管理内存,后来使用了ARC,来由系统管理内存.本文主要讲讲Autorelease,Core Foundation对象在内存管理方 ...
- 深入理解Android中View
文章目录 [隐藏] 一.View是什么? 二.View创建的一个概述: 三.View的标志(Flag)系统 四.MeasureSpec 五.几个重要方法简介 5.1 onFinishInflate ...
- apache实现301永久性重定向代码
301重定向(301 redirect)又叫301代表永久性转移(Permanently Moved),将各种网络请求重新定个方向转到其它位置,是网页更改地址后对搜索引擎友好的最好方法,只要不是暂时搬 ...