Calling MVC API within AngularJS?

Question

UPDATE: here is the error i am getting when i do console.log right before the line $scope.Host = data;

XMLHttpRequest cannot load http://..... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:52029' is therefore not allowed access.

I'm trying to call an API that returns JSON data, I'm beginner in AngularJS and what I'm trying to do is to call an API and display the data very simply.

My HTML file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My AngularJS App</title>
    <script src="../scripts/angular.js"></script>
</head>
<body>
    <div data-ng-app="MyModule">

        <table class="table" data-ng-controller="MyModuleCtrl">
            <tr>
                <th>
                    FirstName
                </th>
                <th>
                    MiddleName
                </th>
                <th>
                    LastName
                </th>
                <th>
                    Email
                </th>
                <th>
                    Active
                </th>
            </tr>

            <tr>
                <td>
                    {{Host.FirstName}}
                </td>
                <td>
                    {{Host.MiddleName}}
                </td>
                <td>
                    {{Host.LastName}}
                </td>
                <td>
                    {{Host.Email}}
                </td>
                <td>
                    {{Host.Active}}
                </td>
            </tr>
        </table>
    </div>
    <script src="../scripts/MyApp/App.js"></script>
</body>
</html>

The App.js file:

var MyModule = angular.module("MyModule", []);

MyModule.factory('MyHttpService',
    ['$http', function ($http) {

    return {
        getAll: function () {
            return $http.get('http://api.host.com/host'); //it returns json data
        }
 };
}]);

MyModule.controller('MyModuleCtrl', ['$scope', '$http', '$window', 'MyHttpService', 
    function ($scope, $http, $window, MyHttpService) {

        load();

        function load() {
            MyHttpService.getAll().success(function (data) {
               $scope.Host = data;
            }
        );
    }
}]);

because that code works... http://plnkr.co/edit/1xaoZbSeY37wJpJYOi0C — calebboyd, May 06 '14 at 00:47
the problem is that it not getting data and yes i verified in the browser and it does spit json data. — Nick Kahn, May 06 '14 at 01:00
@Brocco: i see that its working and your `json` file is within the folder and when i replace your `host.json` file to the `api url` then it does not display any data. — Nick Kahn, May 06 '14 at 01:04
Right before the line `$scope.Host = data;` put `console.log(data);` then check the browser's console and post the results. — Brocco, May 06 '14 at 01:08
`$http.get('http://api.host.com/host');` is why you are getting a CORS/xhr exception. Because that domain is different than that of your angular app, your browser is treating it as a CORS request. You have 2 choices- handle the CORS request on your server, or set the domains the same and remove the CORS problem. If you choose option 1, look at setting CORS response headers that allow your request. If you choose option 2 (make requests to localhost:), the code you have should work correctly. — J.Wells, May 06 '14 at 01:33

score 1 · Accepted Answer · edited May 23 '17 at 12:05

For the sake of offering an answer:

$http.get('http://api.host.com/host'); is why you are getting a CORS/xhr exception. Because that domain is different than that of your angular app, your browser is treating it as a CORS request. You have 2 choices- handle the CORS request on your server, or set the domains the same and remove the CORS problem. If you choose option 1, look at setting CORS response headers that allow your request. If you choose option 2 (make requests to localhost:<urPort>), the code you have should work correctly.

I answered this question where I went into more detail about how CORS works/how the browser handles a CORS request.

Calling MVC API within AngularJS?

1 Answers1