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

AngularJs中的服务

2016-08-22 17:02 162 查看

一、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.使用服务

当服务的名字当作参数传递给控制器函数,就可以将服务注入到控制器中;即当服务成了某个控制器的依赖,就可以在控制器中调用任何定义在服务对象上的方法.

注：同创建控制器一样工厂函数即可以是一个函数,也可以是一个数组.

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

标签：

相关文章推荐

新的分享

章节导航