Intelligent folder structure for grails 2.3.4 in combination with angular js

Question

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.

Answer 1

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