首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS入门教程之服务(Service)

Posted in Javascript onJuly 27, 2016

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入门教程之服务(Service)

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
线路分流自动跳转代码；希望对大家有用！
Dec 02 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
微信JSSDK上传图片
Aug 23 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
网络传输协议（http协议）
Nov 18 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
AngularJS 过滤器的简单实例
Jul 27 #Javascript
AngularJS延迟加载html template
Jul 27 #Javascript
AngularJS入门教程之控制器详解
Jul 27 #Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 #Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 #Javascript
AngularJS入门之动画
Jul 27 #Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 #Javascript
双向链表(6) text-shadow(1) zabbix(9) 区块链(2) NumPy(2) TypeScript(2) keeplive_timeout(1) http_stub_status_module(1) location(2) RTMP(1)
You might like
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
DW中链接mysql数据库时，建立字符集中文出现乱码的解决方法
2010/03/27 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
22点关于jquery性能优化的建议
2014/05/28 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
Python异常学习笔记
2015/02/03 Python
Python压缩和解压缩zip文件
2015/02/14 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
python如何修改文件时间属性
2021/02/05 Python
综合测评自我鉴定
2013/10/08 职场文书
室内设计自我鉴定
2013/10/15 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
心理学专业求职信
2014/06/16 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
典型事迹材料范文
2014/12/29 职场文书
中学生学习保证书
2015/02/26 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
运动会主持人开幕词
2016/03/04 职场文书
同学联谊会邀请函
2019/06/24 职场文书