How to call WebAPI action with AngularJS and TypeScript?

Question

I need to call my webAPI actions from AngularJS. I can do simple CRUD but if I want to call specific action, how should I call it?

For example I can call POST by Calling save from AngularJS Resource.

Here is the TypeScript code I'm using:

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

Pranay Dutta · Accepted Answer · 2014-10-06 09:32:21Z

here is what i did i had made a different service and inject the service to the controllers

module 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) {


    }

}

}

basarat · Accepted Answer · 2014-08-29 15:56:19Z

0

I can do simple CRUD but if I want to call specific action, how should I call it?

You can just use raw $http to design your calls to be exactly how you want it to be. https://docs.angularjs.org/api/ng/service/$http

answered Aug 29, 2014 at 15:56

basarat

278k60 gold badges475 silver badges528 bronze badges

Collectives™ on Stack Overflow

How to call WebAPI action with AngularJS and TypeScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related