コントローラにtypescriptでangularjsサービスを追加するにはどうすればいいですか

Question

typescriptでコントローラにサービスを追加する方法については、多くのWebサイトで検索しています。私はdfiffertのウェブサイトやフォームのオーバーフローにもいくつかの例を試しましたが、まだ苦労しています。内部の問題は何かを私のコードで見てください。

module Application.Stores { 

    export class StoreApplication { 
     private sPresets: IStorePresets; 

     constructor(presets: IStorePresets) { 
      this.sPresets = presets; 
     } 

     init() { 

      var newStoresApp = angular.module('NewStoresApp', []); 
      this.dependency(newStoresApp); 

      newStoresApp.service('StoreCollectionService', ['$http', '$q', 'sPresets', ($http, $q, sPresets) => new Application.Stores.Services.StoreCollectionService($http, $q, sPresets)]); 
      // Working but without service 
      //newStoresApp.controller("CollectionCtrl", ['$scope', ($scope) => new Application.Stores.CollectionCtrl($scope)]); 

      // Not working 
      //newStoresApp.controller('CollectionCtrl', ['$scope', 'StoreCollectionService', Application.Stores.CollectionCtrl]); 

      //Not Working 
      //newStoresApp.controller("CollectionCtrl", ['$scope', 'StoreCollectionService', ($scope, StoreCollectionService) => new Application.Stores.CollectionCtrl($scope, StoreCollectionService)]); 


      newStoresApp.controller("CollectionCtrl", []); // How can I do it here? 
     } 

     private dependency(app: ng.IModule) { 
      app.factory("presets",() => { 
       return this.sPresets; 
      }); 
     } 
    } 
} 

このscanrioのコントローラにサービスを追加するにはどうすればよいですか？私はJS含まれるファイルの順次いる

：コントローラ内部の

Html.RequiresJs("https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"); 
    Html.RequiresJs("~/Areas/Warehouse/Scripts/Stores/StoreCollectionService.js"); 
    Html.RequiresJs("~/Areas/Warehouse/Scripts/Stores/StoreCollectionsCtrl.js"); 
    Html.RequiresJs("~/Areas/Warehouse/Scripts/Stores/StoresApp.js"); 

、コードは以下の通りです：

module Application.Stores { 
     import Services = Application.Stores.StoreCollectionService; 

     export class CollectionCtrl { 

      private $scope: any; 
      private storeCollectionService: StoreCollectionService; 

      constructor($scope: ng.IScope, storeCollectionService: StoreCollectionService) { 
       this.$scope = $scope; 

       this.init(); 
      } 

      init(): void { 

      } 


      private GetAll() { 
       console.log("Got it all works."); 
      } 
     } 
    } 

私はALOSこの例では、$ [ 'サービス']を注入しようとしています。たとえば、質問の中で私をサポートするためのヘルプリンクを表示することができます。

How can I define an AngularJS service using a TypeScript class that doesn't pollute the global scope?

https://docs.angularjs.org/guide/di

Answer 1

これは、あなたが実行しているプロジェクト作ってあげる

module Application.Stores { 

    export class StoreApplication { 
     constructor() { 
     } 
    } 

    var newStoresApp = angular.module("NewStoresApp", []); 

    newStoresApp.service('NewStoresServics', ['$http', NewStoresServics]); 
    newStoresApp.controller("NewStoresController", ['$scope', 'NewStoresServics', NewStoresController]); 
} 

...それを動作させるためにこの方法を試してみてください。

Answer 2

あなたは角度最初にサービス（StoreCollectionService？）を登録する必要があります。

app.service("StoreCollectionService", StoreCollectionService); 

あなたが言ったようにstatic $injectサービスを挿入することができます。

export class CollectionCtrl { 

     static $inject = ["$scope", "StoreCollectionService"] 

     constructor(private $scope: ng.IScope, private storeCollectionService: StoreCollectionService) { 

      this.init(); 
     } 

     init(): void { 

     } 


     private GetAll() { 
      console.log("Got it all works."); 
     } 
}