How can I add angularjs service in controller in typescript

1
votes

I have search on a lot of websites about adding service into controller in typescript. I have alose tried some example s from dfiffert websites and form stack overflow as well but I am still struggling. Will you please have a look on my code that what is the problem inside. 

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

How can I add service into controller in this scanrio?

I have following order of included js files:

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

And Code inside controller is as following:

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

I have I alos tried this example $inject['service']. For example you can view these helping links to support me in the question.

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

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

2
javascriptjqueryangularjsasp.net-mvctypescript

2 Answers

1
votes

Try this way to make it work...

module Application.Stores {

    export class StoreApplication {
        constructor() {
        }
    }

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

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

This'll make you project running.

0
votes

You will need to register the service (StoreCollectionService?) with Angular first.

app.service("StoreCollectionService", StoreCollectionService);

then like you said you can use static $inject to inject the service.

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