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 1.x系列:AngularJS服务-Service的更多相关文章

  1. Android系统编程入门系列之服务Service齐头并进多线程任务

    在上篇文章中初步了解了Android系统的四大组件之一的服务Service,在服务内可以执行无用户交互的耗时操作任务,但是包括之前关于界面系列文章在内,生命周期方法都是在主线程内被系统回调的.如果直接 ...

  2. Android系统编程入门系列之服务Service中的进程间通信

    在上篇文章以线程间的通信方式Handler类结尾,服务Service还支持的进程间通信,又是具体怎么实现的呢?这就要用到加载服务一文中提到的AIDL语言规范了. AIDL是 Android Inter ...

  3. AngularJS 1.x系列:AngularJS服务-Service、Factory、Provider、Value及Constant(5)

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

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

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

  5. [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  6. angularjs中provider,factory,service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  7. [AngularJS] 使用AngularAMD动态加载Service

    [AngularJS] 使用AngularAMD动态加载Service 前言 「使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Contro ...

  8. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

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

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

随机推荐

  1. saltstack系列(六)——zmq扩展(二)

    问题 我们已经熟练的掌握了REQ/REP模式,它是一个一对多的模式,一个REP对应多个REQ. 但是现实工作中,我们会遇到这样的难题,一个REP无法满足REQ的提问,因为REQ太多了,虽然可以增加一个 ...

  2. 关闭SublimeText自动更新

    [关闭SublimeText自动更新] 1.找到Preferences -> Settings-User(设置用户) 2.在最后一个花括号结尾(“}”)前添加一句:”update_check&q ...

  3. Linux 安装(重装)mysql

    1 新建存放mysql相关文件的文件夹 mkdir -p /export/servers/mysql //存放mysql相关的几个rpm文件 2 查看原有mysql 并卸载 rpm -qa | gre ...

  4. JVM 对象状态判断01

    1 引用计数法     给一个对象添加一个引用计数器,每当有一个地方引用时,计数器加1,当引用失效的时候,计数器减去1.当计数器为0的时候,表示对象不可能再被使用.此时表明该对象可以被回收.     ...

  5. 无限极分类的JS实现

    纯JS实现无限极分类 <!DOCTYPE html> <html> <head> <title></title>//引入Jquery < ...

  6. ajax load事件

    ajax.load  使用ajax 来改变div元素文本. load( url [, data][, callback] ) load()方法的传递方式根据参数data来自动指定.如果没有参数传递,则 ...

  7. Setting up an OpenGL development environment in ubuntu

    1.opening terminal window and entering the apt-get command for the packages: sudo apt-get install me ...

  8. 当集合里存储的是URL时的一些问题总结

    先看道题吧: package com.lk.C; import java.net.MalformedURLException; import java.net.URL; import java.uti ...

  9. weblogic参数说明

    公司有个项目,部署在weblogic8.1上之后,发现比在tomcat下慢很多,经过分析排查,原因是web应用的WEB-INF下的weblogic.xml里的参数设置不合理(使用默认值有时并非最佳值) ...

  10. list 的扩展

    数据挖掘中会遇到添加多个新的特征s,对一个feature = list()来说, 除了可以用 feature.append('xx') # 在尾部添加一个特征 feature.extend(['xx' ...