angularJS服务一

一 认识服务

1.服务这个概念其实并不陌生,在其他语言中如java便有这样的概念,其作用就是对外提供某个特定的功能,如消息服务,文件压缩服务等,是一个独立的模块。ng的服务是一个单例对象或函数,对外提供特定的功能。

2.特点:首先是一个单例,即无论这个服务被注入到任何地方,对象始终只有一个实例。

其次这与我们自己定义一个function然后在其他地方调用不同,因为服务被定义在一个模块中,所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。

3.ng提供了很多内置的服务,如$location,$scope,$rootScope,$http,$q,$resource,$routeProvider等等。我们在controller中直接声明$location服务,这依靠ng的依赖注入机制。$location提供地址栏相关的服务,我们在此只是简单的获取当前的地址。

服务的使用是如此简单,我们可以把服务注入到controller、指令或者是其他服务中。

二 定义服务

1.如同指令一样,系统内置的服务以$开头,我们也可以自己定义一个服务。定义服务的方式有如下几种:

使用系统内置的$provide服务

使用Module的factory方法

使用Module的service方法

2.举例:

//使用$provide来定义

var app = angular.module(‘MyApp‘, [], function($provide) {

$provide.factory(‘remoteData‘, function() {

var data = {name:‘n‘,value:‘v‘};

return data;

});

});

//使用factory方法

app.factory(‘remoteData‘,function(){

var data = {name:‘n‘,value:‘v‘};

return data;

});

//使用service方法

app.service(‘remoteData‘,function(){

this.name = ‘n‘;

this.value = ‘v‘;

});

Module的factory和$provide的factory方法是一模一样的 ,再看Module的service方法,它没有return任何东西,是因为service方法本身返回一个构造器,系统会自动使用new关键字来创建出一个对象。所以我们看到在构造器函数内可以使用this,这样调用该服务的地方便可以直接通过remoteData.name来访问数据了。比较常用的是factory方法。

举个例子

HTML部分:

<div ng-app="MyApp">

<div ng-controller="testC2">

<button ng-click="getData()">获取远程数据</button>

</div>

</div>

JS部分:

var app = angular.module(‘MyApp‘, []);

app.controller(‘testC2‘,function($scope,remoteData){

$scope.getData = function(){

alert(‘name:‘+remoteData.name+‘   value:‘+remoteData.value);

}

});

app.factory(‘remoteData‘,function(){

var data = {name:‘n‘,value:‘v‘};

return data;

});

三 服务中的依赖关系

1.服务与服务中间可以有依赖关系,例如我们这里定义一个名为validate的服务,它的作用是验证数据是否合法,它需要依赖我们从远程获取数据的服务remoteData。

HTML部分:

<div ng-app="MyApp">

<div ng-controller="testC3">

<button ng-click="validateData()">验证数据</button>

</div>

</div>

JS部分:

var app = angular.module(‘MyApp‘, []);

app.controller(‘testC3‘,function($scope,validate){

$scope.validateData = validate;

});

app.factory(‘remoteData‘,function(){

var data = {name:‘n‘,value:‘v‘};

return data;

});

app.factory(‘validate‘,function(remoteData){

return function(){

if(remoteData.name==‘n‘){

alert(‘验证通过‘);

}

};

});

2.在factory的参数中,我们可以直接传入服务remoteData,ng的依赖注入机制便帮我们做好了其他工作。不过一定要保证这个参数的名称与服务名称一致,ng是根据名称来识别的。若参数的名次与服务名称不一致,你就必须显示的声明一下,方式如下:

app.factory(‘validate‘,[‘remoteData‘,function(remoteDataService){

return function(){

if(remoteDataService.name==‘n‘){

alert(‘验证通过‘);

}

};

}]);

controller中注入服务也是同样的道理,使用的名称需要与服务名称一致才可以正确注入,这里有两种方法:

法一:与上面的类似

app.controller(‘testC‘,[‘$scope‘,‘remoteData‘,function($scope,rd){

$scope.getData = function(){

alert(‘name:‘+rd.name+‘   value:‘+rd.value);

}

}]);

法二:使用$inject手动指定注入的服务

function testC(scope,rd){

scope.getData = function(){

alert(‘name:‘+rd.name+‘   value:‘+rd.value);

}

}

testC.$inject = [‘$scope‘,‘remoteData‘];

时间: 2024-10-26 23:09:31

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:

AngularJS服务

在使用AngularJS的路由管理和控制视图加载的时候,当新的视图加载进来,原有视图的控制器会被销毁,这是出于内存占用和性能的考虑.服务提供了一种能在应用的整个生命周期内保持和共享数据的方法,它能够在控制器之间进行通信,并且保持数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次,并且是延迟加载的,服务提供了把与特定功能相关联的方法集中在一起的接口.就拿常用的$http服务为例,它提供了对浏览器的XMLHttpRequest对象的底层访问功能,我们可以通过$http的API与XMLH