Thursday, July 5, 2012

Grails + AngularJS + CoffeeScript

Intro

Responsive design is a must for modern web-applications. Today this is attempted to achieve by using JavaScript MVC frameworks. But more often than not those frameworks originate from Rails, NodeJS and other non-Java communities. This makes it hard for Java-boys (as me) to jump into. So purpose of this short tutorial is to explain in few easy steps how to start with JS MVC framework and CoffeeScript on Grails.
.
In this certain case AngularJS is my personal choice taken up after playing around with few other libraries but principles described below should work for other frameworks.

Our intention will be to write one-page application having single input field and what's typed there is immediately reflected below in span tag.

I'm assuming readers could be unfamiliar with AngularJS, but, still, the application is really simple and should be easy to read.

Implementation
  1. First let's create Grails application
    grails create-app testApp

  2. After application is created let's change folder and all subsequent commands should be executed there.
    cd testApp

  3. Grails already has plugin that support on-the fly conversion of your CoffeeScript files into JavaScript. To install it type following
    grails install-plugin coffeescript-resources
  4. After plugin installed we are going to create empty file for our CoffeeScript sources at web-app/cs/angularIndex.coffee
  5. What's great about Grails - is the fact that it abounds with plugins. AngularJS library can be installed by typing
  6. grails install-plugin angularjs-resources
  7. Thanks to great resources plugin JavaScript files management is quite easy in Grails. Let's create file grails-app/conf/MyResources.groovy with following content
    modules = {
        angularIndex {
            dependsOn 'angular'
            resource url: 'cs/angularIndex.coffee'
        }
    }
    
    Code above declares resource for our AngularJS module written in CoffeeScript.
  8. Next we need controller to serve starting point HTML with AngularJS module. We can do it with following command
    grails create-controller AngularIndex
  9. Also we need manually create Grails view for index action of our controller. For this we have to create new file grails-app/views/angularIndex/index.gsp with following content
    <!DOCTYPE html>
    <html>
    <head>
        <r:require modules="angularIndex"/>
        <r:layoutResources/>
    </head>
    <body ng-app="MyApp">
    <div ng-controller="MyCtrl">
        What typed reflected below<br>
        <input type="text" ng-model="myText"/><br>
        <span><b>{{myText}}</b></span>
    </div>
    </body>
    <r:layoutResources/>
    </html>
    
  10. Last step is to create AngularJS module in CoffeeScript. For this we have to fill web-app/cs/angularIndex.coffee created before with following content
    app = angular.module "MyApp", []
    app.controller "MyCtrl", ($scope) ->
      $scope.myText = "INITIAL"
    
  11. Let's run application
    grails run-app

P.S.

Please notice that setup described above shouldn't be considered for production usage. You probably need minification, zipping resources, etc - but then again it can be good starting point for research, prototyping and similar activities towards developing modern front-ends.

Links

AngularJS - http://angularjs.org/
CoffeeScript - http://coffeescript.org/
Grails - http://grails.org/

4 comments:

  1. fantastic post and Thanks for sharing this info. It's very helpful.
    web agency brussels

    ReplyDelete
  2. Hi Evgeny,

    Nice blog! Is there an email address I can contact you in private?

    ReplyDelete
    Replies
    1. Hello
      My email is - eshepelyuk at gmail dot com

      Delete
  3. This was very helpful, thanks much.

    ReplyDelete