AngularJS入门教程之服务(Service)  更新时间:2016年07月27日 15:56:41   投稿:lqh   本文主要介绍 AngularJS Service,这里整理了AngularJS Servic的详细资料,并提供代码实例,有需要的小伙伴可以参考下 AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务。 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。 AngularJS 内建了30 多个服务。 有个 $location 服务,它可以返回当前页面的 URL 地址。 实例 当前页面的url: {{myUrl}} 该实例使用了内建的 $location 服务获取当前页面的 URL。 运行结果: 当前页面的url: http://www.runoob.com/try/try.php?filename=try_ng_services 该实例使用了内建的 $location 服务获取当前页面的 URL。 注意: $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。 为什么使用服务? $http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求,应用响应服务器传送过来的数据。 AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。 $http 服务 $http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。 实例 使用 $http 服务向服务器请求数据: 欢迎信息: {{myWelcome}} $http 服务向服务器请求信息,返回的值放入变量 “myWelcome” 中。 运行结果: 欢迎信息:       欢迎访问 $http 服务向服务器请求信息,返回的值放入变量 “myWelcome” 中。 以上是一个非常简单的 $http 服务实例,更多 $http 服务应用请查看 AngularJS Http 教程。 $timeout 服务 AngularJS $timeout 服务对应了 JS window.setTimeout 函数。 实例 两秒后显示信息: 两秒后显示信息: {{myHeader}} $timeout 访问在规定的毫秒数后执行指定函数。 运行结果: 两秒后显示信息: How are you today? $timeout 访问在规定的毫秒数后执行指定函数。 $interval 服务 AngularJS $interval 服务对应了 JS window.setInterval 函数。 实例 每两秒显示信息: 现在时间是: {{theTime}} $interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。 运行效果: 现在时间是: 下午3:41:09 $interval 访问在指定的周期(以毫秒计)来调用函数或计 创建自定义服务 你可以创建自定义的访问,链接到你的模块中: 创建名为hexafy 的访问: app.service(‘hexafy’, function() { this.myFunc = function (x) { return x.toString(16); } }); 要使用自定义的访问,需要在定义过滤器的时候独立添加: 实例 使用自定义的的服务 hexafy 将一个数字转换为16进制数: 255 的16进制是: {{hex}} 自定义服务,用于转换16进制数: 运行结果: 255 的16 进制是: f f 自定义服务,用于转换16进制数: 过滤器中,使用自定义服务 当你创建了自定义服务,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服务中使用它。 在过滤器 myFormat 中使用服务 hexafy: 在过滤器中使用服务: {{255 | myFormat}} 运行效果: 在过滤器中使用服务:          f  f 在对象数组中获取值时你可以使用过滤器: 创建服务 hexafy: 在获取数组 [255, 251, 200] 值时使用过滤器: {{x | myFormat}} 过滤器使用服务将10进制转换为16进制。 运行效果: 在获取数组[255, 251, 200]值时使用过滤器: ff fb c8 过滤器使用服务将10进制转换为16进制。 以上就是对AngularJS 服务的资料整理,后续继续补充,有需要的朋友参考下。 您可能感兴趣的文章: angularJS Provider、factory、service详解及实例代码 AngularJs Creating Services详解及示例代码 简介AngularJS中使用factory和service的方法 简介AngularJS中$http服务的用法 AngularJS中$http服务常用的应用及参数 Angularjs 自定义服务的三种方式(推荐) AngularJs自定义服务之实现签名和加密 AngularJS 服务详细讲解及示例代码 AngularJS入门教程之REST和定制服务详解 AngularJS通过$http和服务器通信详解 AngularJS服务service用法总结 AngularJS Service 相关文章 AngularJS读取JSON及XML文件的方法示例 这篇文章主要介绍了AngularJS读取JSON及XML文件的方法,涉及AngularJS针对xml及json格式文件数据的读取、遍历、输出等相关操作技巧,需要的朋友可以参考下 2017-05-05 angularjs循环对象属性实现动态列的思路详解 这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 2021-11-11 AngularJS入门教程之Select(选择框)详解 本文主要介绍AngularJS Select,这里给大家整理一些资料详细讲解,并提供实例代码,有需要的小伙伴参考下 2016-07-07 浅谈angularjs依赖服务注入写法的注意点 下面小编就为大家带来一篇浅谈angularjs依赖服务注入写法的注意点。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 Angular中$compile源码分析 本文给大家分享的是通过angular中的$compile源码进行分析,从而更好的理解angular的使用,非常的不错,希望大家能够喜欢。 2016-01-01 angular4笔记系列之内置指令小结 这篇文章主要介绍了angular4笔记系列之内置指令小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 Angularjs单选改为多选的开发过程及问题解析 在项目中遇到这样的需求想把下拉框的单选改为多选,怎么实现呢?下面小编通过本文给大家分享angularjs单选改为多选的开发过程及问题解析,需要的朋友参考下 2017-02-02 AngularJS实现全选反选功能 这篇文章主要介绍了AngularJS实现全选反选功能,这里用到AngularJS四大特性之二—-双向数据绑定,对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧 2015-12-12 angular4强制刷新视图的方法 今天小编就为大家分享一篇angular4强制刷新视图的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angular中封装fancyBox(图片预览)遇到问题小结 这篇文章主要介绍了Angular中封装fancyBox(图片预览)遇到的问题小结,需要的朋友可以参考下 2017-09-09 最新评论

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务,或使用内建服务。

