AngularJS学习之旅—AngularJS 服务(八)
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 服务(八)的更多相关文章
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- AngularJS学习之旅—AngularJS 控制器(六)
1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...
- AngularJS学习之旅—AngularJS 指令(三)
1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...
- AngularJS学习之旅—AngularJS 表达式(二)
1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...
- AngularJS学习之旅—AngularJS 表单(十六)
一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...
- AngularJS学习之旅—AngularJS 事件(十四)
1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...
- AngularJS学习之旅—AngularJS HTML DOM(十三)
1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...
- AngularJS学习之旅—AngularJS Table(十一)
1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...
- AngularJS学习之旅—AngularJS Select(十)
1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...
随机推荐
- 调用链Cat介绍
1. 调用链Cat 1.1. 调用链演进 1.2. 开源产品比较 1.3. 监控场景 1.4. cat的增值作用 1.5. cat典型报表 1.5.1. 应用报错大盘 1.5.2. 业务大盘 1.5. ...
- 解决Xftp连接不上Linux虚拟机问题。
首先 打开cmd窗口 ping一下 虚拟机的ip 这样证明是可以连接的,如果不可以就是你ip地址这块的问题. 可以之后打开Xftp新建 ,把默认的FTP改成SFTP.
- 【web.xml】项目从web.xml开始
前言 依自己目前的所闻所见,每个项目的WEB-INF下都会带有一个web.xml配置文件.当启动项目时,web容器(tomcat)会首先去读取web.xml中的内容,读取加载完成后才算完成了项目的启动 ...
- springcloud之服务注册与发现
本次分享的是关于springcloud服务注册与发现的内容,将通过分别搭建服务中心,服务注册,服务发现来说明:现在北京这边很多创业公司都开始往springcloud靠了,可能是由于文档和组件比较丰富的 ...
- Django+Bootstrap+Mysql 搭建个人博客(五)
5.1.自定义403,404和500页面 (1)website/urls.py from blog import views as blog_views handler403 = blog_views ...
- oracle调整内存大小
1.查看已分配内存,看到memory_max_target为20GSQL> show parameter sga NAME TYPE VALUE- ...
- [工具向]__关于androidstudio工具使用过程中学习到的一些知识点简记
前言 在我学习android开发课程的过程中,我们通常只会关注编程语言上面的一些知识点与问题,而忽略了开发工具的使用上的一些遇到的一些知识,其实每一款IDE工具都是集编程语言大成而开发出来的,其中有很 ...
- 配置最新版LAMP环境
本篇文章讲解的是在centos7.3下配置 Apache2.4 + MySQL5.7 + PHP7.1.8 (如果是Nginx请跳过Apache流程继续往下看,所有流程本人已临床验证无数遍,绝无问题) ...
- .NET Core中实现AOP编程
AOP全称Aspect Oriented Progarmming(面向切面编程),其实AOP对ASP.NET程序员来说一点都不神秘,你也许早就通过Filter来完成一些通用的功能,例如你使用Autho ...
- [一] java8 函数式编程入门 什么是函数式编程 函数接口概念 流和收集器基本概念
本文是针对于java8引入函数式编程概念以及stream流相关的一些简单介绍 什么是函数式编程? java程序员第一反应可能会理解成类的成员方法一类的东西 此处并不是这个含义,更接近是数学上的 ...