AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）
1. AngularJS服务
AngularJS可注入类型包括：Service、Factory、Provider、Value及Constant。
2. Service
AngularJS Service是封装了一些特定业务逻辑的单例对象，在每个应用中只会被实例化一次（由$injector实例化），且延迟加载（需要时才会创建）。
AngularJS Service对外提供方法供其他组件调用。
2.1 AngularJS内置Service对象
AngularJS内置30多个服务。
1>. $location：返回当前页面的 URL 地址
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", ["$scope", "$location", function ($scope, $location) {
$scope.url = $location.absUrl();
}]);
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
{{ url }}
</div>
</body>
</html>
2>.$timeout：在指定的毫秒数后调用函数或计算表达式，只执行一次。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", ["$scope", "$timeout", function ($scope, $timeout) {
$scope.text = "Hello World!";
$timeout(function () {
$scope.text = "Hello AngularJS!";
}, 2000);
}]);
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
{{ text }}
</div>
</body>
</html>
3>.$interval：按照指定的周期（以毫秒计）来调用函数或计算表达式，会多次不停地调用执行。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", ["$scope", "$interval", function ($scope, $interval ) {
$scope.time = new Date().toLocaleTimeString();
$interval (function () {
$scope.time = new Date().toLocaleTimeString();
}, 1000);
}]);
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
{{ time }}
</div>
</body>
</html>
不使用 $interval 服务的情况下，运用 $apply显示时间。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", ["$scope", function ($scope) {
$scope.time = new Date().toLocaleTimeString();
$scope.setTime = function() {
// $apply访问并修改数据
$scope.$apply (function () {
$scope.time = new Date().toLocaleTimeString();
});
} setInterval($scope.setTime, 1000);
}]);
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
{{ time }}
</div>
</body>
</html>
2.2 自定义服务
AngularJS自定义服务语法格式：
var app = angular.module("app", []);
app.service("serviceName", function(){
// 属性、方法
});
其中：
第一个参数：Service名称
第二个参数：Service对象的构造函数，可以定义属性和方法来封装处理一些逻辑。
示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", ["$scope", "$datetime", function ($scope, $datetime) {
$scope.time = $datetime.getTime();
}]);
app.service("$datetime", function(){
this.getTime = function() {
return new Date().toLocaleTimeString();
};
});
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
{{ time }}
</div>
</body>
</html>
示例：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", ["$scope", "$interval", "$datetime", function ($scope, $interval, $datetime) {
$interval (function () {
$scope.time = $datetime.getTime();
}, 1000);
}]);
app.service("$datetime", function(){
this.getTime = function() {
return new Date().toLocaleTimeString();
};
});
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
{{ time }}
</div>
</body>
</html>
示例：在自定义的Service中可以注入其他Service对象。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.run(["$datetime", function ($datetime) {
$datetime.getTime();
}]);
app.service("$datetime", ["$interval", "$log", function($interval, $log) {
this.getTime = function() {
$interval (function () {
$log.info(new Date().toLocaleTimeString());
}, 1000);
};
}]);
</script>
</head>
<body>
</body>
</html>
3. Factory
4. Provider
5. Constant
constant创建的服务用来返回一个常量。
constant语法格式：
var app = angular.module("app", []);
app.constant(name, value);
其中，
参数name：创建服务的名称
value：一个常量，与服务名称对应的常量值或对象。当注入该服务之后，可以直接调用服务名对应的常量。
6. Value
AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）的更多相关文章
- angular 服务 service factory provider constant value
angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): ...
- angularjs---服务(service / factory / provider)
初angularJs时 常写一些不够优雅的代码 !我总结了一下看看各位有没有中枪的!-----( 这里只针对服务service及其相关! ) 以下做法不太优雅 兄弟controller 之间的相同 ...
- Android系统编程入门系列之服务Service齐头并进多线程任务
在上篇文章中初步了解了Android系统的四大组件之一的服务Service,在服务内可以执行无用户交互的耗时操作任务,但是包括之前关于界面系列文章在内,生命周期方法都是在主线程内被系统回调的.如果直接 ...
- Android系统编程入门系列之服务Service中的进程间通信
在上篇文章以线程间的通信方式Handler类结尾,服务Service还支持的进程间通信,又是具体怎么实现的呢?这就要用到加载服务一文中提到的AIDL语言规范了. AIDL是 Android Inter ...
- AngularJS 1.x系列：AngularJS服务-Service
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- 转载：[AngularJS系列] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)
来源:http://hellobug.github.io/blog/angularjs-providers/ 用AngularJS做项目,但凡用过什么service啊,factory啊,provide ...
- [AngularJS系列(4)] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)（转）
用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄 ...
- 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别，你知道么？
在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...
- 深究AngularJS——自定义服务详解(factory、service、provider)
前言 3种创建自定义服务的方式. Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...
随机推荐
- Spring框架基础（上）
spring是开源对轻量级框架 spring核心主要两部分 aop 面向切面编程,扩展功能不是修改源代码实现 aop采用横向抽取机制,取代了传统纵向继承体系重复代码(性能监视.事务管理.安全检查.缓存 ...
- finereport报表--动态格间运算 一
一.运算符: ! 绝对值 A2[A2:!1] ; A2 标示从列A纵向第2单元格开始,!1 表示第1个位置的单元格; [A2:!1] 代表索引,表示从A列纵向开始往下,第1个单元格的位置的索引 ...
- vue2.5.2版本 ：MAC设置应用在127.0.0.1:80端口访问； 并将127.0.0.1指向www.yours.com ；问题“ Invalid Host header”
0.设置自己的host文件,将127.0.0.1指向自己想要访问的域名 127.0.0.1 www.yours.com 1.MAC设置应用在127.0.0.1:80端口访问: config/index ...
- prufer序列笔记
prufer序列 度娘的定义 Prufer数列是无根树的一种数列.在组合数学中,Prufer数列由有一个对于顶点标过号的树转化来的数列,点数为n的树转化来的Prufer数列长度为n-2. 对于一棵确定 ...
- 【代码笔记】Web-CSS-CSS盒子模型
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Dynamics CRM图表高级话题：创建跨实体的图表
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复147或者20150728可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 制作图表你会发现,在界面上只能选 ...
- Registrator中文文档
目录 快速入门 概述 准备 运行Registrator 运行Redis 下一步 运行参考 运行Registrator Docker选项 Registrator选项 Consul ACL令牌 注册URI ...
- 与webview打交道踩过的坑
随着HTML5被越来越多的用到web APP的开发当中,webview这一个神器便日渐凸显出重要地位.简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码 ...
- sql server 临时表(上) Tempdb概述
一.概述 在sql server里临时表存储在TempDB库中,TempDB是一个系统数据库,它只有Simple恢复模式,也是最小日志记录操作.主要用于存放局部临时表,全局临时表,表变量,都是基于临时 ...
- Canadian-dollar_RMB
import pandas as pd import matplotlib.pyplot as plt import statsmodels as sm from statsmodels.graphi ...