How to use with playframework

[svenwiegand]

At first: Thanks for your efforts in this project.

I've setup a playframework-scala-js project as shown in vmunier/play-with-scalajs-example. angulate2 works fine as long as I manually copy the generated xxx-sjsx.js file to the server's resource directory. But I cannot find a way to provide it automatically whenever it is generated. Any ideas?

BTW: In the README.md for angulate2 below the first code example you write:

Important: Don't forget to load the file target/scala-2.11/annotations.js after the JS files generated by Scala.js!

It took me some time to figure out, that the needed file isn't called annotations.js but sjsx.js.

[AugustNagro]

I've been checking out this project over the last few days, and found that a solution is to link the file to Play's asset directory, by including

unmanagedResources in Assets += baseDirectory.value / "client/target/scala-2.11/client-sjsx.js"

in the sbt settings declaration for the Play project. Then you can reference it how you would any other asset, like

<script src='@routes.Assets.versioned("client-sjsx.js")'></client>

in your main.scala.html file.

[jokade]

Sorry for the late response - I've recently moved, started a new job, and I'm still without fast internet access... :( Anyway, due to some fundamental changes in Angular2 introduced with the switch to RC0 and a new backend for generation of the annotations file, I'm currently refactoring angulate2; hence the README is outdated. The Angulate2 API + sbt plugin will possibly see major changes over the next few weeks.

I don't use the play framework myself, but I would be happy to include a link to a seed project or howto documentation for angulate2 + play.

[gregghz]

I'm currently working on a skeleton of angulate2 and play2.5. what kind of refactoring are you looking at and what's the timeline? I'm presenting in this at a local conference and so I'd like to stay as up to date as possible :)

[svenwiegand]

@AugustNagro: Thanks for the pragmatic tip. For me it partly works with a slight modification:

unmanagedResources in Assets += baseDirectory.value / "../client/target/scala-2.11/client-sjsx.js"

Partly, because changes to the client-sjsx.js may not be updated immediately after they changed. E.g. if I rename a component class, the original client-sjsx.js is updated if I reload the page in the browser, but the related resource in web/public/main of the server is only updated the next time something in the scala-js code changes.

@gregghz: Any tip how to reliably publish the client-sjsx.js from the client project as an asset in the server project?

[gregghz]

@svenwiegand nothing yet. I'm just barely getting it set up. I know with https://github.com/greencatsoft/scalajs-angular it worked fine and I didn't have to set anything up. I could just use @routes.Assets.versioned no problem. But that one doesn't use an sbt plugin like Angulate2. I'll keep digging for a bit though.

[gregghz]

Does anyone know what's copying *-fastopt.js to web/public/main?

[gregghz]

@svenwiegand I think I've solved your problem. In addition to the unmanagedResources setting, if I also add:

compile in Compile <<= (compile in Compile) dependsOn (fastOptJS in (client, Compile))

changes in angular components seem to re-trigger the generation of client-sjsx.js. Try it out and let me know if it works for you. I Haven't tested it a ton yet.

Here's a gist of my full build.sbt (I plan on publishing the full project as a play + angulate2 sample eventually): https://gist.github.com/gregghz/0086cd6b82eb2680a41b356e07b296ca

[AugustNagro]

@svenwiegand I was using sbt-play-scalajs in my demo project to run fastOptJS in dev mode, and fullOptJS when in Prod mode. The author has also provided play-scalajs-scripts, which select the correct JS file depending on the environment (Note: I used @playscalajs.html.selectScript(), not @playscalajs.html.scripts() which is detailed in the documentation).

Ideally (when this project is stable), someone will make a sbt-play-angulate2 plugin that simplifies the build process. Possibly an activator template as well.

Once I set up the build, I tried creating a simple app that uses an @RouteConfig for navigation, and reads + displays a JSON array of "todos" from the server. I followed both the "router" and "angelolite" example projects. I noticed quite a few problems with both the generated SJSX and fastOptJS file. I corrected the errors manually and was able to get it somewhat functional.

@jokade, I'd recommend putting a simple "out of date" message on the main and example repo's readme files. Once you've refactored to your satisfaction, I'd be happy to contribute some ScalaJS facades and/or make some example projects. And good luck finding internet 😎

[svenwiegand]

@gregghz Your task dependency seems to do the trick. Thanks for sharing!

[gregghz]

@svenwiegand I've publish an example working with the latest angular2 release: https://github.com/gregghz/angulate2-play-example

Right now it depends on a fork of angulate2 but I hope to get my changes cleaned up and organized and merged upstream eventually.

This also uses compile time DI in play instead of the runtime Guice based DI play typically favors. It shouldn't matter too much inside play, you can switch to a more standard play project no problem I think.

[svenwiegand]

@gregghz Thanks a lot. Looks great.

As Angular 2 is currently still in very early and bad documented stage I'm currently evaluating vue.js which is powerful, very straightforward and well documented...

[gregghz]

FWIW

these three PRs: https://github.com/jokade/angulate2/pull/28, https://github.com/jokade/angulate2/pull/27, https://github.com/jokade/angulate2/pull/26 should get angulate2 up to date enough to support all of the angular tutorial app except the Http stuff in the last section (although that could be done using js.Dynamic now).

[ShahBinoy]

@gregghz I cloned from your project but its not working, I have logged an issue here https://github.com/gregghz/angulate2-play-example/issues/1