在现实生活中存在着有这样的特点的一些类:

A这些类只能有一个实例;

B这些能够自动实例化;

C这个类对整个系统可见,即必须向整个系统提供这个实例。

不妨举一个具体的单例模式的例子:比如教室里面的教师和学生都是需要在黑板上写字的,但是一般的情况下,教室里面应该只有一个黑板吧,它是教师和学生公用滴。这时就要想办法保证取得的黑板是一个共享的唯一的对象。而单例模式就是解决这类问题的一个已经成型的模式。

Angular带来了很多类型的services。每个都会它自己不同的使用场景。我们将在本节来阐述。

首先我们必须记在心里的是所有的services都是singleton(单例)的,这也是我们所希望得到的预期结果。

下面让我开始今天的services之旅吧:

Constant

示例:

  1. app.constant('fooConfig', {
  2.  
  3. config1: true,
  4.  
  5. config2: "Default config2"
  6.  
  7. });

constant是个很有用的东东,我们经常会用于对directive之类的做配置信息。所以当你想创建一个directive,并且你希望能够做一些配置信息,同时给些默认的配置,constant是个不错的的选择。

constant可以译作常量,因为我们所设置的值value是不能被改变的。其可以接受基础类型和object对象。

Value

示例:

  1. app.value('fooConfig', {
  2.  
  3. config1: true,
  4.  
  5. config2: "Default config2 but it can changes"
  6.  
  7. });

Value和上面的constant很相似,唯一是其在赋值后还可以被改变。它也被常用于directive配置信息。Value service只会保留values,我们不会在service中计算其值。

Factory

示例:

  1. app.factory('foo', function() {
  2.  
  3. var thisIsPrivate = "Private";
  4.  
  5. function getPrivate() {
  6.  
  7. return thisIsPrivate;
  8.  
  9. }
  10.  
  11. return {
  12.  
  13. variable: "This is public",
  14.  
  15. getPrivate: getPrivate
  16.  
  17. };
  18.  
  19. });

Factory是我们最常用的service。其很容易被理解。

factory会返回一个object对象,至于你如何创建这个对象angular没任何限制。在示例中我选择了我喜欢的模式 Revealing module pattern,你可以选择其他你所希望的方式。

如我之前所说,所有的services都是singleton的,所以当我们修改foo.variable的时候,会影响到其他使用的地方。

Service

示例:

  1. app.service('foo', function() {
  2.  
  3. var thisIsPrivate = "Private";
  4.  
  5. this.variable = "This is public";
  6.  
  7. this.getPrivate = function() {
  8.  
  9. return thisIsPrivate;
  10.  
  11. };
  12.  
  13. });

Service service和factory工作原理一样,只是他service接收的是一个构造函数,当第一次使用service的时候,angular会new Foo() 来初始化这个对象。以后的时候返回的都是同一个对象。

实际上,下面是factory等价的写法:

  1. app.factory('foo2', function() {
  2.  
  3. return new Foobar();
  4.  
  5. });
  6.  
  7. function Foobar() {
  8.  
  9. var thisIsPrivate = "Private";
  10.  
  11. this.variable = "This is public";
  12.  
  13. this.getPrivate = function() {
  14.  
  15. return thisIsPrivate;
  16.  
  17. };
  18.  
  19. }

Foobar是一个class(类)在factory中我们手动初始化它,在返回它。和service一样Foobar class只在第一次初始化,并以后返回的都是同一个对象。

如果我们已经存在了一个class,那么我可以直接使用:

  1. app.service('foo3', Foobar);

Provider

Provider 在angular中是个最终的高级选项,在上例factory中最后一个示例用provider将是如下:

  1. app.provider('foo', function() {
  2.  
  3. return {
  4.  
  5. $get: function() {
  6.  
  7. var thisIsPrivate = "Private";
  8.  
  9. function getPrivate() {
  10.  
  11. return thisIsPrivate;
  12.  
  13. }
  14.  
  15. return {
  16.  
  17. variable: "This is public",
  18.  
  19. getPrivate: getPrivate
  20.  
  21. };
  22.  
  23. }
  24.  
  25. };
  26.  
  27. });

provider带有一个$get的函数,其返回值将会被注入其他应用组件。所以我们注入foo到controller,我们注入的是$get 函数。

为什么我们还需要provider,factory实现不是更简单吗?这是因为我们能够在config 函数中配置provider。如下所示:

  1. app.provider('foo', function() {
  2.  
  3. var thisIsPrivate = "Private";
  4.  
  5. return {
  6.  
  7. setPrivate: function(newVal) {
  8.  
  9. thisIsPrivate = newVal;
  10.  
  11. },
  12.  
  13. $get: function() {
  14.  
  15. function getPrivate() {
  16.  
  17. return thisIsPrivate;
  18.  
  19. }
  20.  
  21. return {
  22.  
  23. variable: "This is public",
  24.  
  25. getPrivate: getPrivate
  26.  
  27. };
  28.  
  29. }
  30.  
  31. };
  32.  
  33. });
  34.  
  35. app.config(function(fooProvider) {
  36.  
  37. fooProvider.setPrivate('New value from config');
  38.  
  39. });

