AngularJS in Action读书笔记3——走近Services

　　试着想想这些问题：如果一个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地址。