user2051347
user2051347

Reputation: 1669

How to integrate angular js into grails 2.3.4?

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!

Upvotes: 8

Views: 8471

Answers (5)

Jagadeesh
Jagadeesh

Reputation: 570

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/

Upvotes: 0

ricardogobbo
ricardogobbo

Reputation: 1740

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"/>

Upvotes: 7

AA.
AA.

Reputation: 4606

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.

Upvotes: 12

Sudhir N
Sudhir N

Reputation: 4096

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.

Upvotes: 7

Srisudhir T
Srisudhir T

Reputation: 715

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/

Upvotes: 0

Related Questions