AngularJS 1.x系列：AngularJS服务-Service
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>
4>.不使用 $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对象的构造函数，可以定义属性和方法来封装处理一些逻辑。
示例1：
<!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>
示例2：
<!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>
示例3：在自定义的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>
文章来源：AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）
AngularJS 1.x系列：AngularJS服务-Service的更多相关文章
- Android系统编程入门系列之服务Service齐头并进多线程任务
在上篇文章中初步了解了Android系统的四大组件之一的服务Service,在服务内可以执行无用户交互的耗时操作任务,但是包括之前关于界面系列文章在内,生命周期方法都是在主线程内被系统回调的.如果直接 ...
- Android系统编程入门系列之服务Service中的进程间通信
在上篇文章以线程间的通信方式Handler类结尾,服务Service还支持的进程间通信,又是具体怎么实现的呢?这就要用到加载服务一文中提到的AIDL语言规范了. AIDL是 Android Inter ...
- AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别，你知道么？
在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...
- [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
- angularjs中provider，factory，service的区别和用法
angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
- [AngularJS] 使用AngularAMD动态加载Service
[AngularJS] 使用AngularAMD动态加载Service 前言 「使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Contro ...
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
- AngularJS学习之旅—AngularJS 服务(八)
1.AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务.2.什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 Angular ...
随机推荐
- 迷你MVVM框架 avalonjs 0.99发布
在本版本主要是性能优化,添加一些有用的功能(如回调什么的),离成品阶段不远了. 修正 updateViewModel bug 修正监控数组的set方法 bug 添加data-each-rendered ...
- Apache Derby数据库系统使用方法
Apache Derby数据库系统使用方法 最近由于项目要求,试用了一下Apache Derby数据库,这里对了解到的内容做一个记录. Apache Derby是一个开源的关系型数据库管理系统,用Ja ...
- JanusGraph ：Cassandra作为存储后端的情况下，JanusGraph的安装方法
Cassandra作为存储后端的情况下,JanusGraph的安装方法 Cassandra作为存储后端的情况下,JanusGraph的安装分为四种方式. 分别是: 1.本地服务器模式(这里的服务器指的 ...
- Windows下Git中正确显示中文的设置方法
Windows下Git中正确显示中文的设置方法 具体设置方法如下: 进入目录etc:$ cd /etc 1. 编辑 gitconfig 文件:$ vi gitconfig.在其中增加如下内容: [gu ...
- 外网访问vmvare
使用端口映射即可,以tplink wr886n为例, 方法如下: 1.打开浏览器,输入默认ip192.168.0.1回车登录: 2.登录对话框,输入 密码点击确定: 3.点击转发规则--虚拟服务器,点 ...
- eclipse egit(分支管理 下)
在Git的分支merge中,不可能没有代码的冲突问题,特别在跟别人分工合作时.那该怎么解决? 1.新建一个conflict分支,在dev方法下添加一句 System.out.println(“Crea ...
- codeforce453DIV2——D. GCD of Polynomials
题意 给出n(1–150). 输出两个多项式A,B从常数到最高次的系数,使得对两个多项式求gcd时,恰好经过n步得到结果. 多项式的gcd一步是指(A(x),B(x))变成(B,A mod B)的过程 ...
- LoadRunner 脚本开发和常用函数
开发性能测试脚本原则.简单 正确 高效 在lr中,脚本运行是解释执行的.所以在运行时,需要先编译. 局部变量和全局变量 1.在init.action.end中定义的变量就是局部变量 2.在global ...
- Solidity字符串拼接实现oraclize动态查询
solidity本身没有字符串拼接功能,但是如果你恰巧要用oraclize api,那么可以使用oraclize api中的字符串拼接方法(strConcat).之所以oraclize api里会有s ...
- 数据预处理 center&scale&box-cox
http://stackoverflow.com/questions/33944129/python-library-for-data-scaling-centering-and-box-cox-tr ...