Skip to content

Instantly share code, notes, and snippets.

Embed
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" });
}]);
@bryanrideshark

This comment has been minimized.

Copy link

commented Jul 18, 2014

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

@jasperSpeicher

This comment has been minimized.

Copy link

commented Oct 27, 2015

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

@Kajvdh

This comment has been minimized.

Copy link

commented Nov 17, 2015

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

@luxifertran

This comment has been minimized.

Copy link

commented Nov 24, 2015

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

@kvnknowles

This comment has been minimized.

Copy link

commented Dec 16, 2015

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

@mmiszy

This comment has been minimized.

Copy link

commented Feb 19, 2016

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

@mmiszy

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented May 31, 2016

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

@karol-gontarski

This comment has been minimized.

Copy link

commented Jul 11, 2016

Thanks ! Save me day!

@nhaydon

This comment has been minimized.

Copy link

commented Jul 15, 2016

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

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.