How to call API in c# using angularjs

Question

Hi I am calling my API using below code

  $http.get('/api/controller/method?param=value').
           then(function (response) {
               if (response.status == 200) {
                   console.log(response.data);
               }
           });

It is working fine in my local machine (http://localhost/api/controller/method?param=value).

But when I deployed it in server with application name app, it is not able to call the API(http://server-ip/app/api/controller/method?param=value).

Obviously, it won't, as URL are different. So what is the correct way to call an API in c# so that it will work in any server.

What I have tried:
1. URL.Action : It is not working in this case.
2. I don't want to Use @HTML.hidden
3. Call starting with or without slash (/)

will you try this: server-ip/api/controller/method?param=value (i.e. replace localhost with your domain name) — Mahedi Sabuj
– Mahedi Sabuj, Commented Dec 14, 2015 at 8:45
that is working...but by default angularJS is calling "server-ip/app" like this.. — user3035305
– user3035305, Commented Dec 14, 2015 at 8:48
Api Url is all about Api Routing. If you want to call the api like server-api/app you need to change api route config in webApi.config file. — Mahedi Sabuj
– Mahedi Sabuj, Commented Dec 14, 2015 at 8:58
you should add web.config transform to change your main url from localhost to your-server-address. — Burak Karakuş
– Burak Karakuş, Commented Dec 14, 2015 at 8:58

brainless coder · Accepted Answer · 2015-12-14 08:55:46Z

1

I usually solve this by using a factory like this -

First in the .cshtml page I load all the angular js required. Then create a factory for the baseURL like this -

function(angular){
    var module = angular.module('NameOfMyModule');  //gt the module
    module.factory('BaseUrl', function(){
         return '@Url.Action("Action", "Controller")';
    });
}(window.angular);

Then inject that BaseURL inside the controller -

....
module.controller('SomeController', [...., 'BaseUrl', function(...., BaseUrl){
     $scope.baseUrl = BaseUrl;

}]);

....`

Finally prepend it in the url

$http.get($scope.baseUrl + /...../).then(....);

answered Dec 14, 2015 at 8:55

brainless coder

6,4501 gold badge23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vidriduch · Accepted Answer · 2015-12-14 08:52:27Z

0

I'm not sure if I undestood your question correctly, but I'm using angular constant to set server url

angular.constant("CONSTS", {
    "DEV_URL": "http://localhost:12345",
    "LIVE_URL": "http://server-ip/app"
})

and then in $http call

$http.get(CONSTS.DEV_URL + '/api/controller/method?param=value').
    then(function (response) {
        if (response.status == 200) {
            console.log(response.data);
        }
});

I'm sure there is a way to automate this (gulp, grunt), but I didn't get there yet. When deploying the app I would just manually change the constant. If I'll find outomatic way to it I'll update the answer.

Hope this helps a bit...

answered Dec 14, 2015 at 8:52

vidriduch

4,8738 gold badges44 silver badges66 bronze badges

2 Comments

user3035305 Over a year ago

You understood my question correctly. But I don't think, it is a correct way to do it.

vidriduch Over a year ago

i'll leave the answer, hopefuly someone will post a better one, I'd like to know better way as well...

kamil-mrzyglod · Accepted Answer · 2015-12-14 08:54:42Z

0

I don't know your build process etc. but usually you can store application path in some constant value in Angular and use it when calling your API as a prefix.

If you have some kind of automated build, it is easy to prepare deployment packages with changed values(by using Gulp/Grunt/TeamCity/Octopus, whatever you like).

answered Dec 14, 2015 at 8:54

kamil-mrzyglod

5,0081 gold badge22 silver badges30 bronze badges

Comments

Maher · Accepted Answer · 2015-12-14 08:59:48Z

//controller
app.controller("sampleController", function($scope, commonService) {

  //post
  $scope.postData = function() {
    var command = {}
    commonService.postSample(command);
  }

  //get
  commonService.getSample().then(function(data) {
    $scope.permissionList = data;
  });

});



//service
app.service('commonService', function($http, $q) {

  this.postSample = function(command) {
    var deferred = $q.defer();
    $http({
        method: 'POST',
        data: command,
        url: '/Attendance/CreatePersonDailyLeave'
      })
      .success(function(data) {
        deferred.resolve(data);
      })
      .error(function(data) {
        deferred.reject(data);
      });
    return deferred.promise;
  }


  this.getSample = function(id) {
    var deferred = $q.defer();
    $http({
        method: 'GET',
        async: true,
        url: '/Attendance/GetRoles?id=' + id
      })
      .success(function(data) {
        deferred.resolve(data);
      })
      .error(function(data) {
        deferred.reject(data);
      });
    return deferred.promise;
  }

});

Collectives™ on Stack Overflow

How to call API in c# using angularjs

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related