【AngularJS】—— 13 服务Service
在AngularJS中有很多的服务,常用的比如$http,$location等等。
本篇文章会介绍一下的内容:
1 $http这种Angular提供的服务的使用
2 如何自定义服务,并总结服务需要注意的几个小点。
$http的使用
AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据。
这样就需要使用web容器来运行代码了,先看看程序源码,视图方面还是跟普通的代码相同:
<div ng-controller="myAppCtrl"><ul><li ng-repeat="user in users">{{user.name}}</li></ul></div>
创建一个无序列表,循环输出请求到的数据。
在js中,创建一个模板,在模板上创建控制器。
<script type="text/javascript">var myAppModule = angular.module("myApp",[]);myAppModule.controller('myAppCtrl',['$scope','$http',function($scope,$http){$http({method:'GET',url:'data.json'}).success(function(data,status,headers,config){console.log("success!...");console.log(data);$scope.users = data;}).error(function(data,status,headers,config){console.log("error!...");});}]);</script>
该控制器比平时普通的控制器多了一个注入的参数$http,添加了这个参数,就可以在方法内部直接调用。
采用如下的格式:
$http({method:'GET',//http请求的类型url:'data.json'//请求的地址 }).success(function(data,status,headers,config){//成功了,怎么做 }).error(function(data,status,headers,config){//失败了,怎么做 });
接下来需要在代码相同的路径下,创建data.json文件
[{"name":"test1" },{"name":"test2" },{"name":"test3" }]
利用web容器,本文使用的是基于nodejs的http-server,启动后在网页中输入相应的URL查看结果:
全部的代码展示:
<!doctype html> <html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></head><body><div ng-controller="myAppCtrl"><ul><li ng-repeat="user in users">{{user.name}}</li></ul></div><script type="text/javascript">var myAppModule = angular.module("myApp",[]);myAppModule.controller('myAppCtrl',['$scope','$http',function($scope,$http){$http({method:'GET',url:'data.json'}).success(function(data,status,headers,config){console.log("success!...");console.log(data);$scope.users = data;}).error(function(data,status,headers,config){console.log("error!...");});}]);</script></body> </html>
View Code
使用$http是很基本的内容,就不做过多的解释了。
创建自己的Service服务
接下来看看如何创建自己的服务,创建服务可以通过三种方式,factory,provider和service,但是它们的本质都是Provider,只是封装了不同的写法而已。
本文采用factory的形式,仍然是先创建一个模块,在模块的基础上创建一个Service:
var myAppModule = angular.module("myApp",[]);myAppModule.factory('myService',['$http',function($http){var doRequest = function(username){return $http({method:'GET',url:'data.json'});}return {userList:function(username){return doRequest(username);}}}]);
分析下代码:
这个Service需要注入一个属性 $http ,在方法内部,返回的值是一个对外提供的方法,userList。
外部可以通过 userList(username) 的方式,进行调用。
真正的实现部分放在 doRequest 中,内部就是典型的一个AngularJS的$http请求了,请求会返回url相应的数据。
然后看一下外部如何使用,先看看视图部分:
<div ng-controller="myAppCtrl"><label>username</label><input type="text" ng-model="username" placeholder="输入"/><pre ng-show="username">{{users}}</pre></div>
该部分是一个输入框input和一个代码框pre,他们共同使用了一个变量username。当username有值时,会在下面展示users对应的内容。
myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',function($scope,$timeout,myService){var timeout;$scope.$watch('username',function(newUserName){console.log("您输入了:"+newUserName);if(newUserName){if(timeout){$timeout.cancel(timeout);}timeout = $timeout(function(){myService.userList(newUserName).success(function(data){console.log(data);$scope.users = data;});},350);}});}]);
在对应的控制器中,采用了$watch这种监控方法,监控username属性的变化。当username属性变化时,会触发请求方法。
控制器多注入了一个$timeout变量,该变量用于控制输入的时间。代码观察$timeout(function(...),350);当输入的间隔超过350ms时,就会触发相应函数function(...)。这样可以有效的防止,不停的刷新请求,造成网页的刷新抖动。
在函数内部,调用了我们自己的服务提供的userList方法。当请求成功时,绑定返回值到users中。users会动态的刷新内容。
查看程序的演示结果:
通过测试发现:当我们快速的输入4321时,虽然$watch都监控到了变量的变化,但是只有停止时间超过350ms才会发送请求。
全部的代码样例:
<!doctype html> <html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></head><body><div ng-controller="myAppCtrl"><label>username</label><input type="text" ng-model="username" placeholder="输入"/><pre ng-show="username">{{users}}</pre></div><script type="text/javascript">var myAppModule = angular.module("myApp",[]);myAppModule.factory('myService',['$http',function($http){var doRequest = function(username){return $http({method:'GET',url:'data.json'});}return {userList:function(username){return doRequest(username);}}}]);myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',function($scope,$timeout,myService){var timeout;$scope.$watch('username',function(newUserName){console.log("您输入了:"+newUserName);if(newUserName){if(timeout){$timeout.cancel(timeout);}timeout = $timeout(function(){myService.userList(newUserName).success(function(data){console.log(data);$scope.users = data;});},350);}});}]);</script></body> </html>
View Code
关于自定义的服务,有下面几点需要注意:
1 它的使用场景:由于可以在服务中抽取公共调用的方法,因此可以把多个控制器中相同的功能抽取出来,形成一个服务。
2 单例:服务都是单例的,一个应用生命周期内,只有一个服务的实例存在。
3 注入器:服务的实例化都是有注入器injector创建的。在我们创建controller控制器时,后面指明了需要注入一个myService服务,注入器就会去实例化该服务。
参考
[1] 大漠穷求,慕课网:http://www.imooc.com/learn/156
转载于:https://www.cnblogs.com/xing901022/p/4293451.html
【AngularJS】—— 13 服务Service相关推荐
- linux 进程间通信 dbus-glib【实例】详解三 数据类型和dteeth(类型签名type域)(层级结构:服务Service --> Node(对象、object) 等 )(附代码)
linux 进程间通信 dbus-glib[实例]详解一(附代码)(d-feet工具使用) linux 进程间通信 dbus-glib[实例]详解二(上) 消息和消息总线(附代码) linux 进程间 ...
- angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
- k8s拉取镜像规则_【大强哥-k8s从入门到放弃13】Service详解
一.何为ServiceService 是一个应用服务抽象,定义了 Pod 逻辑集合和访问这个 Pod 集合的策略. Service 代理 Pod 集合对外表现是为一个访问入口,分配一个集群 IP 地址 ...
- android打开位置服务,Android - 位置定位(Location)服务(Service)类的基本操作
位置定位(Location)服务(Service)类的基本操作 本文地址: http://blog.csdn.net/caroline_wendy 定位服务(Location Service),能够确 ...
- 13 服务:愿意为您效劳
1.引入 1.0 引入 你可能希望某些操作能一直运行,而不论哪一个应用得到焦点. 举例来说,如果你在一个音乐应用中播放音乐文件,可能希望即使切换到另一个应用,这个音乐文件还能继续播放.这一章中,你会看 ...
- Windows服务(Service)安装及启动停止方案
目录 一.创作背景 二.问题解决 2.1 安装Windows service服务 2.2 主方法Main()主方法改写 2.3 安装service服务/卸载service服务 2.4 服务启停 2.5 ...
- 开机启动一个服务Service,启动后没有界面后台暗暗运行
原文来自:http://blog.163.com/shaocpa@126/blog/static/553577572012418103732417/ 如果开机启动一个Activity,开机首先看的界面 ...
- 服务Service的基本用法
作为 Android四大组件之一, 服务也少不了有很多非常重要的知识点,那自然要从最基本的用法开始学习了. 定义一个服务: public class MyService extends Service ...
- ubuntu启动、关闭、重启服务service命令
查看当前所有服务 service --status-all 结果如下: zwl@zwl-NB50TJ1-TK1:~$ service --status-all[ + ] acpid[ - ] alsa ...
- android创建标题栏,【Android】利用服务Service创建标题栏通知
创建标题栏通知的核心代码 public void CreateInform() { //定义一个PendingIntent,当用户点击通知时,跳转到某个Activity(也可以发送广播等) Inten ...
最新文章
- MFC关于Radio按钮分组与选择的操作
- OC特有语法:分类category,给NSString增加方法计算字符串中数字的个数
- Servlet的学习笔记
- 刚刚!频域通道注意力网络FcaNet开源了!
- 微软以白金会员加入 OpenChain 开源组织
- Java中TimeZone(时区)类的简单使用
- gulp-htmlmin 页面压缩插件 gulp插件 参数说明
- 黑苹果小兵clover目录及驱动介绍
- 机器学习与数据挖掘的学习路线图
- 操作系统:作业调度算法--先来先服务
- 大道至简:智能语义检测的武林
- linux默认超级用户密码,新手:ubuntu超级管理员的密码设置
- 04、Hadoop框架HDFS NN、SNN、DN工作原理
- 国美易卡设计构架的思维模式(国美易卡)
- UnicodeDecodeError: ‘gb2312‘ codec can‘t decode byte 0xe9 in position 5632: illegal multibyte sequen
- 还在为微信朋友圈的大量广告而苦恼吗?一文教你如何清除微信朋友圈的广告!!!
- flying-saucer-pdf预览及下载
- 测试人的后半生:跑滴滴还是送外卖?
- 挚爱家乡五常大米的味道
- 狼已经一个sr闪狼已经夺人一个闪