Typescript Snippet - $resource

Mit Hilfe des Angular $resource Service, kann auf einfache Art und Weise eine RESTful API angespochen werden.

Für den typisierten Zugriff mit Typescript gestaltet sich die Anwendung des $resource Service ein wenig aufwendiger. In einem ersten Schritt muss eine Resource als Interface definiert werden, welche von IResource erbt.

export interface IMyData extends ng.resource.IResource<IMyData> {
    id: number;
    name: string;
}

Als nächstes wird eine eigene ResourceClass definiert, die von IResourceClass ableitet. Dieses Vorgehen hat den Vorteil, dass zu den Default-Methoden (delete, get, query, remove und save) des IResourceClass Interface eigene Methoden definiert werden können.

export interface IMyDataResource extends ng.resource.IResourceClass<IMyData> {
    mymethod: ng.resource.IResourceArrayMethod<IMyData>;
}

Der $resource Service wird nun mit Hilfe einer Type Assertion erzeugt und konfiguriert.

namespace App {
    'use strict';

    export interface IDataContext {
        mydata(): IMyDataResource;
    }

    class DataContext implements IDataContext {

        static $inject = ['$resource'];
        constructor(private $resource: angular.resource.IResourceService) { }

        public mydata(): IMyDataResource {
            
            let methodDescriptor: angular.resource.IActionDescriptor;
            return this.$resource("/your/api", { id: '@id' }, {
                mymethod: methodDescriptor = { method: 'GET', isArray: true }
            }) as IMyDataResource;
        }
    }

    angular.module('app').service('DataContext', DataContext);
}