什么是服务?

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务,它可以返回当前页面的 URL 地址。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>

<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
  $scope.myUrl = $location.absUrl();
});
</script>

</body>
</html>

运行结果:

当前页面的url:

http://www.runoob.com/try/try.php?filename=try_ng_services

该实例使用了内建的 $location 服务获取当前页面的 URL。

注意: $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。

为什么使用服务?

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求,应用响应服务器传送过来的数据。

AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。

$http 服务

$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。

实例

使用 $http 服务向服务器请求数据:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>欢迎信息:</p>

<>{{myWelcome}}<>

</div>

<p> $http 服务向服务器请求信息,返回的值放入变量 "myWelcome" 中。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
 $http.get("welcome.htm").then(function (response) {
   $scope.myWelcome = response.data;
 });
});
</script>

运行结果:

欢迎信息:

      欢迎访问

$http 服务向服务器请求信息,返回的值放入变量 “myWelcome” 中。

以上是一个非常简单的 $http 服务实例,更多 $http 服务应用请查看 AngularJS Http 教程。

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

实例

两秒后显示信息:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>两秒后显示信息:</p>

<h1>{{myHeader}}</h1>

</div>

<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
 $scope.myHeader = "Hello World!";
 $timeout(function () {
   $scope.myHeader = "How are you today?";
 }, 2000);
});
</script>

</body>
</html>

运行结果:

两秒后显示信息:

How are you today?

$timeout 访问在规定的毫秒数后执行指定函数。

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

实例

每两秒显示信息:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>现在时间是:</p>

<h1>{{theTime}}</h1>

</div>

<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
 $scope.theTime = new Date().toLocaleTimeString();
 $interval(function () {
   $scope.theTime = new Date().toLocaleTimeString();
 }, 1000);
});
</script>

</body>
</html>

运行效果:

现在时间是:

下午3:41:09

$interval 访问在指定的周期(以毫秒计)来调用函数或计

创建自定义服务

你可以创建自定义的访问,链接到你的模块中:

创建名为hexafy 的访问:

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});

要使用自定义的访问,需要在定义过滤器的时候独立添加:

实例

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p>255 的16进制是:</p>

<h1>{{hex}}</h1>

</div>

<p>自定义服务,用于转换16进制数:</p>

<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
	this.myFunc = function (x) {
    return x.toString(16);
  }
});
app.controller('myCtrl', function($scope, hexafy) {
 $scope.hex = hexafy.myFunc(255);
});
</script>

</body>
</html>

运行结果:

255 的16 进制是:

f f

自定义服务,用于转换16进制数:

过滤器中,使用自定义服务

当你创建了自定义服务,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服务中使用它。

在过滤器 myFormat 中使用服务 hexafy:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp">
在过滤器中使用服务:

<h1>{{255 | myFormat}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
	this.myFunc = function (x) {
    return x.toString(16);
  }
});
app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
}]);

</script>

</body>
</html>

运行效果:

在过滤器中使用服务:

         f  f

在对象数组中获取值时你可以使用过滤器:

创建服务 hexafy:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>

<ul>
 <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

<p>过滤器使用服务将10进制转换为16进制。</p>
</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
	this.myFunc = function (x) {
    return x.toString(16);
  }
});
app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
}]);
app.controller('myCtrl', function($scope) {
  $scope.counts = [255, 251, 200];
});
</script>

</body>
</html>

运行效果:

在获取数组[255, 251, 200]值时使用过滤器:

  • ff
  • fb
  • c8

过滤器使用服务将10进制转换为16进制。

以上就是对AngularJS 服务的资料整理,后续继续补充,有需要的朋友参考下。

您可能感兴趣的文章:

  • angularJS Provider、factory、service详解及实例代码
  • AngularJs Creating Services详解及示例代码
  • 简介AngularJS中使用factory和service的方法
  • 简介AngularJS中$http服务的用法
  • AngularJS中$http服务常用的应用及参数
  • Angularjs 自定义服务的三种方式(推荐)
  • AngularJs自定义服务之实现签名和加密
  • AngularJS 服务详细讲解及示例代码
  • AngularJS入门教程之REST和定制服务详解
  • AngularJS通过$http和服务器通信详解
  • AngularJS服务service用法总结
张贴在3