首页
所有分类
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 相关文章推荐
javascript 学习之旅 （2）
Feb 05 Javascript
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
JS实现购物车特效
Feb 02 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
vue实现图片上传功能
May 28 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
保证书(97) 制度(225) 请假条(31) 决心书(42) 评语(336) 寄语(276) 活动总结(790) 责任书(145) 倡议书(159) 感谢信(72)
You might like
php处理斐波那契数列非递归方法
2012/02/04 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
Python中super关键字用法实例分析
2015/05/28 Python
Python中super()函数简介及用法分享
2016/07/11 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python数据结构之单链表详解
2017/09/12 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python实现抢购IPhone手机
2018/02/07 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Python 实现数组相减示例
2019/12/27 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
django中related_name的用法说明
2020/05/20 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
企业管理专业个人求职信范文
2013/09/24 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
大学生助学金感谢信
2015/01/21 职场文书
师范生教育见习总结
2015/06/23 职场文书
公司职员入党自传书
2015/06/26 职场文书
2019银行竞聘书
2019/06/21 职场文书