AngularJS服务

在使用AngularJS的路由管理和控制视图加载的时候,当新的视图加载进来,原有视图的控制器会被销毁,这是出于内存占用和性能的考虑。服务提供了一种能在应用的整个生命周期内保持和共享数据的方法,它能够在控制器之间进行通信,并且保持数据的一致性。

服务是一个单例对象,在每个应用中只会被实例化一次,并且是延迟加载的,服务提供了把与特定功能相关联的方法集中在一起的接口。就拿常用的$http服务为例,它提供了对浏览器的XMLHttpRequest对象的底层访问功能,我们可以通过$http的API与XMLHttpRequest进行交互,而不需要因为调用这些底层代码而污染应用。

angular.module("myApp", [])

.factory("userService", function($http) {

var current_user;

return {

getCurrentUser: function() {

return current_user;

},

setCurrentUser: function(user) {

current_user = user;

}

};

}); //示例服务,在应用的整个生命周期内保存current_user

为自己的应用创建服务是非常容易的,只需要注册这个服务就可以。服务被注册后,AngularJS编译器就可以引用它,并且在运行时把它当作依赖加载进来。服务名称的注册表使得在测试中伪造和剔除相互隔离的应用变得非常容易。

注册一个服务

用$injector来创建和注册服务有好几种方式

使用angular.module的factory API创建服务,是最常见也是最灵活的方式:

angular.module("myApp.services", [])

.factory("serviceName", function() {

var serviceInstance = {};

return serviceInstance; });

此时,serviceName已经注册成为这个AngularJS应用的一个服务了。

服务的工厂函数用来生成一个单例的对象或函数,这个对象或函数就是服务,它会存在于应用的整个生命周期内。同创建控制器的方法一样,服务的工厂函数既可以是一个函数也可以是一个数组:

angular.module("myApp.service", [])

.factory("serviceName", [function($http) {} ]);

使用服务

可以在控制器、指令、过滤器或另外一个服务中通过依赖声明的方式来使用服务。AngularJS会像平时一样在运行期自动处理实例化和依赖加载的相关事宜。将服务的名字当作参数传递给控制器函数,可以将服务注入到控制器中。当服务成为某个控制器的依赖,就可以在控制器中调用任何定义在这个服务对象上的方法。

myApp.controller("ServiceController", function($scope, $timeout, serviceName) {} );

像上面这样在自定义服务之前注入所有的AngularJS内置服务,这是约定俗成的规则。

为了在控制器之间共享数据,需要在服务中添加一个用来存储用户名的方法。记住,服务在应用的生命周期内是单例模式的,因此可以将用户名安全的储存在其中。

AngularJS应用中,factory()方法是用来注册服务的最常规方式,另外还有一些API可以在特殊的情况下帮助我们减少代码量。

factory()

service()

constant()

value()

provider()

如果希望在config()函数中可以对服务进行配置,必须用provider()来定义服务。

tips: 单例模式是一种常用的软件设计模式,在它的核心结构中只包含一个称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。

本文内容出自《AngularJS权威教程》一书。
时间: 2024-10-14 23:15:23

AngularJS服务的相关文章

AngularJS服务总结

在之前介绍AngularJS的博客中,简单的介绍了AngularJS提供的常用服务,以及如何自定义服务,具体可参见<AngularJS 服务(Service)>.在这一篇博客中,我将为大家详细介绍如何自定义服务,以及各种方式之间的区别. value(name, object) value(name, object)方法允许我们直接将一个普通值或对象作为服务.我们通过一段代码来看看如何使用: <!DOCTYPE html> <html> <head> <

angularjs 服务

内置服务 1.$timeout 2.$watch(obj,fun): fun(newVal,oldVal,scope) //newVal是新改变的值,oldVal是旧值 3.$destroy():作用域的销毁,如果子作用域不再有用了.那么子作用域的创建者就会负责用$destroy()来将它销毁.这回停止$digest再调用子作用域,并且让作用域占用的内容能够被回收. 内置函数: 1.dateFilter(time,format)//参数time是时间,format是格式化 angularjs 服

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

1.AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务.2.什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. 注意 $location 服务是作为一个参数传递到 controller 中.如果要使用它,需要在 controller 中定义. var app = angular

angularJS 服务--$provide里factory、service方法

服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通 信,并且能保证数据的一致性. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>2.angularjs自定义服务</title> 6 <script src="../js/angularjs.js"></scr

angularJS 服务二

$http服务 一 介绍 AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据.我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 二 使用 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容.这个函数返回一个promise对象,具有success和error两个方法. 返回一个promise对象: var promise=

angularJS 服务三

路由 一 简介 1.路由机制 为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面上放一个大大的返回按钮,让用户点击返回来导航,但总是无法避免用户习惯性的点后退.解决此问题的一个方法是使用 hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState()记录操作历史,监听popstate事件来进行视图切换,也有人把

AngularJS - 服务简介

服务是AngularJS中非常重要的一个概念,虽然我们有了控制器,但考虑到其生命实在脆弱,我们需要用到服务. 起初用service时,我便把service和factory()理所当然地关联起来了. 确实,factory()是创建一个服务的最简单的方式,但服务并非仅此而已. 这里记录一下我对服务的一些简单认识. Service 非常重要的一点 —— 服务是单例. 一个服务在一个AngularJS应用中只会被$injector实例化一次,并贯穿应用的整个生命周期,与脆弱的控制器们进行通信. 先从注册

如何利用AngularJS服务接入外部API

除了轻松对HTML进行扩展的能力之外,AngularJS还提供一套简便途径.帮助我们与外部API实现交互.在今天的教程中,我们将共同探讨如何利用其服务与GitHub的API相对接,进而创建一套简单的库浏览器. 第一步:准备工作 我们就以下面这套基础HTML模板为起点: <!DOCTYPE html> <html> <head> <title>GitHub Search</title> </head> <body> <

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http: