1、AngularJS 服务(Service)
  AngularJS 中你可以创建自己的服务,或使用内建服务。
2、什么是服务?
  在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
  AngularJS 内建了30 多个服务。
  有个 $location 服务,它可以返回当前页面的 URL 地址。
  注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

3、为什么使用服务?
  在很多服务中,比如 $location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象,但 window.location 对象在 AngularJS 应用中有一定的局限性。
  AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。

  $location vs window.location

  window.location $location.service
目的 允许对当前浏览器位置进行读写操作 允许对当前浏览器位置进行读写操作
API 暴露一个能被读写的对象 暴露jquery风格的读写器
是否在AngularJS应用生命周期中和应用整合 可获取到应用生命周期内的每一个阶段,并且和$watch整合
是否和HTML5 API的无缝整合 是(对低级浏览器优雅降级)
和应用的上下文是否相关 否,window.location.path返回"/docroot/actual/path" 是,$location.path()返回"/actual/path"

 

  $http 服务

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

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

  $timeout 服务

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

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

  $interval 服务

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

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

  创建自定义服务

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

实例

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<script src="js/angular.min.js"></script>
</head> <body>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- $location服务 -->
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
<!-- $http 服务 -->
<p>欢迎信息:</p>
<h3>{{myWelcome}}</h3>
<p> $http 服务向服务器请求信息,返回的值放入变量 "myWelcome" 中。</p>
<!-- $timeout 服务 -->
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>
<!-- $interval 服务 -->
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<!-- 创建自定义服务 -->
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
<p>自定义服务,用于转换16进制数:</p>
<!-- 在过滤器中使用自定义服务 -->
<p>在过滤器中使用服务:</p>
<h1>{{255 | myFormat}}</h1>
<!-- 在对象数组中获取值时你可以使用过滤器 -->
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
</body> </html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$location,$http,$timeout,$interval,hexafy) {
//$location服务
$scope.myUrl = $location.absUrl();
//$http服务
$http.get("welcome.json").then(function (response) {
$scope.myWelcome = response.data[0].name;
});
//$timeout服务
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
//$interval 服务
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
//自定义服务
$scope.hex = hexafy.myFunc(255);
//在对象数组中获取值时你可以使用过滤器
$scope.counts = [255, 251, 200]; });
//自定义服务
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>

页面

AngularJS学习之旅—AngularJS 服务(八)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  3. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  4. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  5. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  6. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  7. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  8. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

  9. AngularJS学习之旅—AngularJS Select(十)

    1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...

随机推荐

  1. 调用链Cat介绍

    1. 调用链Cat 1.1. 调用链演进 1.2. 开源产品比较 1.3. 监控场景 1.4. cat的增值作用 1.5. cat典型报表 1.5.1. 应用报错大盘 1.5.2. 业务大盘 1.5. ...

  2. 解决Xftp连接不上Linux虚拟机问题。

    首先 打开cmd窗口 ping一下 虚拟机的ip 这样证明是可以连接的,如果不可以就是你ip地址这块的问题. 可以之后打开Xftp新建 ,把默认的FTP改成SFTP.

  3. 【web.xml】项目从web.xml开始

    前言 依自己目前的所闻所见,每个项目的WEB-INF下都会带有一个web.xml配置文件.当启动项目时,web容器(tomcat)会首先去读取web.xml中的内容,读取加载完成后才算完成了项目的启动 ...

  4. springcloud之服务注册与发现

    本次分享的是关于springcloud服务注册与发现的内容,将通过分别搭建服务中心,服务注册,服务发现来说明:现在北京这边很多创业公司都开始往springcloud靠了,可能是由于文档和组件比较丰富的 ...

  5. Django+Bootstrap+Mysql 搭建个人博客(五)

    5.1.自定义403,404和500页面 (1)website/urls.py from blog import views as blog_views handler403 = blog_views ...

  6. oracle调整内存大小

    1.查看已分配内存,看到memory_max_target为20GSQL> show parameter sga NAME                     TYPE     VALUE- ...

  7. [工具向]__关于androidstudio工具使用过程中学习到的一些知识点简记

    前言 在我学习android开发课程的过程中,我们通常只会关注编程语言上面的一些知识点与问题,而忽略了开发工具的使用上的一些遇到的一些知识,其实每一款IDE工具都是集编程语言大成而开发出来的,其中有很 ...

  8. 配置最新版LAMP环境

    本篇文章讲解的是在centos7.3下配置 Apache2.4 + MySQL5.7 + PHP7.1.8 (如果是Nginx请跳过Apache流程继续往下看,所有流程本人已临床验证无数遍,绝无问题) ...

  9. .NET Core中实现AOP编程

    AOP全称Aspect Oriented Progarmming(面向切面编程),其实AOP对ASP.NET程序员来说一点都不神秘,你也许早就通过Filter来完成一些通用的功能,例如你使用Autho ...

  10. [一] java8 函数式编程入门 什么是函数式编程 函数接口概念 流和收集器基本概念

      本文是针对于java8引入函数式编程概念以及stream流相关的一些简单介绍 什么是函数式编程?   java程序员第一反应可能会理解成类的成员方法一类的东西 此处并不是这个含义,更接近是数学上的 ...