Wie kann ich angularjs Service in Controller in Typoskript hinzufügen

Question

Ich habe auf vielen Websites über das Hinzufügen von Service in Controller in Typoskript suchen. Ich habe einige Beispiele von dfiffert Websites und Formular-Stack-Überlauf versucht, aber ich kämpfe immer noch. Wirst du bitte einen Blick auf meinen Code werfen, was das Problem darin ist.

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

Wie kann ich Service in den Controller in diesem ScanRio hinzufügen?

Ich habe folgende Reihenfolge der enthaltenen js Dateien:

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

Und Code in Controller ist wie folgt:

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."); 
      } 
     } 
    } 

Ich habe ich versucht, alos dieses Beispiel injizieren $ [ 'Service']. Zum Beispiel können Sie diese hilfreichen Links anzeigen, um mich bei der Frage zu unterstützen.

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

auf diese Weise versuchen, es ... funktioniert

module Application.Stores { 

    export class StoreApplication { 
     constructor() { 
     } 
    } 

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

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

Das wird Ihr Projekt laufen machen.

Answer 2

Sie den Dienst (StoreCollectionService?) Mit kantigem zuerst müssen registrieren.

app.service("StoreCollectionService", StoreCollectionService); 

dann wie Sie gesagt haben können Sie static $inject den Service nutzen zu injizieren.

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."); 
     } 
}