AngularJS教程 AngularJS从0到1——AngularJS服务
一、为什么要用AngularJS服务我们之前已经学过AngularJS中的控制器了,在控制器中,我们可以定义函数、变量。设想一下,是否会遇到这样的问题:多个页面中同时用到一个功能相似的函数,但是因为页面不一样,所以每个页面对应的控制器中我们都写了一遍。 如果你学到其他编程语言,比如Java,就会自然联想到我们应该把这个函数封装到一个公共类里,以此简化代码,方便调用。 AngularJS中的服务就是由此而来。 二、AngularJS服务是什么AngularJS中的服务指的是一些封装好的函数或对象,开发者可以在整个应用范围内访问服务中的函数或对象。 每个服务只有一个实例(类似于Java中被static修饰过的),所以如果在一个地方对该实例进行变更,那么就是在这个应用范围内进行变更。 注意:AngularJS服务和Android里的服务不是一回事,Android里的服务指的是后台任务执行单元,这里的服务仅仅是一组对象或者方法的集合。 AngularJS中服务的创建方式有如下几种:
三、AngularJS中如何使用服务3.1 系统内置服务AngularJS提供了一系列的内置服务,也就是AngularJS为我们封装了一些公共的方法或对象,我们只需要拿来直接用即可。常见的系统内置服务有:
注意:AngularJS内置的服务都是以
html代码 <!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<p ng-bind="ctrl.path"></p>
</body>
</html>
app.js代码(新建一个javascript文件,起名为app.js,当然也可起别的名字) angular.module('app',[])
.controller('MainCtrl',['$location',function($location){//注入$location服务
var self = this;
self.path = $location.absUrl();//获得当前URL,把此值赋值给页面path
}])
代码分析 我们新建了一个JavaScript文件,起名为app.js。 注意这里的controller函数,第二个参数数组里多了一个陌生的角色—— 在使用的时候注意,数组中的function函数前,写服务的名字,用单引号括起来,function参数中给服务起一个别名(虽说名字不限制,但通常就是用服务本身的名字),这里面的名字不需要用单引号。使用的时候,我们直接用这个别名进行调用即可。其中 此处只以 3.2 自定义服务使用factory方式创建服务html代码 app.js代码 angular.module('app','myservice',function($location,myservice){//注入$location服务
var self = this;
self.path = $location.absUrl();//获得当前URL,把此值赋值给页面path
myservice.setTitle('首页');//使用自定义服务对象调用其内部方法
}])
service.js(新建一个js文件,起名service.js,当然可以起别的名字) angular.module('app')
.factory('myservice',[function(){
//定义一个对象,在最后返回
var f = {
//这里面可以定义对象,也可以定义方法
setTitle:function(title){
document.getElementById('title').innerHTML=title;
}
};
return f;//注意这里要有返回值
}])
以上,就是使用factory创建自定义服务的方法。另外,还可以使用service和provider创建自定义服务。 四、美图欣赏(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- VIM错误:E474:无效的参数:listchars = tab:?·,trail:
- AF_INET域与AF_UNIX域socket通信原理对比
- shell输入输出重定向及管道命令
- WebService大讲堂之Axis2(1):用POJO实现0配置的WebServi
- 如何在Scala中导入没有路径依赖的内部类?
- go – stdout被缓冲在docker容器中
- web-server – 如何监控memcached驱逐?
- anglejs – 是否可以将“克拉玛”(Karma)与角度场景混合?
- Webservice_10_Stax的基本操作(XPath方式读取xml,用XMLStr
- jax-ws 实现webservice