How do I make an Angular service using typescript?

Question

I have a service code using typescript and AngularJS like this :

/// <reference path='../_all.ts' />

module bankApp {
    'use strict';

    export class MDCurrencyService implements IMDCurrencyService {
        httpService: ng.IHttpService;
        promise: ng.IPromise<void>;

        constructor($http: ng.IHttpService,
            $q : ng.IQService) {

            this.httpService = $http;
        }

        get(): MDCurrency[] {
            var promise = this.httpService.get('/Master/CurrencyGetAll').then(function (res) {
                return res.data;
            });
            return promise;
        }


        save(cur: MDCurrency) {
            this.httpService.post('/Master/CurrencySave', cur);

        }

        softDelete(id: string)
        { }

        hardDelete(id: string)
        { }




    }
}

I will use my controller like this :

this.currencies = $scope.currencies = mdCurrencyService.get();

How do I make an angular service $http using typescript? I'd like it so that this.currencies in my controller will be filled with data from the server.

Jesús López · Accepted Answer · 2016-02-23 07:42:17Z

The service should look like the following. Don't forget registering the service in the module:

export class MDCurrencyService implements IMDCurrencyService {
    constructor(private $http: ng.IHttpService, private $q : ng.IQService) {
    }

    get(): ng.IPromise<MDCurrency[]> {
        var deferred = this.$q.defer();
        this.$httpService.get('/Master/CurrencyGetAll').then(response => {
            deferred.resolve(response.data);
        }).catch( reason => {
            deferred.reject(reason);
        });
        return deferred.promise;
    }
}

angular.module("TheModule").service("mdCurrencyService", MDCurrencyService);

The controller should look like this:

mdCurrencyService.get().then(currencies => {
   this.$scope = currencies;
}).catch( reason => {
   alert("something went wrong!");
});

EDIT:

The code can be simplified, the $q service is not required:

export class MDCurrencyService implements IMDCurrencyService {
    constructor(private $http: ng.IHttpService) {
    }

    get(): ng.IPromise<MDCurrency[]> {          
        return this.$httpService.get('/Master/CurrencyGetAll')
                   .then(response => response.data);
    }
}

angular.module("TheModule").service("mdCurrencyService", MDCurrencyService);

Collectives™ on Stack Overflow

How do I make an Angular service using typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest