Angular directive inside Play Framework application

Question

I'm adding some angularJs functions inside an existing Play Framework 2.0 application.

The angularjs files are served inside the public/ folder. Everything works fine until I'm trying to use a directive with a separated template:

The directive js multi-charts.js and the directive template multi-charts.html are all placed in the same directory components/directives. So the full path for the files would be:

public/components/directives/multi-charts.js
public/components/directives/multi-charts.html

The problem is that I cant' reach the template file inside the directive using templateUrl.

The directive:

app.directive('multiCharts', ['chartService', function(chartService){
    return {
        restrict: 'EACM',
        templateUrl: 'components/directives/multi-charts.html',
        replace: true,
        link: function (scope, elem, attrs) {
        }
    }}]);

Running the application the template is not achievable:

GET http://localhost:9000/company/components/directives/multi-chart.html 404 (Not Found)

Changing the paths inside templateUrl doesn't change the error.

I'm missing something, is there a way to refer to a html template in a directive served by the internal Play Framework web server?

multi-charts.html != multi-chart.html your missing the s or was that just a typo in the example? — stackg91

Atropo Atropo · Accepted Answer · 2015-08-28T14:48:09

Found the solution. Adding a new route to the play framework routes file:

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file                               controllers.Assets.at(path="/public", file)

I'm able to reach the template at:

templateUrl: '../assets/js/angular/directives/multi-charts.html'

Angular directive inside Play Framework application

1 Answers