在这里我们把thisISPrivate移出了$get函数,我们创建了一个setPrivate函数,使其能够在config函数中修改thisIsPrivate变量。为什么我们需要这么做?在factory中加入一个setter不就好了吗?这是一个不同的意图。

我们希望注入的是一个object对象,但是我们也希望能够提供一种方式去配置它。例如:一个包装了jsonp的资源resource的service,我们希望能够配置是从那个url获取资源,我们也将有个三方的消费者比如restangular允许我们去配置达到我们的目的。

注意在config函数我们需要用nameProvider替代name,然而消费者只需要用name。

可以看见在在我们的应用程序中已经配置了一些services,比如$routeProvider,$locationProvider,配置我们的routes和html5model 调整适应。

额外的福利:

福利1:装潢器Decorator

如果你觉得我给你的foo service缺少了你所需要的greet方法,你需要改变API吗?不,你可以用更好的方法装潢:

  1. app.config(function($provide) {
  2.  
  3. $provide.decorator('foo', function($delegate) {
  4.  
  5. $delegate.greet = function() {
  6.  
  7. return "Hello, I am a new function of 'foo'";
  8.  
  9. };
  10.  
  11. return $delegate;
  12.  
  13. });
  14.  
  15. });

上例中$provide是angular内部用于创建我们所有service的service。如果我们希望在我们的应用程序中使用,我们可以手动的使用它(我们可以用$provide去装潢)。$provide有一个decorator的装潢函数,允许我们装潢我们的services,它接受我们所需要装潢的service的name和一个接受$delegate的回调函数,$delegate代表我们的原来的service实例。

在这里我们可以装潢我们的service。在本例中我们在原来的service实例上增加了一个greet函数,在返回修改过后的service。当我们消费这个service的时候,它将会包含一个greet的函数,你可以在下面的try it中看见。

对于使用来自第三方的service,当我们期望对其接口做一些扩展的时候,我们不需要copy它的代码到我们的项目来修改它,我们可以手动方便的使用装潢器去实现我们所想要的。

注意:上文中说的常量constant是不可以被装潢的。

福利2:创建非单例对象

如我们所知所有的service都是单例的,但是我们仍然可以创建一个非单例的对象。在我们深入之前,我们必须认识到大多数场景我们都会期望是个单例的service,我们也不会去改变这种机制。换句话在很少的场景中我们需要每次生成一个新的object对象。如下:

  1. // Our class
  2.  
  3. function Person( json ) {
  4.  
  5. angular.extend(this, json);
  6.  
  7. }
  8.  
  9. Person.prototype = {
  10.  
  11. update: function() {
  12.  
  13. // Update it (With real code :P)
  14.  
  15. this.name = "Dave";
  16.  
  17. this.country = "Canada";
  18.  
  19. }
  20.  
  21. };
  22.  
  23. Person.getById = function( id ) {
  24.  
  25. // Do something to fetch a Person by the id
  26.  
  27. return new Person({
  28.  
  29. name: "Jesus",
  30.  
  31. country: "Spain"
  32.  
  33. });
  34.  
  35. };
  36.  
  37. // Our factory
  38.  
  39. app.factory('personService', function() {
  40.  
  41. return {
  42.  
  43. getById: Person.getById
  44.  
  45. };
  46.  
  47. });

在这里我们创建了一个Person对象,它几首一些json对象来初始化对象。接下来我们在prototype中创建了一个函数(可以从面向对象语言理解为实例方法),在我们直接在Person类上加了一个方法(可以理解为类方法,静态方法)。

所以我们有一个类方法将根据我们提供的id创建一个新的person对象,并每隔实例可以更新自己。接下来我们只需要创建一个service去消费它。

在任何时候我们调用personService.getByID,我们都会创建一个新的person对象,所以在不同的controller中你可以使用一份新的person对象,即使factory是单例的,但是它生产返回的却是新的object。

福利3:CoffeeScript

