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的更多相关文章

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 ...

随机推荐

python：for语句的使用方法
for循环的语法格式: for i in range(n):#从数据类型中拿一个值赋值给i print(i)#打印i 例如: #for for i in range (1,6,2):#从一开始到六之前 ...
linux内核中task_struct与thread_info及stack三者的关系
在linux内核中进程以及线程(多线程也是通过一组轻量级进程实现的)都是通过task_struct结构体来描述的,我们称它为进程描述符.而thread_info则是一个与进程描述符相关的小数据结构,它 ...
Redhat 下添加用户到docker用户组
1. 检查系统中是否存在docker用户组,如果没有则手动添加 # sudo cat /etc/group |grep docker # sudo grouped -g 999 docker # -g ...
JS 实现 unicode 中文互转
// 转为unicode 编码 function encodeUnicode(str) { var res = []; for ( var i=0; i<str.length; i++ ) { ...
基于jquery 的插件,让IE支持placeholder属性
开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性,但是这个属性是html5中的,所以低版本的IE浏览器不支持.于是在百度找了一些解决方法,找了好几个都不是那么完美, ...
27-拓扑排序-poj1094
http://poj.org/problem?id=1094 Sorting It All Out Time Limit: 1000MS Memory Limit: 10000K Total Su ...
面试题:彻底理解ThreadLocal 索引的利弊背1
.索引利弊 --整理 1.索引的好处 a.提高数据检索的效率,降低检索过程中必须要读取得数据量,降低数据库IO成本. b.降低数据库的排序成本.因为索引就是对字段数据进行排序后存储的,如果待排序的 ...
gitlab-ci配置疑难备忘
最近在自搭的gitlab服务器上加上了ci,大部份操作都比较顺利,但是也碰到一些问题抓狂,记录如下. 1.关于一个project配多个runner:在gitlab-ci里是支持的,但是含义确有点反常, ...
浅谈android代码保护技术_加固
可看原文: http://www.cnblogs.com/jiaoxiake/p/6536824.html 导语我们知道Android中的反编译工作越来越让人操作熟练,我们辛苦的开发出一个apk,结 ...
easyUI form sumit 中文乱码
jsp 编码方式: pageEncoding="UTF-8" tomcat 编码方式: <Connector connectionTimeout="20000&qu ...

AngularJS 1.x系列：AngularJS服务-Service