试着想想这些问题:如果一个controller只关心自己所控制的view页面,那么对于整个application来说,你如何调用想要的function;如果controller从来都不会和其他controller通讯,那controller之间又是如何实现数据共享。有问题,就有解决方案,本章主要讲解如何创建一个简单的service并如何使用它和远端的server通讯。

什么是models和services

hello,service

  什么是services,从技术层面来说,angularjs中的service就是抽取的一些公用的功能函数封装起来可以在整个应用中调用。换句话说,service是一种可以和远端其他service通讯的机制,而model不仅仅具备这套机制,还负责管理服务里面的数据。

  Angularjs中的service表现形式很丰富,但是归根结底都是通过对于内置服务$provide的不同程度的封装。一般我们将其定义在angular.module中,表现形式有module.value, module.constant, module.service, module.factory还有module.provider。

  本章节主要就来谈谈如何创建一个可以定义story类型的service,并且可以在StoryboardCtrl中调用。在Angello.js中,我们注册一个service形式的value,即myModule.value,将其命名为STORY_TYPES,然后在第二个参数中传入我们要定义的数据,代码如下:

  这样我们就可以通过依赖注入的方式注入STORY_TYPES,从而在整个angello应用中使用。好比StoryboardController.js:

  这里我们注入STORY_TYPES,然后就可以将其赋值给myStory,从而在前台界面展示。这种service的定义形式的优雅之处就在于,定义好了service后,可以在不同的controller、directive乃至service中调用。

service的生命周期

  1. 首先在angular.module定义service;
  2. 在compilation阶段,service在完成实例创建,并注册到工厂类上;
  3. 当需要调用这个service时,$inject服务就会在缓存上在查找有没有这个服务。如果缓存上有,那么$inject就会从缓存上取出这个service的实例完成注入;否则,$inject服务就会请求工厂类为其重新创建一个service并返回这个service的实例以供调用。

  注意:service采用的是懒加载模式,只有被调用的时候,才会被加载进来。同时还是单例模式,其只初始化一次,然后在application的任何地方调用的是同一个实例。

service的类型

  总共有5种形式定义service,他们之间的区别以及使用的场景见下图:

  •   module.value——用于存储一些简单变量,并且在运行时可能需要改变的变量
  •   module.constant——用于存储一些不会改变的变量
  •   module.service——通过构造方法创建service,该种形式对于熟悉面向对象的开发者更容易接受,该service中还包含this关键字,用于对外暴露方法
  •   module.factory——通过构造函数创建service,直接在这个创建的对象上添加属性方法,然后返回即可
  •   module.provider——用于需要对service进行修改并与可以与application的configure通讯联系的情况。

value service

  value service是最简单的一种service,其共有两个参数,第一个参数是service的名字,第二个参数是具体的数据可以是一个值、对象、函数。

  value形式的service是不能够在module.config中访问的。

constant service

  constant service与value service很像,唯一的不同就是constant可以被module.config访问并且定义的值不会改变。

service和factory

  最常见的service就是service和factory,鉴于这两种service很像,所以放在一起说。

  当通过module.service定义一个service,则返回的是构造函数构造出的实例。这对熟悉面向对象的开发人员是轻车熟路了。

  前面的代码中,我们定义了一个名为LoadingService的service,我们可以将具有上下文的this对象赋值给了service变量。

  下面我们来创建一个module.factory形式的LoadingService,这个和上面的差不多,只是它返回的是一个暴露了属性和方法的对象,外面可以访问这个对象的属性和方法。

provider service

  provider是定义一个service的最底层方法。一般来说,我们不会直接定义module.provider,除非你需要添加一些额外的配置参数。在angello应用的代码中我们没有直接使用这个module.provider,但是将在$http interceptors和service decrators中配置内置provider。

Models with $http

  应用尤其是web应用,从来都不是不是平白无故存在的。所以我们将会从探讨service到认识model,因为我们需要一种在客户端持久化数据并能与远端通讯的方式。angularjs能够很容易做到服务端和内置服务$http高效方便的通讯。

What is $http

$http是angularjs提供的service,可以基于http协议,使用浏览器的XMLHttpRequest对象或者JSONP实现远端通讯。服务端采用的是异步通讯模式,而$http是基于$q服务的deferred/promise模式。

Create your first model

  我们将要创建第一个model——StoriesModel,用于请求远端并获取属于登陆者名下的stories。

  首先我们需要在Angello.common模块下定义一个StoriesModel,并注入三个依赖服务——$http,AuthModel和ENDPOINT_URI,这些参数都是用于与远端通讯。$http承担主要的通讯功能,AuthModel和ENDPOINT_URI辅助构建调用的URI地址。

