[英]Services with ES6 (AngularJS)
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. 例如,我正在创建一个“ResultsFinder”服务,它将执行一个AJAX调用然后做一些事情。 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). 问题是我只能在构造函数上访问$ 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. 在getResults内部,我无法访问$ http。 In order to have access I should do something that I don't feel right like this: 为了获得访问权限,我应该做一些我感觉不正确的事情:
(() => { '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? 任何人都可以给我一些关于处理这个问题的正确方法的建议吗?
You need to use this.$http
inside your getResults
method. 你需要在你的getResults
方法中使用this.$http
。
(() => { '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. 作为旁注,我在你的班级中添加了静态$inject
“注释”。 This is a best practice if you are not using something like ngAnnotate. 如果您不使用ngAnnotate之类的东西,这是最佳做法。 It also makes it easier to change out implementations by only changing the $inject
values. 它还可以通过仅更改$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模块中定义和导出角度模块:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.