理解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. 自定义Powershell提示符

    实现效果: 实现原理: Powershell将个人配置脚本文件的地址存放在$profile变量中, 通过修改该变量达到想要的目的. 实现过程: 1>创建一个新的配置脚本: 2>编辑脚本内容 ...

  2. Spring Boot 配置文件详解:Properties和YAML

    一.配置文件的生效顺序,会对值进行覆盖: 1. @TestPropertySource 注解 2. 命令行参数 3. Java系统属性(System.getProperties()) 4. 操作系统环 ...

  3. Android学习笔记_42_各种图形的炫酷效果的实现和使用

    一.文档位置: 这里在android中的图形,在帮助文档的这个页面,  android-sdk-windows\docs\guide\topics\resources\drawable-resourc ...

  4. AngularJS 使用序号的表格

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. html 固定长度 超出长度 显示省略号

    a{         width: 80px;/* 要显示文字的宽度 */         float: left;/* 左对齐,不设置的话只在IE下好用 */         overflow: h ...

  6. 关于ProjectServer定制化项目中心页面

    ProjectServer界面很多客户接受不了,随便用户可以根据自己需要展示页面,但大多数国内用户喜欢确定的样式,我就是要这样的页面,不要个人定制. 那只有自己再做一个项目中心的webpart嵌入,对 ...

  7. Oracle中with关键字的使用

    open p_cr1 for with sqla as (select d.*, (select c.STATICMONTH from ly_zg_jzfbtstatic c where c.ID = ...

  8. 并发编程之多线程基础-join方法及优先级(五)

    join()方法作用 当在主线程当中执行到t1.join()方法时,就认为主线程应该把执行权让给t1 优先级 现代操作系统基本采用时分的形式调度运行的线程,线程分配得到的时间片的多少决定了线程使用处理 ...

  9. 转载:Python中的if __name__ == '__main__'

    刚开始学习Python时,对于有些书出现的函数带有“if __name__ == '__main__'”总是迷惑不解,比如<dive into Python>中开头的哪个根据输入的数字计算 ...

  10. js对URL的相关操作集锦

    1.location.href..... (1)self.loction.href="/url" window.location.href="/url"    ...