Расширение $ресурса angularjs с использованием IResourceClass typescript

Я разрабатываю SPA, используя Asp.Net Web API и AngularJS. Я также использую TypeScript для получения статической типизации. Итак, я добавил ОпределенноТипированные угловые символы.

Как я использую службы RESTfull. Я думал об использовании $resource of angularjs. теперь ресурс я $не имеет встроенного метода для метода PUT http. Поэтому я решил добавить свое следующее.

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

Теперь, как вы можете видеть, его легко сделать в обычном AngularJS. Я хотел пройти маршрут TypeScript и определить пользовательский интерфейс, который расширяет IResourceClass. документация по этому интерфейсу объясняется следующим образом.

//Baseclass для каждого источника с действиями по умолчанию. // Если вы определяете свои новые действия для ресурса, вам понадобятся // чтобы расширить этот интерфейс и придумать для него ResourceClass.

Я действительно не могу разобраться, как расширить этот интерфейс. Он продолжает придумывать некоторые ошибки в синтаксисе. Может кто-нибудь объяснить, как расширить этот интерфейс и добавить метод Update, который в свою очередь вызывает метод PUT на моих контроллерах.

Ответы

Ответ 1

Сначала определите свою модель, интерфейс, который будет описывать вашего сотрудника.

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

Затем создайте интерфейс, описывающий ресурс, который вы создадите.

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

Создайте 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
        });

    }]);

Внесите свой 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" });
}]);

Создание нового экземпляра сотрудника:

Вы можете создать экземпляр типа IEmployee на new с помощью EmployeeResource factory.

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

Итак, в приведенном выше случае мы вводим наш IEmployeeResource как Employee. Мы можем затем new создать этот объект для создания IEmployee.

Ответ 2

Я полностью согласен с ответом Скотта: fooobar.com/info/411820/...

У меня есть одно дополнение: В моем проекте я создал класс ServiceModel<T>, который реализует интерфейс IActionDescriptor.

module Common.ApiService {
    export class HttpHeaders {
        'Content-Type': string;
        Accept: string;
    }

    export class ServiceModel<T> implements ng.resource.IActionDescriptor {
        public method: string = 'GET';
        public params: T;
        public isArray: boolean = false;
        public url: string;
        public headers: HttpHeaders = new HttpHeaders()
    } 
}

Затем я могу настроить метод в моем контроллере, как и сделал Скотт, но теперь среда IDE будет иметь завершение типа в заголовках (и параметры позже)

export interface IProfileServiceResource extends ng.resource.IResourceClass<IProfileDataModelDef> {
    SaveProfileImage(profileImageUri: Profile.Model.UserProfileModel): ng.resource.IResource<Array<any>>;
}

export class ProfileApiService 
    implements Common.ApiService.IApiServiceBase<IProfileServiceResource> {

    public SaveProfileImage: Common.ApiService.ServiceModel<Profile.Model.UserProfileModel>;

    constructor() {    
        this.SaveProfileImage = new Common.ApiService.ServiceModel<Profile.Model.UserProfileModel>();
        this.SaveProfileImage.method = "POST";
        this.SaveProfileImage.url = "/api/Profile/SaveProfileImage";
        this.SaveProfileImage.headers["Content-Type"] = 'application/json';
}

Я сделал это как дополнительный ответ, так как он служит только для предоставления типов для headers и params.