AngularJS（八）

最新推荐文章于 2021-06-24 11:10:52 发布

mwwb

最新推荐文章于 2021-06-24 11:10:52 发布

阅读量144

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_43278421/article/details/106799751

版权

AngularJS 专栏收录该内容

11 篇文章

订阅专栏

今天…今天还是继续学习服务，害，惭愧，这几天进度很慢，就这么几个服务知识点还没捣腾明白呢

$log服务
这个服务的功能是对console进行封装，好像很多服务的功能都是封装某个特定的对象

$log服务一共提供了5个方法，分别是：
log、warn、info、error、debug

	<body ng-app="app">
		<div ng-controller="ctrl">
			<label>
				请输入内容
			    <input type="text" ng-model="content" />
			</label>
			<button ng-click="$log.log(content)">log</button>
			<button ng-click="$log.warn(content)">warn</button>
			<button ng-click="$log.info(content)">info</button>
			<button ng-click="$log.error(content)">error</button>
			<button ng-click="$log.debug(content)">debug</button>
		</div>
		<script>
			angular.module("app",[])
			   .controller("ctrl",function($log,$scope){
				  
				  $scope.$log = $log; 
			   });
		</script>
	</body>

在这里插入图片描述
他的主要作用就是在输出台生成5中级别的提示信息
不过第5个debug级别的提示信息我不知道是什么样的，点击按钮没反应

$q服务
该服务是AngularJS封装的一种轻量级Promise的实现。它可以调用他的构造器（调用构造器的时候返回一个Promise对象），也可以调用下列方法：
defer（）：创建一个deferred对象，这个对象可以执行几个常用的方法，比如resolve
all（）：传入Promise的数组，用于批量执行，该方法也返回一个Promise对象
when（）：传入一个不确定的参数，如果参数符合Promise标准，就返回一个Promise对象
那么问题来了，什么是Promise呢，之前js学的不够扎实，忘了
　Promise，他是一个对象，是用来处理异步操作的，可以让我们写异步调用的时候写起来更加优雅，更加美观便于阅读。顾名思义为承诺、许诺的意思，意思是使用了Promise之后他肯定会给我们答复，无论成功或者失败都会给我们一个答复，所以我们就不用担心他跑了哈哈。所以，Promise有三种状态：pending（进行中），resolved（完成），rejected（失败）。只有异步返回的结构可以改变其状态。所以，promise的过程一般只有两种：pending->resolved或者pending->rejected。

<body ng-app="app" ng-controller="ctrl">
		<script>
			function loadData(url){
				console.log("从"+url+"加载数据");
				return "xxx";
			}
			angular.module("app",[])
			   .controller('ctrl',function($scope,$q){
				   function asyncTask(url){
					   return $q(function(resolve,reject){
						   setTimeout(function(){
							   var data = loadData(url);
							   if(data){
								   resolve(data);
							   }
							   else{
								   reject('加载失败');
							   }
						   },1000);
					   });
				   }
				   var promise = asyncTask('server.html');
				   promise.then(function(data){
					   alert('成功'+data);
				   },function(reason){
					   alert('失败'+reason);
				   });
			   });
		</script>
	</body>

这个就是实现了返回成功或失败的消息

<body ng-app="app" ng-controller="ctrl">
		<script>
			function loadData(url){
				console.log("从"+url+"加载数据");
				return "xxx";
			}
			angular.module("app",[])
			   .controller('ctrl',function($scope,$q){
				   function asyncTask(url){
					   var deferred = $q.defer();
					   setTimeout(function(){
						   deferred.notify('开始调用loadData方法');
						   var data = loadData(url);
						   if(data){
							   deferred.resolve(data);
						   }
						   else{
							   deferred.reject('加载数据失败');
						   }
					   },1000);
					   return deferred.promise;
				   }
				   var promise = asyncTask('server.html');
				   promise.then(function(data){
					   alert('成功加载数据：'+data);
				   },function(reason){
					   alert('失败：'+reason);
				   },function(update){
					   alert('收到通知：'+update);
				   });
			   });
		</script>
	</body>

