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

  1. angular 服务 service factory provider constant value

    angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): ...

  2. angularjs---服务(service / factory / provider)

    初angularJs时  常写一些不够优雅的代码  !我总结了一下看看各位有没有中枪的!-----( 这里只针对服务service及其相关! ) 以下做法不太优雅 兄弟controller 之间的相同 ...

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

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

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

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

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

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

  6. 转载：[AngularJS系列] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)

    来源:http://hellobug.github.io/blog/angularjs-providers/ 用AngularJS做项目,但凡用过什么service啊,factory啊,provide ...

  7. [AngularJS系列(4)] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)（转）

    用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄 ...

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

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

  9. 深究AngularJS——自定义服务详解(factory、service、provider)

    前言 3种创建自定义服务的方式.  Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...

随机推荐

  1. STM32-FreeRTOS快速学习之总结1

    1. 基础知识注意:在RTOS中是优先值越高则优先级越高(和ucos/linux的相反) 在移植的时候,主要裁剪FreeRTOS/Source/portable文件夹,该文件夹用来针对不同MCU做的一 ...

  2. TensorFlow与Flask结合识别手写体数字

    阅读本文约“2.2分钟” TensorFlow框架 ——TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统 ——可被用于语音识别或图像识别等多项机器学习和深度学习领域 ...

  3. CRM之分页

    分页简介 分页功能在网页中是非常常见的一个功能,其作用也就是将数据分割成多个页面来进行显示. 使用场景: 当取到的数据量达到一定的时候,就需要使用分页来进行数据分割. 当我们不使用分页功能的时候,会面 ...

  4. Apex 中文件夹相关的单元测试

    Salesforce 中的文件夹 在 Salesforce 中,我们可以建立各种文档.报表.仪表板.电子邮件模板等.它们都被保存在相应的文件夹中. Salesforce 的后端将这些文件夹保存为 Fo ...

  5. 华为防火墙USG6000V使用总结

    问题1.ge 1/0/0 的ip地址 20.0.0.2 ,从直连的对端20.0.0.1 无法ping. 但是从防火墙ping对端却是可以ping通? 原因: 华为新一代的防火墙,默认情况下,只有0口是 ...

  6. 记录CentOS 7.4 上安装MySQL&MariaDB&Redis&Mongodb

    记录CentOS 7.4 上安装MySQL&MariaDB&Redis&Mongodb 前段时间我个人Google服务器意外不能用,并且我犯了一件很低级的错误,直接在gcp讲服 ...

  7. 给IConfiguration写一个GetAppSetting扩展方法

    给 IConfiguration 写一个 GetAppSetting 扩展方法 Intro 在 .net core 中,微软已经默认使用 appsettings.json 来代替 app.config ...

  8. (办公)TOKEN

    token就是HTTP认证,输入正确的token,在放在Authorization header中发送给服务器,认证成功.,就可以正确的拿到接口数据. 举个例子: 第一步:  客户端发送http re ...

  9. git 的 origin 的含义

    我们从progit 一书中可以看到: 远程仓库名字 “origin” 与分支名字 “master” 一样,在 Git 中并没有任何特别的含义一样. 同时“master”是当你运行git init时默认 ...

  10. python正则表达式模块re

    正则表达式的特殊元素 匹配符号 描述 '.'(点dot) 在默认模式下,它匹配除换行符之外的任何字符.如果指定了DOTALL标志,则匹配包括换行符在内的任何字符 '^'(Caret) 匹配以字符串开头 ...