在angularJS中创建自己的service

最新推荐文章于 2023-08-14 11:43:58 发布

boyzhoulin

最新推荐文章于 2023-08-14 11:43:58 发布

阅读量611

点赞数

分类专栏： angularJS 文章标签： angularJS service timeout

angularJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原文出处请看这里

angularJS为我们提供了许多现成的service供我们使用，比如$http, $timeout, $interval.

同时在angularJS中创建自己的service也非常容易。最常见的就是用angular.module中的factory模式. 一个通常的创建service的构架如下

angular.module('myApp',[])
.factory('myService',function(){
 var serviceInstance = {};
 //添加service逻辑
return serviceInstance ;
});

下面我们来创建一个调用Github API 的简单service. 在页面中输入github的用户名，就可以得到用户相应的信息。

首先是我们的HTML代码

<!DOCTYPE HTML>
<html>
<head>
	<script type="text/javascript" src="./js/angular.min.js"></script>
	<script type="text/javascript" src='./js/main.js'></script>
</head>
<body ng-app='myApp'>
	<div ng-controller='ServiceController'>
		<label for='username'>Your GitHub username</label>
		<input type='text' ng-model='username' placeholder='Enter your github username'></input>
		<pre ng-show='username'>{{ events }}</pre>
	</div>
</body>
</html>

然后创建我们的main.js.首次创建service, 这个service中，我们用到了angularJS自带的$http服务

var app = angular.module('myApp',[]);
app.factory('githubService',function($http){
	var doRequest = function(username,path){
		return $http({
			method:'JSONP',
			url:'https://api.github.com/users/' + username + '/' + path + '?callback=JSON_CALLBACK'
		});
	}

	return {events:function(username){return doRequest(username,'events');}};
});

然后就可以调用我们的githubService服务了

app.controller('ServiceController',function($timeout,$scope,githubService){
	var timeout = undefined;
	$scope.$watch('username',function(newUsername){
		githubService.events(newUsername).success(function(data,status,header){
					$scope.events = data.data;
				});
		
	});
});

每当输入改变时，我们都会去调用githubService查找相应的信息。能不能更加智能一点，当我们输入暂停一段时间后，再去调用githubService呢？

app.controller('ServiceController',function($timeout,$scope,githubService){
	var timeout = undefined;
	$scope.$watch('username',function(newUsername){
		if(newUsername){
			if(timeout) $timeout.cancel(timeout);
			timeout = $timeout(function(){
				githubService.events(newUsername).success(function(data,status,header){
					$scope.events = data.data;
				});
			},5000);
		}
	});
});

这样就好了。我们输入暂停5秒后，才会去调用githubService.