Angular2 Http Sağlayıcıları ES5 (TypeScript değil)

Question

Bir uygulama üzerinde çalışıyorum ve eğlence için Angular2 ile oynuyorum. ES5 JavaScript kullanıyorum ve şu anda sorum şu anda Http servisine nasıl erişebilirim? Kullanılabilir tüm belgeler TypeScript'dir (bu yardımcı değildir) ya da Angular2'nin alfa sürümü içindir ve sistem o zamandan beri değişmiştir.

Angular2 sürüm 2.0.0-beta.13 kullanıyorum. Aşağıdaki hatayı alıyorum: TypeError: ng.http.get is not a function in [null]. ng.http.Http.get kullanarak boşuna hiçbir zaman denedim. Kafamda bulunan angular2-all.umd.js ve angular.io (RxJS, es6 şimleri, polyfills, vb.) Tarafından tanımlanan diğer js gereksinimleri var.

Referans için sahip olduğum kod parçacıkları aşağıda verilmiştir. Tüm dosyalar okuma kolaylığı için birlikte birleştirilmiştir.

;(function (app, ng) { 
 
    app.CommandService = (function() { 
 
     var CommandService = function() { 
 
      this.url = 'api/commands'; 
 
     }; 
 

 
     CommandService.prototype.all = function() { 
 
      return ng.http.get(this.url) 
 
       .map(function (response) { 
 
        return response.json().data; 
 
       }) 
 
       .catch(); 
 
     }; 
 

 
     return CommandService; 
 
    })(); 
 
})(window.app || (window.app = {}), window.ng); 
 

 
;(function (app, ng) { 
 
    app.CommandComponent = (function() { 
 
     function CommandComponent(commandService) { 
 
      this.commandService = commandService; 
 
      this.commands  = []; 
 
     } 
 

 
     CommandComponent.parameters = [ 
 
      app.CommandService 
 
     ]; 
 
     CommandComponent.annotations = [ 
 
      new ng.core.Component({ 
 
       selector: '#command-listing', 
 
       templateUrl: 'api/templates/commands/listing', 
 
       providers: [ 
 
        app.CommandService, 
 
        ng.http.HTTP_PROVIDERS 
 
       ] 
 
      }) 
 
     ]; 
 

 
     CommandComponent.prototype.all  = function() { 
 
      var self = this; 
 

 
      this.commandService.all().subscribe(
 
       function (commands) { 
 
        self.commands = commands; 
 
       }, function (error) { 
 
        self.error = error; 
 
       } 
 
      ); 
 
     }; 
 
     CommandComponent.prototype.ngOnInit = function() { 
 
      this.all(); 
 
     }; 
 

 
     return CommandComponent; 
 
    })(); 
 
})(window.app || (window.app = {}), window.ng); 
 

 
;(function (app, ng) { 
 
    document.addEventListener('DOMContentLoaded', function() { 
 
     ng.platform.browser.bootstrap(app.CommandComponent); 
 
    }); 
 
})(window.app || (window.app = {}), window.ng);

bir zamanlama açısından bakıldığında

, typescript uygun bir seçenek olarak görünmemektedir. Gerekli ortamı kurmaya çalıştım ve TS sorunlarının giderildiği bir gün sonra, şimdi SystemJS sorunlarım var, bu yüzden ben tüm JS'leri anlamaya zamanım olacak kadar sade JS seçeneğinin yeterli olabileceğini umuyorum. .

Daha fazla bilgi gerekirse, bildirin; Verdiđim için mutluyum.

Answer 1

Değişim senin CommandService:

;(function (app, ng) { 
    app.CommandService = (function() { 
     var CommandService = function (http) {   // this line changed 
      this.url = 'api/commands'; 
      this.http = http;       // this line added 
     }; 

     CommandService.parameters = [     // this line added 
      ng.http.Http // this will be passed as arg in the constructor 
     ];            // this line added 

     CommandService.prototype.all = function() { 
      return this.http.get(this.url)    // this line changed 
       .map(function (response) { 
        return response.json().data; 
       }) 
       .catch(); 
     }; 

     return CommandService; 
    })(); 
})(window.app || (window.app = {}), window.ng); 

bakınız plunker: http://plnkr.co/edit/4FG1Lrt7Yhnzo20azV8Z?p=preview

Sadece ek bir bilgi olarak, sen CommandComponent (satır app/main.js 41) kaldırmak olabilir ve böyle bootstrap() de ng.http.HTTP_PROVIDERS eklemek :

document.addEventListener('DOMContentLoaded', function() { 
    ng.platform.browser.bootstrap(app.CommandComponent, [ng.http.HTTP_PROVIDERS]); 
});