Today, we’re excited to share a guest post by our customers at Visier, who provide end-to-end, cloud-based applications designed for HR professionals to answer critical workforce strategy questions. Visier is changing how enterprises approach analytics by delivering pre-built tools that combine the sophistication of predictive capabilities with the ease-of-use of consumer applications. I’m happy to say they are enthusiastic users of Typesafe technologies :)
In this post, Vincent Chu, Development Manager, shares how his team created a seed project that allows people to easily start using Angular 2 / Typescript with the Play Framework so that developers can quickly get started with new projects.
My team and I recently put together a small standalone project to demonstrate how Angular 2, TypeScript and the Play Framework can all come together to create an application. We ran into a few challenges in the beginning to integrate all the pieces, but once that was done, we were able to write complex web applications quickly. This blog post aims to highlight a few of the issues we encountered, and provides a sample project to help others who are also interested in this stack of technology to get started.
With the recent release of Angular 2’s beta and as more and more developers start working with it, we want to share our Angular 2 experience with the community, so here it is!
We started with a basic Scala template of the Play Framework. You can do this by running ‘activator new’ in your console. Additionally, you will need to have Node installed on your machine as it is used to grab Angular 2 and its dependencies. We decided to go with the sbt-typescript plugin1 by BrandonArp. This was a simple process of adding a single line to the plugins.sbt file.
addSbtPlugin("com.arpnetworking" % "sbt-typescript" % "0.1.10.2-Visier")
With the plugin in place, you can run and compile TypeScript files. The type checking and improved IntelliSense in our TypeScript files were welcome. For the next step, we tried loading up Angular 2 with RequireJs, but we ran into issues with a naming conflict, as the Angular 2 library contained its own require function. Eventually, we decided to load Angular 2 with SystemJS, which did not require any additional plugins.
We grabbed the latest Angular 2 version and its dependencies at the time and added them to our library path. We use the ‘Tour of Heroes’ example2 on the official Angular 2 webpage in our standalone application. You can use the standalone project to get started on your Angular 2/Play projects, the ‘Heroes’ is merely an example of a simple way to demonstrate the integration of Angular 2 and the Play framework.
We’re so grateful to Vincent and team for taking the time to share their experience with this project. You can check it out here: https://github.com/vchu-vr/angular2_play