Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
How to use AngularJS ng.resource.IResource with TypeScript.
/// <reference path="angular.d.ts" />
/// <reference path="angular-resource.d.ts" />
interface IEmployee extends ng.resource.IResource<IEmployee>
{
id: number;
firstName : string;
lastName : string;
}
interface IEmployeeResource extends ng.resource.IResourceClass<IEmployee>
{
update(IEmployee) : IEmployee;
}
angular
.module('myapp', ['ngResource'])
.factory('EmployeeResource', ['$resource', ($resource : ng.resource.IResourceService) : IEmployeeResource => {
// Define your custom actions here as IActionDescriptor
var updateAction : ng.resource.IActionDescriptor = {
method: 'PUT',
isArray: false
};
// Return the resource, include your custom actions
return <IEmployeeResource> $resource('/api/employee/:id', { id: '@id' }, {
update: updateAction
});
}])
.controller('TestCtrl', ['EmployeeResource', (Employee : IEmployeeResource) =>
{
// Get all employees
var employees : Array<IEmployee> = Employee.query();
// Get specific employee, and change their last name
var employee : IEmployee = Employee.get({ id: 123 });
employee.lastName = 'Smith';
employee.$save();
// Custom action
var updatedEmployee : IEmployee = Employee.update({ id: 100, firstName: "John" });
}]);

The types for this have always been a bit confusing. Thanks for the concise example :)

Wouldn't Employee.get() have to be synchronous for lines 38 and 39 to work?

Kajvdh commented Nov 17, 2015

How about a Create? I can't do new IEmployee() or something. So how can I instantiate a new object?

@Kajvdh you can instantiate a new object using var newEmployee = new Employee(), then call newEmployee.$save() to save it.

@luxifertran, where is the constructor for new Employee() defined?

mmiszy commented Feb 19, 2016

@scottmcarthur
update(IEmployee) : IEmployee;
should be
update(employee : IEmployee) : IEmployee;

mmiszy commented Feb 19, 2016

You should also modify the IEmployee interface:

interface IEmployee extends ng.resource.IResource<IEmployee>
{
    id: number;
    firstName : string;
    lastName : string;
    $update(): IPromise<IEmployee>
}

ahasall commented May 30, 2016

The problem with this method is that you cannot implement the IEmployee interface without having to write all the $ methods ($get, $save...)
I'm looking for a solution to that.

wald-tq commented May 31, 2016

@ahasall: why do you need to implement this Interface?

Thanks ! Save me day!

nhaydon commented Jul 15, 2016 edited

Can anyone help implement this using a Service instead of a factory? I am trying to implement a custom Copy action and here is what I have so far

module rebateMaintenance.common {

interface IDataAccessService {
    getCopyRebateResource(): ICopyRebateResourceClass;
}


interface ICopyRebateResource
    extends ng.resource.IResource<domain.ICopyRebate> {
    $copy(): ng.IPromise<domain.ICopyRebate>
}

interface ICopyRebateResourceClass
    extends ng.resource.IResourceClass<ICopyRebateResource> {
    copy: any;
}
export class DataAcessService
    implements IDataAccessService {

    static $inject = ["$resource"];
    constructor(private $resource: ng.resource.IResourceService) {

    }

    getCopyRebateResource(): ICopyRebateResourceClass {
        return this.$resource("http://localhost:48679/copyrebate/:id", null,
            {
                copy: { method: 'POST' }
            }
        )
    }


}
angular.module("common.services")
    .service("dataAccessService",
    DataAcessService);
}

deadmann commented Feb 8, 2017

i made a customize version of ngResource, which i transform result after they become ready, the original function transformResponse change and destroy type of data, so i intruduce a new function called transformResult, but how should i introduce this callback/config to the TS ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment