ES6 (AngularJS) ile hizmetler

Question

ES6 ile hizmet oluştururken $ http gibi Angular yerleşik hizmetlerine erişirken sorun yaşıyorum. Örneğin, bir AJAX araması yapacak ve sonra da bazı şeyler yapacak bir "ResultsFinder" hizmeti oluşturuyorum. Sorun şu ki, kurucudaki $ http değerine erişebileceğim (argüman olarak iletirsem), ancak diğer yöntemlere (getResults gibi) erişemem.

(() => { 
 
    'use strict'; 
 

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

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

İçinde getResults ben $ erişimi http gerekmez:

bu kod örneğine bakın.

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

Herkes bu işlemek için doğru yolu hakkında bana bazı tavsiyelerde bulunabilir: Ben doğru bu gibi hissetmiyorum şey yapmalıyım erişimi için?

Answer 1

ürününü getResults yönteminizin içinde kullanmanız gerekir. Bir yan not olarak

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

, senin sınıfa statik $inject "şerhi" ekledi. Eğer ngAnnotate gibi bir şey kullanmıyorsanız bu en iyi uygulamadır. Ayrıca, yalnızca $inject değerlerini değiştirerek uygulamaları değiştirmeyi kolaylaştırır.

Sen bununla ES5 içinde nasıl görüneceğini düşünmek yardımcı olabilecek ES5 geliştiricisi iseniz

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

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

NOT

Eğer ES6 kullandığınıza göre, muhtemelen organize etmek ES6 modüllerini kullanmalıdır kodu.

ve tanımlayın bir ES6 modülü içinde açısal-Modül vermek:

import {module} from 'angular'; 

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

Sonra Bu sınıf çalışmaları, yapıcı metotta Mülklerinizi tanımlamak zorunda nasıl Açısal modülü

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