javascript ES6 服务（AngularJS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29646738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Services with ES6 (AngularJS)
提问by jeffarese
I'm having problems accessing Angular built-in services such as $http when creating a service with ES6.
使用 ES6 创建服务时，我在访问 Angular 内置服务（例如 $http）时遇到问题。
For example, I'm creating a "ResultsFinder" service that will do an AJAX call and then do some stuff. The problem is that I only have access to $http on the constructor (if I pass it as an argument), but not on other methods (such as getResults).
例如，我正在创建一个“ResultsFinder”服务，它将执行 AJAX 调用，然后执行一些操作。问题是我只能访问构造函数上的 $http（如果我将它作为参数传递），而不能访问其他方法（例如 getResults）。
See this code example:
请参阅此代码示例：
(() => {
'use strict';
class ResultsFinder {
constructor($http) {}
getResults() {
return 'ResultsFinder';
}
}
/**
* @ngdoc service
* @name itemManager.service:ResultsFinder
*
* @description
*
*/
angular
.module('itemManager')
.service('ResultsFinder', ResultsFinder);
}());Inside getResults I don't have access to $http. In order to have access I should do something that I don't feel right like this:
在 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);
}());Anyone can give me some advice about the proper way to handle this?
任何人都可以就处理这个问题的正确方法给我一些建议吗？
回答by Martin
You need to use this.$httpinside your getResultsmethod.
你需要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);
}());As a side note, I added a static $inject"annotation" to your class. This is a best practice if you are not using something like ngAnnotate. It also makes it easier to change out implementations by only changing the $injectvalues.
作为旁注，我$inject在您的课程中添加了一个静态“注释”。如果您不使用 ngAnnotate 之类的东西，这是最佳实践。它还可以更轻松地通过仅更改$inject值来更改实现。
If you are a ES5 developer it may help to think about how this would look in ES5
如果您是 ES5 开发人员，考虑一下这在 ES5 中的外观可能会有所帮助
ResultsFinder.$inject = ['$http'];
var ResultsFinder = function($http) {
this.$http = $http;
}
ResultsFinder.prototype.getResults = function() {
return this.$http.get('/foo/bar/');
}
NOTE
笔记
Since you are using ES6, should probably use ES6 modules to organize your code.
由于您使用的是 ES6，因此应该使用 ES6 模块来组织您的代码。
You define and export your angular-module within an ES6 module:
你在 ES6 模块中定义和导出你的 angular-module：
import {module} from 'angular';
export var itemManager = module('itemManager', []);
Then import the Angular module
然后导入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);
