您的位置：首页 > Web前端 > AngularJS

【AngularJS】—— 13 服务Service

2015-09-01 18:06 190 查看

阅读目录

　　$http的使用

　　创建自己的Service服务

　　参考

在AngularJS中有很多的服务，常用的比如http,location等等。

本篇文章会介绍一下的内容：

　　1 $http这种Angular提供的服务的使用

　　2 如何自定义服务，并总结服务需要注意的几个小点。

　　$http的使用

　　AngularJS为我们提供了很多种服务，$http用于发送http请求，动态的请求数据。

　　这样就需要使用web容器来运行代码了，先看看程序源码，视图方面还是跟普通的代码相同：

<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>

<div ng-controller="myAppCtrl">
<label>username</label>
<input type="text" ng-model="username" placeholder="输入"/>
<pre ng-show="username">
{{users}}
</pre>
</div>

<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);

myAppModule.factory('myService',['$http',function($http){
var doRequest = function(username){
return $http({
method:'GET',
url:'data.json'
});
}
return {
userList:function(username){
return doRequest(username);
}
}
}]);

myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',
function($scope,$timeout,myService){
var timeout;
$scope.$watch('username',function(newUserName){
console.log("您输入了："+newUserName);
if(newUserName){
if(timeout){
$timeout.cancel(timeout);
}
timeout = $timeout(function(){
myService.userList(newUserName).success(function(data){
console.log(data);
$scope.users = data;
});
},350);
}
});
}
]);
</script>
</body>
</html>

　　关于自定义的服务，有下面几点需要注意：

　　1 它的使用场景：由于可以在服务中抽取公共调用的方法，因此可以把多个控制器中相同的功能抽取出来，形成一个服务。

　　2 单例：服务都是单例的，一个应用生命周期内，只有一个服务的实例存在。

　　3 注入器：服务的实例化都是有注入器injector创建的。在我们创建controller控制器时，后面指明了需要注入一个myService服务，注入器就会去实例化该服务。

回到顶部

　　参考

　　[1] 大漠穷求，慕课网：http://www.imooc.com/learn/156

from : http://www.cnblogs.com/xing901022/p/4293451.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航