Question

只是想知道是否有人有任何模式/方法来处理角度的“面向对象”服务。我的意思是一种服务，它基本上创建了一个创建自身“实例”的类：

function MyService(injectedServiceA, injectedServiceB) {
  return function MyService(arg1, arg2 ... ) {
     var var1 = arg1;

     this.someFunction() {
        ... do something with var1 ...
     }
  }
}

并注入：

angular.module('MyModule', []).service('MyService', MyService);

然后可以将此服务提供给控制器，然后控制器可以创建它的实例：

$scope.myService = new MyService(arg1, arg2 ... );

，视图使用someFunction。

我采取了这种（天真的？）方法，但没有效果：

class MyService {
  {
    constructor(arg1, arg2 ... ) {
      this._var1 = arg1;
    }

    someFunction() {
        ... do something with this._var1 ...
    }
  }
}

class MyServiceMaker {
  constructor(injectedServiceA, injectedServiceB);
  make(arg1, arg2 ... ) { return new MyService(arg1, arg2 ...); }
}

并注入：

angular.module('MyModule', []).service('MyServiceMaker', MyServiceMaker);

然后在控制器中：

 $scope.myService = MyServiceMaker.make(arg1, arg2 ... );

这构造完全正常，等等。但是当myService上调用myFunction时，this未定义。

Answer 1

将MyServiceMaker作为一个类创建是没有理由的。您的原始示例中的外部function MyService永远不是一个类，它不应该是。

请选择

angular.module('MyModule', []).service('MyService', makeMyService);
function makeMyService(injectedServiceA, injectedServiceB) {
  return class MyService {
    constructor(arg1, arg2 ... ) {
      var var1 = arg1;
      this.someFunction = function() {
        …
      }
    }
    … // further prototype methods
  }
}

或者如果您想使用更多ES6功能，您可以使用箭头功能而不是声明makeMyService：

angular.module('MyModule', []).service('MyService', (injectedServiceA, injectedServiceB) =>
  class MyService {
    constructor(arg1, arg2 ... ) {
      this._var1 = arg1;
    }
    someFunction() {
      …
    }
  }
);

Answer 2

Theres两个主要模式。

使用服务：

export default class NameService {
  constructor($q) {
    this._$q = $q
  }

  getName() {
    return this._$q.when("Bobby Tables")
  }
}


angular.module('myApp', [])
  .service('NameService', ['$q', NameService])

使用工厂：

export default class NameFactory {
  constructor($q) {
    this._$q = $q
  }

  getName() {
    return this._$q.when("Bobby Tables")
  }
}



angular.module('myApp', [])
  .factory('NameService', ['$q', ($q) => new NameService($q)])

这是一篇很棒的文章，讨论Angular 1.x与ES6的服务：http://www.michaelbromley.co.uk/blog/350/exploring-es6-classes-in-angularjs-1-x%20nice

角度面向对象服务和es6

2 个答案: