Grails application with AngularJS: Setup – Part 1

There are several posts about setting up AngularJS, but a few specific to Grails environment. If you have been a Grails developer and want to explore using AngularJS framework for front-end, here is step by step guide to get started. Grails and AngularJS are both full-fledged mvc frameworks on their own. Using the positives from both can be a killer comination to build fast and modern dynamic web applications.

Notes:

  • Instructions are for Windows OS
  • Directories only for reference
  • All versions as of writing this article. Substitute with newer versions as appropriate.
  • Pre-installed: JDK 1.7.0_51: C:\Programs\Java\jdk_1.7.0_51
  • Pre-installed: Grails 2.3.6: C:\Programs\Grails\grails-2.3.6

This setup does not use the angularjs-resources Grails plugin. It replaces the resources plugin entirely with asset-pipeline plugin and uses npm/bower to manage javascript dependencies directly. AngularJS does work with grails resources plugin too, but I feel it becomes difficult to maintain when adding more angular modules.

Step: Install pre-req software

Install Node.js -> http://nodejs.org/ to C:\Programs\nodejs
Install Git -> http://git-scm.com/downloads

Ensure PATH contains: c:\programs\nodejs; c:\programs\git\cmd

Open new command prompt (new, because your PATH would have been modified)

npm install -g npm
npm install -g bower

Step: Create new Grails app

cmd> cd c:\projects
cmd> grails create-app angrails
#All commands executed from the following directory, unless specified
cmd> cd angrails

Step: Switch from resources plugin to using asset-pipeline plugin

AngularJS will work with resources plugin too, but when you start installing many javascript components, the ApplicationResources can become clumsy. Asset pipeline is the new Grails plugin (based on Rails asset pipeline) that makes it easier to manage static resources, javascript, sass/less etc.

Edit BuildConfig.groovy

delete: resources, zipped-resources, cached-resources, yui-minify-resources lines

add: compile “:asset-pipeline:1.6.1”

cmd> grails refresh-dependencies

That will create grails-app/assets/* sub-directories

cmd> move web-app\css\* grails-app\assets\stylesheets
cmd> move web-app\js\* grails-app\assets\javascripts
cmd> move web-app\images\* grails-app\assets\images
cmd> move web-app\images\skin grails-app\assets\images
cmd> rmdir web-app\css web-app\js web-app\images

Step: Fix main.gsp to use asset-pipeline

Edit main.gsp

Comment/Delete following lines:

<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
<g:javascript library="application"/>
<r:layoutResources/> (2 places)

Add the following lines above <g:layoutHead/>

<asset:javascript src="application.js"/>
<asset:stylesheet href="main.css"/>
<asset:link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

Any other ${resources} images, replace with <asset:image src=”– filename –“/>

Delete ApplicationResources.groovy

Step: Add jQuery dependency

cmd> cd c:/projects/angrails/grails-app/assets
cmd> bower install jquery
cmd> bower install angular

That will create bower_components directory and the js libraries (inside grails-app/assets/bower_components)

Step: Add Javascript dependencies

Edit grails-app/assets/javascripts/application.js

Replace the content with:

//= require jquery/dist/jquery
//= require angular/angular
//= require_tree views
//= require_self
console.log("angrails manifest load complete.");

Note that when using //=require you do not specify the bower_components directory. Asset-pipeline plugin skips the first directory after grails-app/assets.

cmd> grails run-app
Goto http://localhost:8080/angrails

End of Part 1: We have installed AngularJS and asset-pipeline for a Grails app.

In Part 2, we shall install Karma Test Runner for testing AngularJS javascripts.

Advertisements

3 Responses to Grails application with AngularJS: Setup – Part 1

  1. Does this require uninstalling the jQuery plugin ? It looks a bit redundant to have to install it through bower in the assets directory…

    Like

  2. vasya10 says:

    @Phillippe, You dont have to uninstall jquery. AngularJS will use the jQuery you supply OR (if you dont provide one) use an internal jquery it comes with. I’ve included here just to show you can pick the jquery version you want.

    Like

  3. tanghaol1987 says:

    When I first trying to start using angularJS with NodeJS, I found the configuration is really complex. And when I think back to use Grails as my backend server. it’s really pretty easy, not I confused how to manage my front end packages in grails.
    And finally I get my answer here..
    Thanks for your post, I am really glad to see you log down that bower can work with grails together.

    Liked by 1 person

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: