6

What would be an intelligent folder structure for grails 2.3.4 in combination with angularjs without using the grails angularjs plugin?

Currently I have packed everything into the webapp folder.

user2051347
  • 1,609
  • 4
  • 23
  • 34

2 Answers2

9

There are many ways to organize your directories, however, the way we are using, which I'm gonna call it Grailsy way and to some extent is consistent with Grails directory structure is as follow: 

web-app
  css
  js
   |  lib 
   |  ng-app
        |  controllers
           - abcController.js 
        |  directives
           - directives.js
        |  filters
           - filters.js
        |  services
           - dataServices.js
        |  views 
           - someHtml.html
        |  app.js

the lib has all the angular libraries and we also separated our angular components into different folders similar to Grails and its working well.

However, an alternative approach is to organize your directories based on your modules. This approach is presented here and seems to be promising for larger applications. Basically the directories are representing components on your single page. It will be easy to find and less moving across directories for resources related to a component. 

web-app
      css
      js
       |  lib 
       |  ng-app
            |  accounts
               - accountController.js 
               - accountServices.js
               - views 
                 - someHtml.html
            |  payments
               - paymentsController.js 
               - paymentsServices.js
               - views 
                 - someHtml.html
            |  app.js

"Advanced Design Patterns and Best Practices" is a great reference for angular best practices

Alidad
  • 5,463
  • 1
  • 24
  • 47
  • Thx for your answer! Are you putting your angularjs file into the libs folder? – user2051347 Jan 14 '14 at 19:43
  • Yes, and referred from `ApplicationResources` if Resources plugin is used. I would prefer a CDN if there is no restriction. :) – Alidad Jan 14 '14 at 19:48
  • Thx for your answer! btw are you also putting your `index.html` file into the views folder or are putting it in the root dictionary? – user2051347 Jan 14 '14 at 20:24
  • 1
    I updated my answer, we have multiple pages in angular,so there is no single entry page in angular side. But we have a Grails view as entry point `index.gsp` that will introduces angular to Grails, from that point angular routers will direct the calls to proper angular views. – Alidad Jan 14 '14 at 20:36
  • Btw were are you actually putting your models? – user2051347 Feb 01 '14 at 16:09
0

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

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

Jagadeesh
  • 570
  • 3
  • 11