ES6服务（AngularJS）

Question

在使用ES6创建服务时，我在访问Angular内置服务时遇到了问题，例如$ http。

例如，我正在创建一个＆＃34; ResultsFinder＆＃34;将执行AJAX调用然后执行某些操作的服务。 问题是我只能在构造函数上访问$ http（如果我将其作为参数传递），而不是其他方法（例如getResults）。

请参阅此代码示例：

＆＃13;

＆＃13;

(() => {
  'use strict';

  class ResultsFinder {
    constructor($http) {}
    getResults() {
      return 'ResultsFinder';
    }
  }

  /**
   * @ngdoc service
   * @name itemManager.service:ResultsFinder
   *
   * @description
   *
   */
  angular
    .module('itemManager')
    .service('ResultsFinder', ResultsFinder);
}());

＆＃13;

＆＃13;

＆＃13;

在getResults内部，我无法访问$ http。为了获得访问权限，我应该做一些我感觉不合适的事情：

＆＃13;

＆＃13;

(() => {
  'use strict';

  class ResultsFinder {
    constructor($http) {
      this.$http = $http;
    }
    getResults() {
      // Here I have access to this.$http
      return 'ResultsFinder';
    }
  }

  /**
   * @ngdoc service
   * @name itemManager.service:ResultsFinder
   *
   * @description
   *
   */
  angular
    .module('itemManager')
    .service('ResultsFinder', ResultsFinder);
}());

＆＃13;

＆＃13;

＆＃13;

任何人都可以就正确的处理方法给我一些建议吗？

Answer 1

您需要在this.$http方法中使用getResults。

(() => {
  'use strict';
      
class ResultsFinder {
	
    static $inject = ['$http'];   
    constructor($http) {
        this.$http = $http;
    }
		
    getResults() {
        return this.$http.get('/foo/bar/');
    }
}

  /**
   * @ngdoc service
   * @name itemManager.service:ResultsFinder
   *
   * @description
   *
   */
  angular
    .module('itemManager')
    .service('ResultsFinder', ResultsFinder);
}());

作为旁注，我在你的班级中添加了静态$inject“注释”。如果您不使用ngAnnotate之类的东西，这是最佳做法。通过仅更改$inject值，还可以更轻松地更改实现。

如果您是ES5开发人员，可能有助于考虑ES5中的外观如何

ResultsFinder.$inject = ['$http'];
var ResultsFinder = function($http) {
    this.$http = $http;
}

ResultsFinder.prototype.getResults = function() {
    return this.$http.get('/foo/bar/');
}

注意

由于您使用的是ES6，因此应该使用ES6模块来组织代码。

您可以在ES6模块中定义和导出角度模块：

import {module} from 'angular';

export var itemManager = module('itemManager', []);

然后导入Angular模块

import {itemManager} from '../itemManager';

class ResultsFinder {

    static $inject = ['$http'];   
    constructor($http) {
        this.$http = $http;
    }

    getResults() {
        return this.$http.get('/foo/bar/');
    }
}

itemManager.service('ResultFinder', ResultFinder);