angular.module('Angello.Common')
.service('StoriesModel',
function ($http, EndpointConfigService, UtilsService) {
var service = this,
MODEL = '/stories/'; service.all = function () {
return $http.get(EndpointConfigService.getUrl(
MODEL + EndpointConfigService.getCurrentFormat()))
.then(
function(result) {
return UtilsService.objectToArray(result);
}
);
}; service.fetch = function (story_id) {
return $http.get(
EndpointConfigService.getUrlForId(MODEL, story_id)
);
}; service.create = function (story) {
return $http.post(
EndpointConfigService.getUrl(MODEL + EndpointConfigService.getCurrentFormat()), story
);
}; service.update = function (story_id, story) {
return $http.put(
EndpointConfigService.getUrlForId(MODEL, story_id), story
);
}; service.destroy = function (story_id) {
return $http.delete(
EndpointConfigService.getUrlForId(MODEL, story_id)
);
};
});

  

  首先还是老一套将this赋值给一个变量service,然后将一个字符串赋值给变量MODEL以便后面构建合适的URI。

  代码中定义了一个请求方法,用于获取登录者名下所有的stories。$http服务是基于REST状态协议的,所以可以通过$http.get(YOUR_URI)的方法来请求数据。而这里的URI又是通过EndpointConfigService来实现的。

  至于前面所说的$http是异步请求,我们可能是看不到的,但是我们可以通过看StoryboardCtrl中的代码来了解异步请求的处理思想。

  当getStories执行的时候,StoriesModel.all就会通过call请求,然后将得到的数据在then中完成处理,then函数中的参数就是请求到的数据。

$http一些使用的方法

  你已经看到上面的例子是和通过GET请求来获取用户想要的stories。当然这只是其中一方面,我们还会需要知道如何得到某个指定user下的stories、如何创建一个stories以及如何更新、删除等。

  谈到上面的这些问题,我们不得不服使用基于RESTful的$http与生俱来的一些方法和思想是多么的方便。你可以利用RESTful的特性几乎完成你所想要的一切操作:

Promises

  我们来简短的认识下什么是promises。提到promises就不能不说异步请求,相对于同步请求来说,异步对于资源的使用更加充分,当然对于调试可能也更加麻烦点。关于同步与异步的实际场景的理解,请点击这里

  与此同时,结合Angello这个application的代码来加深对promises的理解,让我们回到StoriesModel上,通过service.all来获取登录用户的stories

  这个service.all返回的就是$http.get,我们将其视为一个promises对象。

  然后在StoryboardController.js中的then方法中接收前面promises返回的值。这里的then接收三个参数——成功回调、错误回调以及状态变化回调。成功回调意味着promise成功返回,错误回调意味着promise返回失败,还有一个当遇到一些状态如长计算等,就会进入第三种状态notify,来给promise一个监听从而更新状态。

  值得注意的是,在Angularjs1.3中引入了.then().catch().finally()来替代了前面的三种状态,当然了,选择哪种形式取决于个人的习惯。

  下面还是借助service.all函数看看代码逻辑以及每行代码的含义:

至此,我们啃完了第四章,大概内容有:

  • Services是一种定义共用的功能模块,以便在整个应用的任何地方使用的组件
  • Services有五种不同的表现形式module.constant, module.value, module.service, module.factory, module.provider,各种形式尤其自身的特点以及适用场合
  • $http与远端通讯很方便,因为其遵从RESTful请求协议
  • $http基于deffered/promise API并且实现了异步请求机制

如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。

  

友情赞助

如果你觉得博主的文章对你那么一点小帮助,恰巧你又有想打赏博主的小冲动,那么事不宜迟,赶紧扫一扫,小额地赞助下,攒个奶粉钱,也是让博主有动力继续努力,写出更好的文章^^。

    1. 支付宝                          2. 微信

                      

首先我们需要在Angello.common模块下定义一个StoriesModel,并注入三个依赖服务——$http,AuthModel和ENDPOINT_URI,这些参数都是用于与远端通讯。$http承担主要的通讯功能,AuthModel和ENDPOINT_URI辅助构建调用的URI地址。

