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

什么是服务？

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

AngularJS 内建了30 多个服务。

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

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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>

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

为什么使用服务？

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

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

$http 服务：

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

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

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

<h1>{{myWelcome}}</h1>

</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>

</body>

</html>

$timeout 服务：

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

两秒后显示信息:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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>

$interval 服务：

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

每秒显示信息:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.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>

创建自定义服务：

你可以创建访问自定义服务，链接到你的模块中：

创建名为hexafy 的访问:

app.service('hexafy', function() {

    this.myFunc = function (x) {

        return x.toString(16);

    }

});

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

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

app.controller('myCtrl', function($scope, hexafy) {

    $scope.hex = hexafy.myFunc(255);

});

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

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

app.filter('myFormat',['hexafy', function(hexafy) {

    return function(x) {

        return hexafy.myFunc(x);

    };

}]);

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

创建服务 hexafy:

<ul>

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

</ul>

AngularJS 服务(Service)的更多相关文章

  1. AngularJS 1.x系列：AngularJS服务-Service

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  2. AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  3. 41.AngularJS 服务(Service)

    转自:https://www.cnblogs.com/best/tag/Angular/ 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. A ...

  4. angularjs服务-service

    Service 的特性 ①service都是单例的 ②service由$injector 负责实例化 ③service在整个应用的声明周期中存在,可以用来共享数据 ④在需要使用的地方利用依赖注入ser ...

  5. AngularJS学习之旅—AngularJS 服务(八)

    1.AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务.2.什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 Angular ...

  6. AngularJS：Service

    ylbtech-AngularJS:Service 1.返回顶部 1. AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 An ...

  7. 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别，你知道么？

    在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...

  8. 前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

  9. 前端MVC学习笔记（三）——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

随机推荐

  1. UIMenuController使用

    - (void)bubbleDidLongPress:(UILongPressGestureRecognizer *)gestureRecognizer { if(gestureRecognizer. ...

  2. STM32通用定时器（转载）

    STM32的定时器功能很强大,学习起来也很费劲儿. 其实手册讲的还是挺全面的,只是无奈TIMER的功能太复杂,所以显得手册很难懂,我就是通过这样看手册:while(!SUCCESS){看手册-}才搞明 ...

  3. Python自动化之面向对象进阶

    1 静态方法 静态方法是不可以访问实例变量或类变量的,一个不能访问实例变量和类变量的方法,其实相当于跟类本身已经没什么关系了,它与类唯一的关联就是需要通过类名来调用这个方法. class Dog(ob ...

  4. openerp child_of操作符深度解析

    child_of  此操作符,从代码来看,等价于: [('x','child_of',id)] ==>  x.prarent_left >=id.parent_left && ...

  5. 如何解决phpcms后台验证码不显示的问题

    方法一: 主要在于是否开启gd库 查看办法 找到php.ini文件 搜索extension=php_gd2.dll这段代码(windows) 然后把前面的;符号去掉即可. centOS6.5中可能需要 ...

  6. oracle异常记录

    2015年9月14 1.在csdn论坛中看帖子,遇到的一个问题:ORA-01422 实际返回的行数超出请求的行数.

  7. 指针 与 数组 以及 a 与 &a的区别

      指针 与数组 并没有什么关系,   指针就是指针,指针变量在32位系统下,永远占4个byte,其值为某一个内存的地址,指针可以指向任何地方,但是不是任何地方你都能通过这个指针变量访问到;   数组 ...

  8. 华为 MATE7 调试 LOCAT 日志不输出问题

    [转]华为 MATE7 调试 LOCAT 日志不输出问题 http://www.cnblogs.com/glaivelee/p/4593221.html 用手机进行调试,在电脑上不显示logcat信息 ...

  9. Linux下如何移除同时在线的用户

    Linux下移除同时在线的用户太多时,shell操作会变得比较卡,很多时候经常是直接关闭终端导致不正常退出,一般要等上一段时间才会退出,这个时候主动结束用户进程使用户下线是比较好的方式,方法如下: 使 ...

  10. 请不要用SECONDS_BEHIND_MASTER来衡量MYSQL主备的延迟时间【转】

    本文来自:http://www.woqutech.com/?p=1116 MySQL 本身通过 show slave status 提供了 Seconds_Behind_Master ,用于衡量主备之 ...