How to integrate angular js into grails 2.3.4?

Question

I am running on grails 2.3.4 and though about integrating angularjs in my next application.

I think the best way from the server side is to use grails REST integration in the domain and controller classes.

However here I am stuck.

How to get grails to communicate with angularjs?(over the index.gsp?, If so how to integrate it?) What would be a good architecture?

I really appreciate your answers!!!

PS.: I know that there is a grails angular js plugin. However I do see any reason for using that!

Goldberg

Answer 1

We chose to not to use angular-js resources plugin, but instead use on our own. Just for more flexibility on when and what to update etc.

Just put the angularjs files inside /js/lib folder. Create a resource bundle file. (we have grails-app/conf/AngularResources.groovy file) and declare your angular js resource bundles there as shown below. We declared all our angular resources, like, controllers/services/apps/directives inside AngularResources.groovy

modules = {
'angular' {
    resource url:"js/lib/angular/angular.min.js", nominify:true
    resource url:"js/lib/angular/angular-resource.min.js", nominify:true        
   }
 }

Require the module on the screen where you want to use it.

Kautz

Thx for your answer! Do you only have 1 index.gsp file or multiple or do you run html files. Please show the structure of your index.gsp file! How are your views of angularjs loaded? – Goldberg

We have a single gsp page which loads the app. On that gsp page, we require all the resource bundles required, for example, angular, angular resources, angular cookie, ng-app, ng-controller/services etc. The directory structure of our ng-app is almost similar to this one #21122327 – Kautz

Have a look at this demo app. github.com/mannejkumar/GrailsAngularDemoApp – Zymolysis

Answer 2

We have two projects as two separate worlds. The first project, the server side, is in grails. We are creating 'restful' services. This project knows nothing about angular or resource plugin or asset pipeline; not even uses gsp views, only json responses. In future we can to use that 'api' to build mobile clients or to exchange information with another service, etc.

The other side, the client, knows nothing about grails. It's all statics pages with html 5, javascript and angularjs framework.

I believe that 'it' is the paradigm that everybody will begin to adopt from now.

Forfar

Agree completely. However, when you already have a considerable grails app and you want to start off with a hybrid option, Clay McCoy's blog entry describing how he injects GSP params into the angular $scope using ng-init is worth a read. – Quadriceps

Answer 3

I prefer to use Asset Pipeline

First, install the plugin:

http://grails.org/plugin/asset-pipeline

After this, move your javascripts from web-app/js/* to grails-app/assets/javascripts/*. You have to do this with stylesheets and images too.

Install and configure nodejs + npm to manage libraries through bower plugin

sudo apt-get install nodejs
sudo apt-get install npm
npm i -g bower

Navigate to grails-app/assets and install angularjs

cd grails-app/assets
bower install angular --save

In your application.js inside javascripts folder, add these lines in line 1:

//= require angular/angular.js
//= require_tree views
//= require_self

Finally, add this line in your GSPs:

<asset:javascript src="application.js"/>

Illustrational

Answer 4

Grails already has a plugin for angular

http://grails.org/plugin/angularjs-resources

Install this and follow instrcutions

One more very good example of grails and angular

https://github.com/hantsy/angularjs-grails-sample/

Oxidase

Is this example working? Seems after populating all fields to add a book, the dialog won't dismiss after I click submit. And log in doesn't work either using bootstrap user name and password. – Congratulate

Answer 5

I have done demo application using grails and angularjs. User login, signup, creating editing deleting contacts. I created this front end using angularjs similar structure to grails mvc pattern. Contact Module

1. Grails  -> URLMappings,
   Angular -> Routing (app.js)
2. Grails  -> ContactController(Actions:create,list,edit,delete,details) 
   Angular -> ContactController(Actions: create,list,edit,delete,details)
3. Grails  -> ContactService(Methods: create,save,edit,delete,details) 
   Angular -> ContactService(Functions: create,save,edit,delete,details)
4. Views   -> All views are created using Angularjs (Create, Details)

I went through lot of tutorials and did this app to match with Grails MVC Pattern so any one can understand this angular demo app if they are having little knowledge on Grails

Demo : http://jagadeesh-manne.rhcloud.com/

Source : http://mannejkumar.github.io/GrailsAngularDemoApp/

Zymolysis