Angular with Play (Scala): ng-include references

Question

Situation

I started an app with Playframework (Scala) and AngularJS v1.3.

(Exactly the template Play Silhouette Angular Seed)

Goal

Loading difference templates using ng-include or a directive.

Problem

Always that I put a reference in Angular code, it doesn't work.

Example:

<div ng-include="'/tpl.html'"></div>
<script type="text/ng-template" id="/tpl.html">
   Content of the template.
</script>

Result: works!!

Now, if I put the template tpl.html in a file in the same directory:

<div ng-include="'tpl.html'"></div>

Result: Doesn't work!! (And in other directories, I tried all the possible routes...)

The same problem occurs in directives, if I put the template inside the directory it works well, but if I try to put in another file it doesn't work.

Question

I used Angular in other projects and never occurs something like this. I think that this happens because Scala (language of Playframework) needs to be compiled and the files .scala.html are converted in .html.

• How can I create some templates .html and then with ng-include put the correct reference?

Answer 1

The root directory is the same that index.htmlfile (path: ui/app).

If the file view1.html is in the path ui/app, the ng-include will be like this:

<div ng-include="'./view1.html'"></div>

Because ui/app is the root path.