Public APIs with Cross-origin Resource Sharing (CORS) enabled

examples/try/cors.html

<!DOCTYPE html>
<html>
<head>
    <title>CORS - Cross-Origin Resource Sharing</title>
    <meta charset="utf-8">
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=yes">

    <script src="../angular/angular.min.js"></script>
    <script src="cors.js"></script>
    <link href="cors.css" rel="stylesheet">
</head>
<body>

<div ng-app="CORSApp" ng-controller="CORSController">
    <select ng-model="site" ng-change="clear()" ng-options="s as s.name for s in sites">
    <select>
    <button ng-click="try()">Try</button>
    URL: {{site.url}}
    <hr>
    Result: {{ data }}
    <div ng-show="error" id="error">Failed</div>
</div>
</body>
</html>

examples/try/cors.js

angular.module('CORSApp', [])
    .controller('CORSController', function($scope, $http) {
        //var url = 'https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json';
        //var url = 'https://api.smartsheet.com/2.0/sheets';
        //var url = 'http://public-api.wordpress.com/rest/v1/sites';

        $scope.sites = [
            {
                url: "https://api.github.com",
                name: "GitHub"
            },
            {
                url: "http://api.metacpan.org/v0/release/_search?size=10",
                name: "MetaCPAN v0"
            },
            {
                url: 'http://api.openweathermap.org/data/2.5/weather?q=Orlando',
                name: 'OpenWeatherMap'
            }
        ]

        $scope.clear = function() {
            console.log('clear');
            $scope.data = '';
            $scope.error = 0;
        }
        $scope.try = function() {
            $http.get($scope.site.url).then(
                function(response) {
                    console.log(response);
                    $scope.data = response.data;
                },
                function(response) {
                    console.log("error");
                    console.log(response);
                    $scope.error = 1;
                }
            );
        }
    });

examples/try/cors.css

#error {
    color: red;
}