My current setup involves a script utilizing Angular to display records fetched from a Rails API REST, which is hosted in OpenShift. In my public/.htaccess file, I have included the following directives:
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT, PATCH"
Header add Access-Control-Allow-Headers "Content-Type, Authorization, Content-Length, X-Requested-With"
PassengerFriendlyErrorPages off
The structure of my Html/Angular code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Testing Angular with OpenShift RAILS API REST Integration</title>
<link rel="icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-3.3.5/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<!-- Debugging purposes only. Do not copy these lines! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="MyApp">
<div ng-controller="PostsCtrl">
<div ng-repeat="post in posts">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img alt="100%x200" data-src="holder.js/100%x200" style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCB...
<a role="button" class="btn btn-primary" href="#">Button</a> <a role="button" class="btn btn-default" href="#">Button</a></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
<script>
var app = angular.module("MyApp", ['ngResource']);
app.factory("Post", function($resource) {
return $resource("http://vr-20puntos.rhcloud.com/tables.json");
});
app.controller("PostsCtrl", function($scope, Post) {
Post.query(function(data) {
$scope.posts = data;
});
});
</script>
</body>
</html>
I'm currently using the Free Plan for testing purposes and encountering issues. Any guidance or assistance would be greatly appreciated.