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 服务的资料整理,后续继续补充,有需要的朋友参考下。

Javascript 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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
You might like
人族 Terran 魔法与科技
2020/03/14 星际争霸
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
vue组件实例解析
2017/01/10 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
网络技术专业求职信
2014/07/13 职场文书
2014年度党员自我评议
2014/09/13 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
2022微信温控新功能上线
2022/05/09 数码科技