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.

Show comment
Hide comment
@bryanrideshark

bryanrideshark Jul 18, 2014

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

bryanrideshark 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.

Show comment
Hide comment
@jasperSpeicher

jasperSpeicher Oct 27, 2015

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

jasperSpeicher 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.

Show comment
Hide comment
@Kajvdh

Kajvdh Nov 17, 2015

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

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?

@luxifertran

This comment has been minimized.

Show comment
Hide comment
@luxifertran

luxifertran Nov 24, 2015

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

luxifertran 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.

Show comment
Hide comment
@kvnknowles

kvnknowles Dec 16, 2015

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

kvnknowles commented Dec 16, 2015

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

@mmiszy

This comment has been minimized.

Show comment
Hide comment
@mmiszy

mmiszy Feb 19, 2016

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

mmiszy commented Feb 19, 2016

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

@mmiszy

This comment has been minimized.

Show comment
Hide comment
@mmiszy

mmiszy 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>
}

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

This comment has been minimized.

Show comment
Hide comment
@ahasall

ahasall 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.

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

This comment has been minimized.

Show comment
Hide comment
@wald-tq

wald-tq May 31, 2016

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

wald-tq commented May 31, 2016

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

@karol-gontarski

This comment has been minimized.

Show comment
Hide comment
@karol-gontarski

karol-gontarski Jul 11, 2016

Thanks ! Save me day!

karol-gontarski commented Jul 11, 2016

Thanks ! Save me day!

@nhaydon

This comment has been minimized.

Show comment
Hide comment
@nhaydon

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

nhaydon 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.

Show comment
Hide comment
@deadmann

deadmann 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 ?

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