Call a Angular js page in Play framework

Question

I am finding trouble to display my AngularJs page from Play framework 2.2

The Angular js page is located in the same project directory which is

C:\webProj\test\app\www\index.html

Note this index.html is not the index.scala.html that we have in play views directory

I need to render this page from my Play project. I have tried this

GET /masterid controller.Assets.at("/app/www/",index.html)

but it gives a compilation error.

Answer 1

Make it faster, just place your file in i.e.: /public/angular-app/index.html, so you can use it via:

@routes.Assets.at("angular-app/index.html")

Next (assuming that you have standard routes) you can just use static paths to your public assets, i.e. if image is placed in folder public/img/logo.png you can access it with:

<img src="/assets/img/logo.png" alt=""/>

So just by replacing public/ to /assets/ (slash at beginning to make sure you don't need to use base tag in head of document).

Answer 2

Explanation of the error

There are some syntax errors in this route configuration:

GET /masterid controller.Assets.at("/app/www/",index.html)

It should be controllers instead of controller, the path is wrong, and the parameters are not specified correctly. It could be written as:

GET /masterid controllers.Assets.at(path="/app/www", file="index.html")

Note that as written, this route will map only to the index.html file, not to any other resources under /masterid.

Solution with a separate directory

To behave exactly as asked, with a separate directory and a custom URL, you would need to specity a second asset route in addition to the default one. This would also require changing all usages of @routes.Assets.at to specify two parameters (folder and file), and adding a configuration to build.sbt:

playAssetsDirectories <+= baseDirectory / "app/www"

Solution using the public directory and a custom URL

The path of least resistance is to create the custom index.html file in the project's public directory. To use a custom URL as asked in the question, you could change the default asset path to "masterid" by changing this line in the routes file:

GET     /assets/*file               controllers.Assets.at(path="/public", file)

to this:

GET     /masterid/*file             controllers.Assets.at(path="/public", file)

In this case the custom index.html file could be accessed as:

http://localhost:9000/masterid/index.html

Relative URLs to other resources under the /public folder would work as well.

Solution using the public directory and the default URL

If you don't require the /masterid URL under the root, you can save your index.html file under public/app and refer to it as:

@routes.Assets.at("app/index.html")

This will resolve to:

http://localhost:9000/assets/app/index.html

Documentation

For more extensive instructions see Working with public assets.