AngularJS in Action读书笔记3——走近Services的更多相关文章

  1. AngularJS in Action读书笔记6(实战篇)——bug hunting

    这一系列文章感觉写的不好,思维跨度很大,原本是由于与<Angularjs in action>有种相见恨晚而激发要写点读后感之类的文章,但是在翻译或是阐述的时候还是会心有余而力不足,零零总 ...

  2. AngularJS in Action读书笔记2——view和controller的那些事儿

    今天我们来818<angularjs in action>的第三章controller和view. 1.Big Picture概览图 View是angularjs编译html后呈现出来的, ...

  3. AngularJS in Action读书笔记4(实战篇)——创建Statistic模块

    个人感觉<Angularjs in action>这本书写的很好,很流畅,循序渐进,深入浅出,关键是结合了一个托管于Github上的实例讲解的,有代码可查,对于初学者应该是个不错的途径.( ...

  4. AngularJS in Action读书笔记1——扫平一揽子专业术语

    前(fei)言(hua): 数月前,以一个盲人摸象的姿态看了一些关于AngularJS的视频书籍,留下了我个人的一点或许是指点迷津或许是误人子弟的读后感.自以为已经达到熟悉ng的程度,但是因为刚入公司 ...

  5. AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  6. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  7. AngularJS高级程序设计读书笔记 -- 模块篇

    一. 模块基础 1. 创建模块 <!DOCTYPE html> <html ng-app="exampleApp"> <head> <ti ...

  8. AngularJS高级程序设计读书笔记 -- 大纲篇

    零. 初衷 现在 AngularJS 4 已经发布了, 楼主还停留在 1.x 的阶段, 深感自卑. 学习 AngularJS 的初衷是因为, 去年楼主开始尝试使用 Flask 开发自动化程序, 需要用 ...

  9. AngularJS高级程序设计读书笔记 -- 服务篇

    服务是提供在整个应用程序中所使用的任何功能的单例对象. 单例 : 只用一个对象实例会被 AngularJS 创建出来, 并被程序需要服务的各个不同部分所共享. 1. 内置服务 一些关键方法也被 Ang ...

随机推荐

  1. React 随笔二

    这周做的demo3和demo4.5 随记的小点. 1.js错误提示: Warning: Each child in an array or iterator should have a unique  ...

  2. HTML5 简易转盘

    这里我们使用两个Canvas进行转盘的绘画 canvas1用于绘画背景,Canvas2用于指针的转动: 把Canvas2背景设为透明并使用相对布局定位: #myCanvas2{ position: a ...

  3. iOS开发--Block

    iOS开发--Block 1.什么是Block,block 的作用 ui开发和网络常见功能实现回调,按钮的事件处理方法是回调方法以及网络下载后的回调处理 (1)按钮 target-action   一 ...

  4. IOS开发——使用数据库

    IOS开发——使用FMDB数据库 简介 需求作用: 如果需要保存大量的结构较为复杂的数据的时候,使用数据库,例如交规考试项目 1.数据库的基本介绍 数据库(DB)是一种数据模型组织起来并存放存储管理的 ...

  5. Web应用数据库配置参数读取方法之一

    jsp页面: <% //从配置中获取数据库驱动 String driver=application.getInitParameter("driver"); //从数据库中得到 ...

  6. Nodejs学习路线图

    前言 用Nodejs已经1年有余,陆陆续续写了48篇关于Nodejs的博客文章,用过的包有上百个.和所有人一样,我也从Web开发开始,然后到包管 理,再到应用系统的开发,最后开源自己的Nodejs项目 ...

  7. XP退役了,如何把Win7变成XP风格?| 怎么样去掉Win7的所有华丽效果? | 怎么样让Win7达到电脑最佳性能?

    XP系统退役了,以后微软停止XP系统的更新维护了. 不得不升级使用Windows7系统,但是大部分使用Windows7不习惯. 那是因为你的操作习惯,还保持在XP风格基础上. 那么有没有什么办法让Wi ...

  8. Visual Studio 2013 错误提示“未找到与约束匹配”的修正

    昨天由于项目需要,在开发电脑上安装了Microsoft Office Project 2007来做时间计划,但是安装之后第二天重新打开VS之后,就无法打开项目或者原有程序文件无法打开.错图提示界面如下 ...

  9. 消息智能路由组件SmartRoute

    消息传递在软件开发过程中是一件很常见的事情,而在不同的场景所使用消息传递方式也有所不同,在对象之间制定相关接口方法和对象结构,对于进程之间可能使用内存共享或一些通讯产品,在不同服务器之的消息通讯则使用 ...

  10. [转]单点登录SSO学习——CAS协议内容

    作者:anmaler 本文转自:http://blog.zhaojunling.me/p/24 CAS中文文档甚少,这篇文章对CAS接口参数有比较清楚的说明,排版也不错查阅舒适 在当前互联网产品中使用 ...