Geek Answers Handbook

How to call API in C # using angularjs

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 works fine on my local machine ( http: // localhost / api / controller / method? Param = value ).

But when I deployed it to the server with the app name app , it cannot call the API ( http: // server-ip / app / api / controller / method? Param = value ).

Obviously this is not the case since the URL is different. So, what is the correct way to call the API in C # so that it works on any server .

What I tried:
1. URL.Action . In this case, it does not work.
2. I do not want to use @ HTML.hidden
3. Starting a call with or without a slash (/)

+6
source share
4 answers

I usually solve this using a factory like this -

First on the .cshtml page I load all angular js. Then create a factory for baseURL as follows:

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

Then enter BaseURL inside the controller -

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

Finally add it to the URL

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

I'm not sure if I understood your question correctly, but I use the angular constant to set the server url

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

and then at $ http call

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

I am sure there is a way to automate this (gulp, grunt), but I have not reached it yet. When deploying the application, I would simply manually change the constant. If I find an abnormal way for myself, I will update the answer.

Hope this helps a bit ...

0
source

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

If you have some kind of automatic build, it’s easy to prepare deployment packages with changed values ​​(using Gulp / Grunt / TeamCity / Octopus, no matter what you like).

0
source 

 //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; } });
0
source

More articles:


All Articles