如何在打字稿中在控制器中添加angularjs服務

Question

我有許多關於在打字稿中向服務器添加服務的網站。我已經嘗試了一些來自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."); 
      } 
     } 
    } 

我有我阿洛斯試過了這個例子$注入[「服務」。例如，您可以查看這些幫助鏈接來支持我的問題。

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