Angular2 Http Providers on ES5（TypeScriptではない）

Question

私はアプリを開発しています。私は楽しいためにAngular2で遊んでいます。私はES5のJavaScriptを使用している、私の質問は今どのように私はHttpサービスにアクセスするのですか？使用可能なドキュメントはすべてTypeScript（役立たない）またはAngular2のアルファバージョン用です。システムは以来変更されています。

私はAngular2バージョン2.0.0-beta.13を使用しています。私は次のエラーを受け取ります：TypeError: ng.http.get is not a function in [null]。私はng.http.Http.getを使用して無駄にしようとしました。私はangular2-all.umd.jsを頭に含み、angular.io（RxJS、es6 shims、polyfillsなど）で定義されている他のjs要件も持っています。

ここに参考になるコードスニペットがあります。すべてのファイルは、読みやすくするために連結されています。タイミングの観点から

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

、活字体は、実行可能な選択肢ではないようです。私は必要に応じて環境をセットアップしようとしましたが、TSの問題をデバッグする1日後にSystemJSの問題が発生しましたので、私はすべての複雑さを把握するまで、JSのオプションで十分です。 。

詳細情報が必要な場合はお知らせください。私はそれを与えることをうれしく思います。

Answer 1

変更あなたの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); 

参照くださいplunker：http://plnkr.co/edit/4FG1Lrt7Yhnzo20azV8Z?p=preview

ただ、追加情報として、あなたはCommandComponent（ラインapp/main.jsの41）から削除することもできますし、このようなbootstrap()でng.http.HTTP_PROVIDERSを追加：

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