0

I am in the process of changing an application I wrote in Play Framework 2.5 to a single page application using AngularJs.

Here's an overview of what I was doing:

  • display a list of posts, using Scala Template's @for
  • each post was rendered using an included template

snippet:

@for(post <- posts) {
  @fragments.post(post)
}

And so far, here is what I did with Angular:

  • use $http to retrieve data from DB using Scala's javascript routing
  • use ng-repeat instead of the @for, to iterate over the list
  • each post is currently rendered as plain json, using {{post}}

snippet:

<ul>
  <li ng-repeat="post in posts">
    <div> {{post}} </div>
  </li>
</ul>

and now having trouble displaying each post with some template, here are the attempts:

  • somehow pass post as JSON to the Scala template I was using initially. I tried changing the template's parameter type from Post (scala object) to some Json. Naturally, the code below caused a "not found: value post"

e.g.:

<li ng-repeat="post in posts">
  @fragments.post( {{post}} )
</li>
  • use Angular directive template instead of Scala template: In the angularjs code below, using the inline template worked fine. I am also able to externalize the template to some other file, using the templateUrl option.

e.g.:

<ul>
  <li ng-repeat="post in posts">
    <div mydirective></div>
  </li>
</ul>

and the js:

mainApp.directive("mydirective", function() {
    return {
        //template: "<h1>Made by a directive: {{post.title}} !</h1>"
        templateUrl: "/assets/path_to_template"
    };
});

Even though the latter is now working, I am not even sure which approach would be better. I do really like being able to pass entire forms to the Scala template and let it bind the UI form to the controller form. This integration of AngularJs into Play Framework has been really confusing, and the Play-angular-seed did not make it any clearer to me.

What would be the best way of achieving the above?

Thanks

Khorkhe
  • 1,024
  • 1
  • 11
  • 26
  • Look here http://stackoverflow.com/questions/16155542/dynamically-displaying-template-in-ng-repeat-directive-in-angularjs – mgosk May 25 '16 at 14:56
  • I recently built a play/angular application. My approach was that all endpoints in Play routes were calls angular would make via $http. I then served static templates for any html angular needed. Any route defined in angular should serve the base angular application via play (that way you can navigate directly to any angular url). Play only served html when it was serving the whole application or plain angular templates. Data always came from explicitly $http calls and never included html (always json, in my case). – gregghz May 25 '16 at 15:42
  • @gregghz that makes sense. Additionally, I started using Angular Material (which I find looks gorgeous), and some things have not been working right with Play's Scala Templates. I suppose the best way is to slowly move away from the templates. As for sending data via $http, that seems reasonable, though for all data objects being sent, there will need to be a JSON writers so the controller can pass model functions to Json builder before returning to Angular – Khorkhe May 28 '16 at 01:03

1 Answers1

0

You may consider to fully separate AngularJS stuff from Play. In case this is your choice this is the link how to do it.

asch
  • 1,923
  • 10
  • 21