Intelligent folder structure for grails 2.3.4 in combination with angular js

问题

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.

回答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

回答2:

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/

来源：https://stackoverflow.com/questions/21121827/intelligent-folder-structure-for-grails-2-3-4-in-combination-with-angular-js