上面是使用defer（）方法得到和返回对象的代码

$templateCache服务
专门用于缓存页面模板，该服务是基于$cacheFactoy服务的（又是一个没听过的东西），感觉这些服务很多都是起到了封装一下的作用，真正的方法和不封装的其实类似。
书上说，可以把$templateCache当成#cacheFactory的实例

$templateCache = $ cacheFactory('template');

该服务的具体作用就是将HTML字符串缓存在内存中，当加载时可以直接从内存获取，从而获得更好的效率。
ng的script标签同样可以做到

	<body ng-app="app">
		<div ng-controller="ctrl">
			<select ng-model="template" >
				<option value="">空白</option>
				<option value="fkit.html">fk</option>
				<option value="yeeku.html">ye</option>
			</select>
			被加载的URl：<code>{{template}}</code>
			
			<hr/>
			<div class="s">
				<div class="sss" ng-include="template"></div>
			</div>
		</div>
		<script>
			angular.module('app',[])
			.controller('ctrl',function($templateCache){
				let tmp = '<h3>555</h3>';
				$templateCache.put('fkit.html',tmp);
			});
		</script>
		<script type="text/ng-template" id="yeeku.html" >
			<h3>作者介绍</h3>
		</script>
	</body>

自定义服务
和指令一样，服务也可以根据自己的需求自定义封装服务
一般有两种方式：
1.使用angular.Module对象的方法创建服务，该对象提供了factory（）、service（）、provider（）三个方法用于创建服务，这三个方法略有差别
2.使用$provide服务的方法创建服务，该服务同样提供前面三种方法用于创建服务，但使用较少

<body ng-app="app">
		<div ng-controller="ctrl">
			用户名：<input type="text" name="user.name" ng-model="name" /><br>
			{{reversedName}}<br>
			$fkService.name:{{serviceName}}<br>
			$fkService.age:{{serviceAge}}<br>
		</div>
		<script>
			var app=angular.module('app',[])
			    .factory('$fkService',function(){
					let service ={ } ;
					service.name = "yeeku";
					let age;
					service.setAge = function(newAge){
						age = newAge;
					}
					service.getAge = function(){
						return age;
					}
					service.reverse = function(str){
						str = str +'';
						 let result ='';
						 for(let i = str.length-1;i>=0;i--){
							 result +=str.charAt(i);
						 }
						 return result;
					}
					return service;
				});
				app.controller('ctrl',function($scope,$fkService){
					$scope.serviceName = $fkService.name;
					$fkService.age = 29;
					$scope.serviceAge = $fkService.age ;
					$scope.$watch("name",function(newVal,oldVal,scope){
						scope.reversedName = $fkService.reverse(newVal);
					});
				});
		</script>
	</body>

还可以使用service（）方法创建自定义服务

	<body ng-app="app">
		<div ng-controller="ctrl">
			
				用户名：<input type="text" name="user.name" ng-model="name" /><br>
				{{reversedName}}<br>
				$fkService.name:{{serviceName}}<br>
				$fkService.age:{{serviceAge}}<br>
			
		</div>
		<script>
			var app=angular.module('app',[])
			.service("$fkService",function(){
				this.name = 'xx';
				this.setAge=function(newAge){
					this.age = newAge;
				}
				this.getAge = function(){
					return this.age;
				}
				this.reverse = function(str){
					str = str + '';
					let result ='';
					for (let i=str.length-1;i>=0;i--){
						result +=str.charAt(i);
					}
					return result;
					
				}
			});
			app.controller("ctrl",function($scope,$fkService){
				$scope.serviceName = $fkService.name;
				$fkService.age = 29;
				$scope.serviceAge = $fkService.age;
				$scope.$watch("name",function(newVal,oldVal,scope){
					$scope.reversedName = $fkService.reverse(newVal);
				});
			})
		</script>
	</body>