Angular.JS + CORS

Angular.JS with CORS/IE compatibility - using $http.defaults.useXDomain

by Gonzalo

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.js"></script>

<div ng-app="Test">
    <div ng-controller="corsCtrl">
        <button ng-click="useResource()">$resource request</button>    
        <ul>
            <li ng-repeat="food_option in food_options.objects">{{food_option.name}}</li>
        </ul>
        <input type="text" name="name" ng-model="optionText">
        <button ng-click="postResource()">$resource post</button>
    </div>
</div>

JavaScript

angular.module('Test', ['ngResource']).controller('corsCtrl', function ($scope, $resource) {
    
    $scope.useResource = function() {
  
        var FoodOptions = $resource('http://lit-hollows-9760.herokuapp.com/api/:type',
                                    {type: 'food'},
                                    {
                                        get: {method: 'JSONP', params: {format: 'jsonp', callback:'JSON_CALLBACK'}},
                                    }
                                   );
        
        $scope.food_options = FoodOptions.get();
        
    };
    
    $scope.postResource = function() {
        
        var FoodOptions = $resource('http://lit-hollows-9760.herokuapp.com/api/:type',
                                    {type: 'food'},
                                    {
                                        update: {method: 'POST', headers: {'Content-Type': 'application/json'}}
                                    }
                                   );
        
        FoodOptions.update(function() {
            ({'name': $scope.optionText});
        });


    };
    
});