一、angularJs中的简单服务应用
下面的例子让我们明白在AngularJs中如何去调用文件中的数据,从而将文件中的数据显示在页面上;改变url的地址,也可以去调用后台接口.
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp" ng-controller="LoadDataCtrl">
<ul >
<li ng-repeat="user in users">
{{user.name}}
</li>
</ul>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/http.js" ></script>
</html>
http.js
var myModule=angular.module("myApp",[]);
//myModule.controller('LoadDataCtrl',['$scope','$http',function($scope){
myModule.controller('LoadDataCtrl',function($scope,$http){
$http({
method:'GET',
url:'js/data.json'
}).success(function(data,status,headers,config){
console.log("success...");
console.log(data);
$scope.users=data;
}).error(function(data,status,headers,config){
console.log("error...");
});
});
data.json:
html运行结果：
二、创建自定义服务(我们自己的服务)
明白两点：
1.如何注册服务
2.如何使用服务
完整的实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="MyServiceApp" ng-controller="ServiceController">
用户名：<input type="text" ng-model="username" placeholder="请输入用户名">
<ul >
<li ng-repeat="user in users">
{{user.name}}
</li>
</ul>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/service.js" ></script>
</html>
service.js:
var myServiceApp = angular.module("MyServiceApp",[]);
myServiceApp.factory('userListService',function($http){
var doRequest = function(username,path){
return $http({
method: 'GET',
url:'js/data.json'
});
};
return {
userList: function(username) {
return doRequest(username,'userList');
}
};
});
myServiceApp.controller("ServiceController",function($scope,$timeout,userListService){
var timeout;
$scope.$watch('username',function(newUserName) {
if(newUserName){
if(timeout){
$timeout.cancel(timeout);
}
timeout = $timeout(function() {
userListService.userList(newUserName)
.success(function(data,status) {
$scope.users = data;
});
},350);
}
});
});
data.json:
运行html文件的结果：
初始状态：
文本框中输入值回车后如下：
最常用的是使用factory的方式,这里主要总结factory创建服务的方式,以上面的例子为例.
详细分析：
1.创建服务的方式
2.注册服务
用angular.module api创建了一个名字叫userListService的服务,服务的工厂函数用来生成一个单例的对象或函数,这个对象或函数就是服务,它会存在于应用的整个生命周期内.
上面的例子中将方法设置为服务对象的一个属性将其暴露给外部(上面的例子中工厂函数包含一个方法返回一个promise,最后return一个userList函数的服务对象).
3.使用服务
当服务的名字当作参数传递给控制器函数,就可以将服务注入到控制器中;即当服务成了某个控制器的依赖,就可以在控制器中调用任何定义在服务对象上的方法.
注： 同创建控制器一样工厂函数即可以是一个函数,也可以是一个数组.
