Usługi z ES6 (AngularJS)

Question

Mam problemy z dostępem do wbudowanych usług Angular takich jak $ http podczas tworzenia usługi za pomocą ES6.

Na przykład tworzę usługę "ResultsFinder", która wykona wywołanie AJAX, a następnie zrobi kilka rzeczy. Problem polega na tym, że mam tylko dostęp do $ http na konstruktorze (jeśli przekazuję go jako argument), ale nie na inne metody (takie jak getResults).

Zobacz ten przykład kodu:

(() => { 
 
    'use strict'; 
 

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

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

Inside getresults nie mam dostępu do $ http. W celu uzyskania dostępu należy zrobić coś, czego nie czujesz się dobrze tak:

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

ktoś może mi dać kilka rad na temat właściwego sposobu obsługi to?

Answer 1

Musisz użyć metody this.$http w swojej metodzie getResults.

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

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

Na marginesie, dodałem statyczny $inject "adnotacji" do swojej klasy. Jest to najlepsza praktyka, jeśli nie używasz czegoś takiego jak ngAnnotate. Ułatwia także zmianę implementacji poprzez zmianę wartości $inject.

Jeśli jesteś programistą ES5 może pomóc, aby myśleć o tym, jak to wygląda w ES5

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

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

UWAGA

Ponieważ używasz ES6, prawdopodobnie powinien korzystać z modułów ES6 do organizowania kod.

zdefiniować i wyeksportować kątowy moduł wewnątrz modułu ES6:

import {module} from 'angular'; 

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

następnie zaimportować kątowej modułu

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