AngularJS之服务(Service)

AngularJS 中你可以创建自己的服务,或使用内建服务

首先我们来看一下AngularJS中服务是指什么?

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用AngularJS 内建了30 多个服务


来看一个比较简单的内建服务: $location 服务,它可以返回当前页面的 URL 地址

 $location 服务

注意:$location 服务是作为一个参数传递到 controller中。如果要使用它,需要在 controller 中定义。


为什么要使用服务?

        在很多服务中,比如 $location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象,但window.location 对象在 AngularJS 应用中有一定的局限性。AngularJS 会一直监控应用,处理事件变化, AngularJS 使用$location服务比使用window.location对象更好。

        $location vs window.location


                                                              window.location                                                $location.service


目的                                :                    允许对当前浏览器位置进行读写操作      :        允许对当前浏览器位置进行读写操作


API                             :                               暴露一个能被读写的对象                             :            暴露jquery风格的读写器


是否在AngularJS应用生命周期中和应用整合  : 否 :可获取到应用生命周期内的每一个阶段,并且和$watch整合


是否和HTML5 API的无缝整合        :                            否                                                 :是(对低级浏览器优雅降级)


和应用的上下文是否相关?否 window.location.path返回"/docroot/actual/path"是,$location.path()返回"/actual/path"




接下来看一下几个比较常用的服务:

1、$http 服务

$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。

demo34.html
welcome.htm

2、$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

$timeout 服务:$timeout 可用于设置单次或多次延时服务;

3、$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

$interval 可用于设置始终运行的延时服务。demo36.html


这种跟上面的效果也是一样的

4、$watch:持续监听数据上的变化,更新界面,如:


创建自定义服务

你可以创建自定义服务,链接到你的模块中:类似自定义指令、过滤器

自定义指令使用dircetive关键字,自定义过滤器是使用filter关键字,自定义服务是使用service关键字。如下,自定义个个将255转换为16进制数的服务,可以理解这个服务是一个功能函数。

demo37.html



过滤器中,使用自定义服务

当你创建了自定义服务,并连接到你的应用上后,你可以在控制器,指令,过滤器或其他服务中使用它。

demo38.html
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,555评论 18 139
  • ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:...
    壬万er阅读 857评论 0 2
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,705评论 6 342
  • AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务。 什么是服...
    hx永恒之恋阅读 544评论 0 3
  • 注意,前方高能!!! 这个龙猫可不是一般的龙猫,她是女的龙猫,哈哈,看它那迷人的眼睫毛!
    萌283阅读 1,003评论 0 2