AngularJS内建服务以及自定义服务的用法
在AngularJS中， 服务是一个比较重要的部分，它是一个对象或者是函数，可以在你的AngularJS的应用中使用。接下来介绍几种比较常用的内建服务以及自定义服务的方法。
[内建服务]
（1）location服务
location服务返回当前页面的地址，需要注意的是location服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。
>>>代码部分
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</html>
（2）$http服务
$http服务： 服务向服务器发送请求，应用响应服务器传送过来的数据。
>>>代码部分
<div ng-app="myApp" ng-controller="myCtrl">
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
(3) $timeout服务
AngularJS $timeout 与 JS window.settimeout 函数相对应，实现效果相同
代码如下>>>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
代码所执行的效果是，2s后执行代码。
（4）$interval服务
AngularJS $interval 与 JS window.settimeinterval 函数相对应，实现效果相同
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
【自定义服务】
1、service
angular.module("app",[])
.controller("ctrl",function($scope,$hexafy){}）
.service('$hexafy', function() {
this.$$gongneng = "将转入的数字，转为16进制";
this.myFunc = function (x) {
return x.toString(16);
}
})
2、factory
factory 是一个函数用于返回值,通常我们使用 factory 函数来计算或返回值。(factory使用上，与service差距不大)
angular.module("app",[])
.config()
.controller("ctrl",function($scope,hexafy){
$scope.gongneng = hexafy.gongneng;
$scope.num = hexafy.myFunc(255);
})
.factory('hexafy',function(){
var obj = {
gongneng : "将转入的数字，转为16进制",
myFunc:function(x){
return x.toString(16);
}
};
return obj;
})
3、provider
1、在AngularJS中，Service，factory都是基于provider实现的。
2、在provider中，通过$get()方法提供了factory的写法，用于返回 value/service/factory。；
3、provider是三种自定义服务中，唯一可以写进config配置阶段的一种。
如果服务，必须要在配置阶段执行，那么必须使用provider。否则，一般使用Service或factory
.controller("ctrl",function($scope,hexafy){
$scope.gongneng = hexafy.gongneng;
$scope.num = hexafy.myFunc(255);
})
/*定义一个provider服务*/
.provider('hexafy',function(){
//默认使用Service的写法
// this.gongneng = "将转入的数字，转为16进制";
this.$get = function(){
var obj = {
gongneng : "将转入的数字，转为16进制",
myFunc : function(x){
return x.toString(16);
}
}
return obj;
}
})
AngularJS内建服务以及自定义服务的用法的更多相关文章
- Angular.js之服务与自定义服务学习笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 运行于Windows内建账户下的服务访问映射网络驱动器的方法
Windows服务如果是运行在本地系统帐户下或本地服务帐户下,它只能访问这个账户自己创建的映射驱动器,UNC路径访问则不受次限制. LocalService Account (NT AUTHORITY ...
- angularjs factory,service,provider 自定义服务的不同
angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...
- 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别，你知道么？
在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...
- angular（3）服务 --注入---自定义模块--单页面应用
ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...
- AngularJs学习笔记5——自定义服务
前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...
- angularjs 自定义服务的三种方式
angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...
- angularJs自定义服务（实现签名和加密）
写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...
- angularJs自定义服务
在AngularJS中,系统内置的服务都是以$开头,所以我们的自定义服务尽量避免以$开头.自定义服务的方式有如下几种: 使用Module的provider方法 使用Module的factory方法 使 ...
随机推荐
- [ASP.NET]JQuery直接调用asp.net后台WebMethod方法
在项目开发碰到此类需求,特此记录下经项目验证的方法总结. 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod] 命名空间 1.无参数的方法调用 注意:方 ...
- C#克隆
克隆方法是原型设计模式中必须使用的方式,它将返回一个与当前对象数据一致的对象.正如其名,犹如一个模子雕刻而出.克隆类型分为两种:浅克隆.深克隆. 1.浅克隆 浅克隆方式是最简单.最直接的方式.只需要类 ...
- Elasticsearch、Kibana Windows下环境搭建
Elasticsearch 簡介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是 ...
- CC2530学习路线-基础实验-GPIO 控制LED灯亮灭(1)
目录 1.前期预备知识 1.1 新大陆ZigBee模块LED灯电路 1.2 CC2530相关寄存器 1.3 寄存器操作技巧 1.4 CPU空转延时 1.4 操作流程图 2.程序代码 The End 1 ...
- 【转】Lucene工作原理——反向索引
原文链接: http://my.oschina.net/wangfree/blog/77045 倒排索引 倒排索引(反向索引) 倒排索引源于实际应用中需要根据属性的值来查找记录.这种索引表中的每一项 ...
- Day71 分页，cookie and Session
cookie 是保存在客户端的键值对. cookie本身最大支持4096字节,保存在客户端的 session是保存在服务器端的键值对.(依赖cookie) cookie和session cookie的 ...
- Kafka集群副本分配算法解析
副本分配算法如下: 将所有N Broker和待分配的i个Partition排序. 将第i个Partition分配到第(i mod n)个Broker上. 将第i个Partition的第j个副本分配到第 ...
- RSA的JAVA实现 及javax.crypto.IllegalBlockSizeException
一.背景 最近工作中涉及到RSA加密的相关需求任务,之前对加密算法了解不多,开发过程中遇到了一些坑记录一下. 二.RSA原理 RSA加密是非对称加密,公开私钥,保留私钥.通信时数据通过公开的公钥加密, ...
- checkbox选中事件
在前端中,往往需要根据后台数据的返回选中多选框.可以根据后台返回的数据转化为数组,然后又val([数组])进行选中. 例子: html代码: <!DOCTYPE html> <htm ...
- SVN图形客户端上传静态库.a文件失败
1.原因客户端未添加静态库 2.解决办法 到项目静态库所在目录用命令行添加静态库文件 svn add ****.a 3.可能存在问题 Mac OS的自带SVN版本过低不能添加,报错如下: svn: E ...