ES6服务(AngularJS)

Question

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

例如,我正在创建一个"ResultsFinder"服务,它将执行一个AJAX调用然后做一些事情.问题是我只能在构造函数上访问$ http(如果我将其作为参数传递),而不是其他方法(例如getResults).

看到这个代码示例:

(() => {
  'use strict';

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

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

在getResults内部,我无法访问$ http.为了获得访问权限,我应该做一些我感觉不正确的事情:

(() => {
  '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);
}());

任何人都可以给我一些关于处理这个问题的正确方法的建议吗？

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);