使用打字稿的IResourceClass angularjs延伸$资源 [英] Extending $resource of angularjs using IResourceClass of typescript

问题描述

我使用Asp.Net的Web API和AngularJS开发SPA。我也用打字稿获得静态类型。所以，我说DefinitelyTyped angularjs。

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

由于我使用REST风格的服务。我想用angularjs的$资源。我现在$资源不具有PUT HTTP方法的内在方法。所以我决定将我自己的如下：

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

现在，你可以看到，它很容易在正常AngularJS做。我想通过打字稿路线和定义延伸<自定义界面href=\"https://github.com/daptiv/DefinitelyTyped/blob/master/angularjs/angular-resource.d.ts\">IResourceClass 。这个接口的文档解释是这样的。

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.

//基类的默认行为everyresource。
  //如果为资源定义新的操作，您将需要
  //扩展这个接口和类型转换ResourceClass吧。

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

我真的不能够做出来如何扩展该接口。它使未来与有关语法一些错误。有人可以解释如何扩展这个接口，并添加更新方法，这反过来又对我控制器调用PUT方法。

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.

推荐答案

首先定义模式，界面，描述你的员工。

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

在 EmployeeResource 工厂：

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

    }]);

注入你 EmployeeResource 到控制器：

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

---

创建一个新员工的实例：

---

Creating a new employee instance:

您可以创建类型的实例 IEmployee 按新 ING的 EmployeeResource 工厂。

You can create an instance of type IEmployee by newing the EmployeeResource factory.

myApp.controller('TestCtrl', ['$scope', 'EmployeeResource', ($scope, Employee : IEmployeeResource) => 
{
    var myEmployee : IEmployee = new Employee({ firstName: "John", lastName: "Smith"});
    myEmployee.$save();
}

因此​​，在上述情况下，我们注入我们的 IEmployeeResource 为员工。我们可以再新这个对象来创建一个 IEmployee 。

So in the case above we inject our IEmployeeResource as Employee. We can then new this object to create an IEmployee.

这篇关于使用打字稿的IResourceClass angularjs延伸$资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！