如何使用 AngularJS 和 TypeScript 调用 WebAPI 操作？答案

【问题标题】：How to call WebAPI action with AngularJS and TypeScript?如何使用 AngularJS 和 TypeScript 调用 WebAPI 操作？
【发布时间】：2014-10-23 12:03:48
【问题描述】：

我需要从 AngularJS 调用我的 webAPI 操作。我可以做简单的 CRUD，但是如果我想调用特定的操作，我应该怎么调用它？

例如，我可以通过从 AngularJS Resource 调用 save 来调用 POST。

这是我正在使用的 TypeScript 代码：

Link to the source of the code

 /// <reference path="../models/ILogin.ts" />

 module App.Resources {
 "use strict";

 export interface ILoginResourceDef
 extends ng.resource.IResource<Models.ILogin> {
 }
}


/// <reference path="ILoginResourceDef.ts" />

 module App.Resources {
"use strict";

export interface ILoginResource
extends ng.resource.IResourceClass<Resources.ILoginResourceDef> {
}
} 


/// <reference path="../models/ILogin.ts" />
/// <reference path="../models/Login.ts" />
/// <reference path="../resources/ILoginResource.ts" />
/// <reference path="../scope/ILoginScope.ts" />


module App.Controllers {
"use strict";

export class AccountController {
    constructor(private $scope: Scope.ILoginScope, private loginResource: Resources.ILoginResource) {
        $scope.newLogin = new Models.Login();
    }

    public login(): void {
        this.loginResource.save(this.$scope.newLogin,  // This save trigger the POST
            () => this.logme(),
            () => { alert('failure'); });
    }

【问题讨论】：

标签： angularjs asp.net-web-api typescript

【解决方案1】：

我可以做简单的 CRUD，但如果我想调用特定的操作，我应该如何调用它？

您可以使用原始的$http 将您的调用设计为完全您想要的样子。 https://docs.angularjs.org/api/ng/service/$http

【讨论】：

【解决方案2】：

这是我所做的，我做了一个不同的服务并将服务注入控制器

模块portal.services {

export class apiService {


    public getData<T>(url?:string): ng.IPromise<T> {

        var def = this.$q.defer();
        this.$http.get(this.config.apiBaseUrl + url).then((successResponse) => {

            if(successResponse)
                def.resolve(successResponse.data);
            else
                def.reject('server error');

        }, (errorRes) => {

            def.reject(errorRes.statusText);
        });

        return def.promise;
    }

    public postData<T>(formData: any, url?:string,contentType?:string): ng.IPromise<T>{

        var def = this.$q.defer();

        this.$http({
            url: this.config.apiBaseUrl + url,
            method: 'POST',
            data:formData,
            withCredentials: true,
            headers: {
                'Content-Type':contentType || 'application/json'
            }
        }).then((successResponse)=>{
            def.resolve(successResponse.data);
        },(errorRes)=>{
            def.reject(errorRes);
        });

        return def.promise;

    }

    static $inject = ['$q','$http', 'config'];

    constructor(public $q:ng.IQService,public $http:ng.IHttpService, public config:interfaces.IPortalConfig) {


    }

}

}

【讨论】：