CoffeeScrip能够方便优雅的处理service,提供的优雅的方式去创建class。下面是福利2的示例用CoffeeScript改变后的:

  1. app.controller 'MainCtrl', ($scope, personService) ->
  2.  
  3. $scope.aPerson = personService.getById(1)
  4.  
  5. app.controller 'SecondCtrl', ($scope, personService) ->
  6.  
  7. $scope.aPerson = personService.getById(2)
  8.  
  9. $scope.updateIt = () ->
  10.  
  11. $scope.aPerson.update()
  12.  
  13. class Person
  14.  
  15. constructor: (json) ->
  16.  
  17. angular.extend @, json
  18.  
  19. update: () ->
  20.  
  21. @name = "Dave"
  22.  
  23. @country = "Canada"
  24.  
  25. @getById: (id) ->
  26.  
  27. new Person
  28.  
  29. name: "Jesus"
  30.  
  31. country: "Spain"
  32.  
  33. app.factory 'personService', () ->
  34.  
  35. {
  36.  
  37. getById: Person.getById
  38.  
  39. }

译者注:本人一直在思考一篇《为什么需要在你的项目中尝试CoffeeScript》.CoffeeScript不仅仅优美语法,如果只是这样的话,充其量这也只是一些可有可无的语法糖而已,我们认为更重要的是它为我们写javascript带来了一些好的实践,规避了javascript的“坑”.但是也不得不考虑项目成员学习成本,如果你项目成员很多具有函数式编程的经历,javascript能力也不错,你完全可以去尝试。注:写CoffeeScript并不是说你不再需要javascript学习。

总结:

service是angularjs另一个非常酷的features。我们有许多方式去创建service,我们需要根据我们的应用场景选择正确的方式去实现它。译者注:这就好比我们常挂在嘴边的设计模式,重要的是正确的场景使用正确的模式。

单例模式和angular的services的使用方法的更多相关文章

  1. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  2. java——多线程——单例模式的static方法和非static方法是否是线程安全的?

    单例模式的static方法和非static方法是否是线程安全的? 答案是:单例模式的static方法和非static方法是否是线程安全的,与单例模式无关.也就说,如果static方法或者非static ...

  3. Angular开启两个项目方法

    Angular开启两个项目方法: ng server --port 80

  4. Angular.js Services

    Angular带来了很多类型的services.每个都会它自己不同的使用场景.我们将在本节来阐述. 首先我们必须记在心里的是所有的services都是singleton(单例)的,这也是我们所希望得到 ...

  5. angular factory Services provider 自定义服务 工厂

    转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...

  6. C# 单例模式和窗体的单例打开方法

    第一种最简单,但没有考虑线程安全,在多线程时可能会出问题,不过俺从没看过出错的现象,表鄙视我…… public class Singleton{    private static Singleton ...

  7. entry for sde instance not found in services file解决方法[转]

    当使用如下连接: ipropertyset ppropertyset; ppropertyset = new propertysetclass(); ppropertyset.setproperty( ...

  8. Angular过滤器 自定义及使用方法

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  9. ionic准备之angular基础——$watch,$apply,$timeout方法(5)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. SQL转换时间的时分

    SELECT WorkerNo, DutyTime, DATENAME(weekday, DutyTime) AS WeekDay, CycleType, CycleNumber, YnOnDuty, ...

  2. PowerDisner15 关于生成表带双""号问题

    我们可以尝试在DBMS配置文件中修改相应的格式来解决. 在PowerDesigner中 选择 Database->Edit current database->Script->Sql ...

  3. tcpdump抓取HTTP包

    tcpdump抓取HTTP包 tcpdump -XvvennSs 0 -i eth0 tcp[20:2]=0x4745 or tcp[20:2]=0x4854 0x4745为"GET&quo ...

  4. centos7.0 下安装jdk1.8

    centos7.0这里安装jdk1.8采用yum安装方式,非常简单. 1.查看yum库中jdk的版本 [root@localhost ~]# yum search java|grep jdk 2.选择 ...

  5. 配置Samba共享服务器

    安装samba: sudo apt-get install samba samba-common 由于是挂载另一个磁盘,并作为共享文件存放地: 列出磁盘名和ID air@air-device:~$ s ...

  6. Delphi使用ADO进行数据库编程

    Delphi是一个可视化的编程工具,ADO编程也是这样,所以话不多言,直接通过代码.截图和语言来说明. 我的数据库是Oracle,为了测试,先建一个表:create table practice(un ...

  7. 使用sublimehighlight 将文本 转化html

    a = "aaa" b = "bbb" c = "ccc" final = a + b + c print final import sys ...

  8. Windows8 UI MessageBox In DevExpress

    // custom messagebox using System; using System.Drawing; using System.Windows.Forms; using DevExpres ...

  9. junit的学习

    junit 是一种单元检测的工具包,他能解决的问题主要是有两点 : 1.  不用将方法都调到main方法去执行一次来看结果 2.  测试的结果可以不用我们人工去对比,这里主要使用的是junit的断言类 ...

  10. Redis——学习之路二(初识redis服务器命令)

    上一章我们已经知道了如果启动redis服务器,现在我们来学习一下,以及如何用客户端连接服务器.接下来我们来学习一下查看操作服务器的命令. 服务器命令: 1.info——当前redis服务器信息   s ...