AngularJS（六）

mwwb

于 2020-06-15 20:25:11 发布

阅读量113

点赞数

分类专栏： AngularJS 文章标签： angular

本文链接：https://blog.csdn.net/qq_43278421/article/details/106759039

版权

AngularJS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

今天开始学习AngularJS的调用内置服务的相关知识
ng有一种分层结构思想在里面
可以大致分为3层：
控制器层：这个就是加载controller（）方法时候的控制器，一般代码量较少，轻薄
服务层：也被叫做service层，服务层负责完成前端的业务逻辑
DAO层：即数据访问层，根据不同位置的DAO有不同的工作，如果是在服务端编程中的，负责对数据库执行CRUD操作；如果是在前端编程中的话，就是负责和服务端通信，调用服务端API对服务端数据进行CRUD操作(CRUD指的是增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)）

$animate服务
有以下一些方法：
enter(element,parent,after,[done])----该方法将element元素插入parent中的after之后，然后运行done函数
leave(element,[done])----直接删除element元素，然后执行函数done
move(element,parent,after,[done]):–将一个element元素移动到parent中或者after之后，然后运行done函数（注：parent就是一个父元素，after相当于兄弟元素，这个和enter不一样的地方就在于move的元素本身就是存在于DOM模型中的，只是移动，enter插入一个全新的）
addClass(element,className,[done])-----给元素添加一个className样式名，然后执行函数done
removeClass(element,className,[done])-----给元素删除className样式名，然后执行函数done
setClass(element,add,remove,[done]):-----添加或移除，从上

下面一个使用leave和enter的案例

<body ng-app="app" ng-controller="ctrl" >
		<button id="1" fk-dir >淡入/淡出</button>
		<script>
			var app=angular.module('app',['ngAnimate']);
			       app.directive("fkDir",function myDir($animate){
					  function link(scope,element,attr){
						  var show=false;
						  var parent = element.parent();
						  var box;
						  
						  element.on('click',function(){
							 if(!show){
								 box = angular.element('<div class="fade">555</div>');
								 scope.$apply($animate.enter(box,parent,element,function(){
									 alert("hello");
								 }));
							 } 
							 else{
								 scope.$apply($animate.leave(box,function(){
									 console.log("删除完成");
									  alert("hello1");
									  
								 }));
							 }
							 show = !show;
						  });
					  } 
					  return{
						  restrict:'A',
						  link:link
					  };
				   });
				   app.controller('ctrl',angular.noop);
		</script>
	</body>

通过添加css样式，可以增加动画效果

             .fade{
				width:150px;
				height: 80px;
				background-color: #FF0000;
				border:1px solid black;
				transition:1s linear all;
			}
			.fade.ng-enter{ opacity:0;  }
			.fade.ng-enter.ng-enter-active{ opacity:1 ;}
			.fade.ng-leave{ opacity:1; }
			.fade.ng-leave.ng-leave.ng-leave-active{ opacity:0 ;}

注：这个需要导入库

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular-animate.min.js"></script>

这是倾向于动画效果的库，$animate服务本质上就是带点动画效果的感觉的

** $c a c h e F a c t o r y 服务 * * 该服务用于创建缓存对象。通过调用方法的时候传入一个字符串类型的缓存 i d ，让程序得到一个$ cacheFactory.Cache对象-该对象就是一个缓存对象

大体上常用的有如下方法：
put(key,value)-------存入键对key是字符串类型，value可以是任意类型
get(key)-----------根据key来获取value
romove(key)-----------根据key来删除value
removeAll()--------删除所有键对
destroy()-----------销毁整个缓存对象
info()----------获取缓存对象的信息，包括id、size

<body ng-app="app" ng-controller="ctrl">
		<input ng-model="newCacheKey" placeholder="Key" >
		<input ng-model="newCacheValue" placeholder="Value">
		<button ng-click="put(newCacheKey, newCacheValue)" >缓存</button>
		 <p ng-if="keys.length">缓存数据</p>
		 <div ng-repeat="key in keys">
			 <span ng-bind="key"></span>  ->   <b ng-bind="cache.get(key)"></b>
		 </div>
		 <p>缓存信息</p>
		 <div ng-repeat="(key,value) in cache.info()">
			 <span ng-bind="key" ></span>  :  <b ng-bind="value"></b>
		 </div>
		 <script type="text/javascript">
			 angular.module('app',[])
			 .controller('ctrl',function($scope,$cacheFactory){
				 $scope.keys=[];
				 $scope.cache = $cacheFactory('cacheId');
				 $scope.put = function(key,value){
					 if(angular.isUndefined($scope.cache.get(key))){
						 $scope.keys.push(key);
					 }
					 $scope.cache.put(key,angular.isUndefined(value)?null:value);
				 };
			 });
		 </script>
	</body>

上面的代码是用了put和info，get的方法

mwwb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS（六）

今天开始学习AngularJS的调用内置服务的相关知识ng有一种分层结构思想在里面可以大致分为3层：控制器层：这个就是加载controller（）方法时候的控制器，一般代码量较少，轻薄服务层：也被叫做service层，服务层负责完成前端的业务逻辑DAO层：即数据访问层，根据不同位置的DAO有不同的工作，如果是在服务端编程中的，负责对数据库执行CRUD操作；如果是在前端编程中的话，就是负责和服务端通信，调用服务端API对服务端数据进行CRUD操作(CRUD指的是增加(Create)、读取查询(Ret
复制链接

扫一扫