理解Angular 服务

什么是Angular Service

Angular 服务是为web应用执行特定任务的单例对象或方法。
注:如果组件是为了内容呈现的功能复用,那么服务就是为组件进行功能复用。

Angular有一些内建的服务(例如:$http),也可以创建自己的服务。内建的服务通常使用“$”开头(与jQuery类似)。

使用Angular 服务

在使用Angular服务的时候,只要将其注册成为Angular组件的一个依赖项目就可以了。Angular会自动对这个服务进行实例化、信赖处理等。

Angular使用“constructor”(构造器)进行信赖注入。信赖将会传递给组件的工厂或构造器方法。因为JavaScript是一个动态类型的语言,Angular的信赖注入子系统不能使用静态的类型来识别服务的信赖。因此,一个组件必须明确的通过使用一种“注释”注入方法来定义它的信赖。例如,使用$inject属性:

var MyController = function($location) { ... };
MyController.$inject = ['$location'];
myModule.controller('MyController', MyController);

或者提供一个内联的注入“注释”:

var myService = function($http) { ... };
myModule.factory('myService', ['$http', myService]);

参考:

定义一个服务

应用开发人员通过在Angular模块中注册“名字”与“服务工厂”来定义自己的服务。

服务的工厂方法的目的是用来生成单例对象(或者方法function)。生成的对象或者方法可以通过指定到这个服务的信赖来被注入到任意的组件当中。

Angular工厂方法使用消极执行策略,这意味着,只有当需要处理一个依赖的时候,才会为每一个服务执行一次。所有的事项都是依赖于这个服务来获取一个被服务工厂方法生成的实例。

管理服务信赖

Angular允许服务声明其他的服务作为信赖需要,用来构造它们的实例。

为了声明依赖,你可以在工厂方法的参数中指定它们,然后通过使用$inject属性、字符串数组或数组注释以注入注释标明这个方法。

使用数组注释:

function myModuleCfgFn($provide) {
$provide.factory('myService', ['dep1', 'dep2', function(dep1, dep2) {}]);
}

使用$inject属性:

下面是两个服务的例子,其中一个依赖另一个,并且这两个服务都依赖Angular框架提供的其他服务:

注意:

  • batchLog服务依赖于内建的$timeout和$log服务,并且允许消息输出到console.log日志文件中。
  • routeTemplateMonitor服务依赖于内建的$route服务就像我们自定义的batchLog服务。
  • 我们的两个服务都使用工厂方法来标识和数组注释来注入注释以声明它们的依赖。这里要注意的是,在数组中字符串的顺序要与在工厂方法的参数列表中的一致。除非依赖是从方法的参数列表中推断出来的,这个带有ID的数组和它们被注入的顺序决定各个服务被注入到哪里。

参考:

『AngularJS』Service的更多相关文章

  1. 『AngularJS』理解$Scope

    理解$Scope 执行概要 在AngularJS,一个子scope通常原型继承于它的父scope.应用于这个规则的表达式是一个使用scope:{...}的指令,这将创建一个『孤岛』scope(非原型继 ...

  2. 『AngularJS』$location 服务

    项目中关于 $location的用法 简介 $location服务解析在浏览器地址栏中的URL(基于window.location)并且让URL在你的应用中可用.改变在地址栏中的URL会作用到$loc ...

  3. 『AngularJS』创建 Service

    创建服务 Angular提供了几种有用的服务,对于所有的应用来说,你将会发现这些服务对于创建你自己的服务是有用处的.为了创建自己的服务,你应该从通过一个模块(module)注册一个服务工厂方法开始(可 ...

  4. 『AngularJS』一点小小的理解

    AngularJS 是一个前端的以Javascript为主的MVC框架.与AngularJS相类似的还有EmberJS. 随着时代在进步,各种各样的开发理念与开发框架不断的提出与发展,而就目前来说,除 ...

  5. 『AngularJS』ngShow

    原文 描述 ngShow指令显示或隐藏给定的基于标明ngShow属性的HTML元素.元素的显示或隐藏通过在元素上移除或添加ng-hide CSS类属性.".ng-hide"CSS类 ...

  6. 『AngularJS』ngValue

    原文 描述 绑定给定的表达式到input[select]或input[radio]的值,以便当这个元素被选中的时候,设置这个元素的ngModel到绑定的值.当需要使用ng-repeat来动态生成rad ...

  7. AngularJS』一点小小的理解

    『AngularJS』一点小小的理解   AngularJS 是一个前端的以Javascript为主的MVC框架.与AngularJS相类似的还有EmberJS. 随着时代在进步,各种各样的开发理念与 ...

  8. 『实践』VirtualBox 5.1.18+Centos 6.8+hadoop 2.7.3搭建hadoop完全分布式集群及基于HDFS的网盘实现

    『实践』VirtualBox 5.1.18+Centos 6.8+hadoop 2.7.3搭建hadoop完全分布式集群及基于HDFS的网盘实现 1.基本设定和软件版本 主机名 ip 对应角色 mas ...

  9. [原创] 【2014.12.02更新网盘链接】基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装

    [原创] [2014.12.02更新网盘链接]基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装 joinlidong 发表于 2014-11-29 14:25:50 ...

随机推荐

  1. POJ 2155 Matrix【二维树状数组+YY(区间计数)】

    题目链接:http://poj.org/problem?id=2155 Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissio ...

  2. [19/03/24-星期日] 容器_Collection(集合、容器)之List(表,有顺序可重复)

    一. 概念&方法 Collection 表示一组对象,它是集中.收集的意思.Collection接口的两个子接口是List.Set接口. 由于List.Set是Collection的子接口,意 ...

  3. Java实体类的属性类型与数据库表字段类型对应表

    原文地址:https://blog.csdn.net/lyhjava/article/details/50562786 Java中的数据类型和SQL中的数据类型有很多不一样,需要仔细区分,不然易在开发 ...

  4. 用keytool制作证书并在tomcat配置https服务(四)

    用keytool制作证书并在tomcat配置https服务(一) 用keytool制作证书并在tomcat配置https服务(二) 用keytool制作证书并在tomcat配置https服务(三) 上 ...

  5. 初学bind

    其实项目中还没有用到. 但自己还是想逐步了解一些高级的JS语法,不是为了炫技,也不像找前端的工作. 主要目的是:1.学习设计思想,提升解决问题的能力2.让自己的脑子动起来,别太笨. 简单的几句话总结一 ...

  6. HDFS副本存放读取

    HDFS作为Hadoop中 的一个分布式文件系统,而且是专门为它的MapReduce设计,所以HDFS除了必须满足自己作为分布式文件系统的高可靠性外,还必须为 MapReduce提供高效的读写性能,那 ...

  7. 大专生自学web前端前前后后

    先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...

  8. CentOS 7 安装oracle 11.2.0.4 Error in invoking target 'agent nmhs' of makefile

    %86时出现报错   Error in invoking target 'agent nmhs' of makefile 解决方案在makefile中添加链接libnnz11库的参数修改$ORACLE ...

  9. jquery mobile 移动web(4)

    下拉菜单: 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain. <div ...

  10. Form表单之复选框checkbox操作

    input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...