URLを呼び出して結果のJSONをそのままレンダリングするはずの単純なAngularJSアプリケーションがあります。ここでのindex.htmlは次のとおりです。Play FrameworkバックエンドのAngularJSレンダリングRaw JSON
<!doctype html>
<html ng-app>
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Hello($scope, $http) {
$http.get('http://localhost:9000/status').
success(function(data) {
$scope.greeting = data;
});
}
</script>
</head>
<body>
<div ng-controller="Hello">
<pre>{{greeting | json}}</pre>
</div>
</body>
</html>
URLブラウザからあるように私が呼ぶとき、私は私が期待してJSONを取得するが、私はローカルホストを呼び出すときに、私は空白のページを参照してください:8080
私はその後、完全に別のサーバーから別のURLを呼び出そうとしました:
http://rest-service.guides.spring.io/greeting
そして予想通り、これはコンテンツをレンダリング:
{"id":1,"content":"Hello, World!"}
私は、NGINXサーバー内でindex.htmlを実行していますが、ポート9000で動作しているバックエンドサーバーはPlayフレームワークによって処理されています。ここに私のNGINX設定があります:
server {
listen 8080;
server_name localhost;
root /Users/joesan/Projects/Sandbox/my-app;
#charset koi8-r;
access_log logs/host.access.log main;
location/{
# If you want to enable html5Mode(true) in your angularjs app for pretty URL
# then all request for your angularJS app will be through index.html
try_files $uri /index.html;
}
# /api will server your proxied API that is running on same machine different port
# or another machine. So you can protect your API endpoint not get hit by public directly
location /api {
proxy_pass http://localhost:9000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
誰かがプロジェクトテンプレートを探している場合の完全なセットアップです:https://github.com/joesan/nginx-mac-os-setup – sparkr