Friday, May 13, 2016

Integrating Play and AngularJs detached projects

Play and Angularjs are two frameworks for development of Web applications. The play-angular-seed template of the Typesafe activator suggests the incorporation of the Angularjs in Play.

There is another approach, suggesting to make development with the Angularjs outside the Play and integrate the both parts only in run-time.

According to this approach a Play server handles REST requests while Angularjs client implements the UI stuff.
The solution is based on the way in which Play servers static files, which is explained in this post.

Development


A client and a server are developed in separate projects and even may be hold in different source repositories. The practical impact of such decoupling is, that a client and a server may be developed by different teams, each team with particular proficiency.

The client should have some entry point HTML page, which will be the default entry point to the UI. It is a good practice to create for this index.html.

For client-server code integration the following should be done on the server side:

1. Select a sub-folder under the server application root, which will serve as the "home" for the client files.
The default solution is to use the public folder of the server, since all files under it are automatically deployed. Put all the client files under the public folder.
The entry point index.html may reside in whatever location under the public. In the example below it is located right in the public.

After adding the files the public folder will look something like this :



2. Update the routes file.
Add routing to the default URL: it should be routed to the static file index.html instead of a controller method:
 GET /myAppUrl controllers.Assets.at(path="/public", file ="index.html")  
Add routing to the rest of client files:
 GET /*file controllers.Assets.at(path="/public", file)  
3. Build the distribution package with activator dist or maven install.

Synchronizing client files


In case a client and a server sources are in the same repository, the client project should be configured in such a way, that its assets reside under the public folder of the server.

If a client sources are in a separate source repository, files under the public folder of the server should be synchronized with the client sources. It should be done by some automatic tool (for example Jenkins job) upon building the distribution package.

3 comments :

Steve Hawks said...

Thanks for sharing this webpage. It is useful.Keep sharing more like this.
Regards,
Angularjs Training | Angularjs Training Chennai | Angularjs course in Chennai

jahan murugassan said...

You explained a nice topic in this blog.Thanks for sharing a this kind of post.Iam really happy to read this blog.This help me to update their knowledge.Thanks for sharing.keep sharing more blogs.


Angularjs Online Training

Ala Schneider said...

Happy this is helpfull

About the author

My Photo
I trust only simple code and believe that code should be handsome. This is not a matter of technology, but professional approach, consolidated after years of software development. I enjoy to cause things working and feel very happy, when I manage to solve a problem.
Back to Top