Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am developing SPA using Asp.Net Web API and AngularJS. I also use TypeScript to get static typing. So, I added DefinitelyTyped angularjs.

As I am using RESTfull services. I thought of using $resource of angularjs. now I $resource doesn't have any inbuilt method for PUT http method. So i decided to add my own as follows.

var employees = $resource('/api/employee/:id',{id:'@id'},{"update":{ method: "PUT", isArray:false }};

Now, as you can see, Its easy to do in normal AngularJS. I wanted to go through TypeScript route and define custom interface which extends IResourceClass . documentation of this interface explains like this.

// Baseclass for everyresource with default actions. // If you define your new actions for the resource, you will need // to extend this interface and typecast the ResourceClass to it.

I am really not able to make out how to extend this interface. It keeps coming up with some errors about syntax. Can some one explain how to extend this interface and add Update method which in turn calls PUT method on my controllers.

share|improve this question
    
Please let me know if my answer helped, or if you are still stuck in the comments. Thanks. –  Scott Feb 19 at 15:52

1 Answer 1

up vote 6 down vote accepted

First define your model, the interface that will describes your employee.

// Define an interface of the object you want to use, providing it's properties
interface IEmployee extends ng.resource.IResource<IEmployee>
{
    id: number;
    firstName : string;
    lastName : string;
}

Then create an interface that describes the resource you will create.

// Define your resource, adding the signature of the custom actions
interface IEmployeeResource extends ng.resource.IResourceClass<IEmployee>
{
    update(IEmployee) : IEmployee;
}

Create the EmployeeResource factory:

var myApp = 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
        });

    }]);

Inject your EmployeeResource into a controller:

myApp.controller('TestCtrl', ['$scope', 'EmployeeResource', ($scope, 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" });
}]);
share|improve this answer
    
This does answer my question but doesn't provide exact solution I was looking for. I wanted to have a generic way to define update on $resource. So, i don't have to declare it in every controller. But thanks for the solution. –  Chintan Shah Feb 19 at 18:48
    
If you post answers, make sure they at least COMPILE. I think [$resource, ($resource : ng.resource.IResourceService) : IEmployeeResource => must be ['$resource', ($resource : ng.resource.IResourceService) : IEmployeeResource => mind the quotes. –  LocalJoost Jun 26 at 7:12
    
@LocalJoost I have fixed the small typo. If you find typos feel free to edit them yourself, that's the SO way. Respectively please don't tell me how to answer questions in a community to which you are relatively new, it's rude. –  Scott Jun 26 at 9:01
    
I was not aware I could do that. I don't write on SO that often –  LocalJoost Jun 26 at 14:31
    
@LocalJoost It works for me. It's likely it appears empty while the promise is resolved, after which it is populated. That's just how AngularJS works. Your Employee.query({}, (d) => { var a = d; }) works because it is calling your resolved function with the result. This is by design. –  Scott Jun 27 at 7:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.