3 ms·

Grouping files by feature has made navigating and reasoning about a codebase so much easier. I've even found myself grouping stylesheets & test files alongside

Grouping files by feature has made navigating and reasoning about a codebase so much easier. I've even found myself grouping stylesheets & test files alongside templates and app code, it really helps enforce the idea of composing smaller apps together. Google has released a recommended app structure similar to this as well [0], though I haven't actually seen it being used too often in the projects I've come across. [0] - https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/ https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDz...

maaaats 12y ago
I understand the grouping of the JS files by feature. But I have a hard time including the partials/HTMLs with that. Because when building (concat, minify etc) the project, they will then need to be copied around and all template-references updated. It's easier instead to just dump all of them into one place and copy that folder, no need to update references etc. then. Any ideas on how to solve this?
- nuclearghost 12y ago
  Yeah I think that's a fair point. It's easy enough to write a grunt or gulp task that does the copy. Not too hard to copy all the *.html files from the app directory. The time savings for development are worth it to me
- troybetz 12y ago
  I use browserify and the brfs transform [0], but I know a lot of folks don't like mixing up other module systems with angular. Your approach is probably the easiest tbh. There might be some way to load them into $templateCache on build, but that would kill lazy loading [0] - https://github.com/substack/brfs https://github.com/substack/brfs
- dougcorrea 12y ago
  I use this Yeoman generator that uses a very good structure like recommended above https://github.com/cgross/generator-cg-angular https://github.com/cgross/generator-cg-angular
  - jzig 12y ago
    We're using the same generator for a large government app. "Widget" partials are stashed in their respective folders under /widget while /services, /directives, and so on are contained in the root folder. HTML/CSS/JS stored in each folder. It's all super organized and modular IMO. Of course it helps to be working with the creator of said generator.
- pyre 12y ago
  Packaging up the templates? (e.g. https://www.npmjs.org/package/grunt-angular-templates https://www.npmjs.org/package/grunt-angular-templates)
lolatu54 12y ago
It doesn't necessarily make sense when you have a team working on different things, front-end devs working on the templates and back-end devs working on services, etc. Furthermore most likely you will be sharing many partial templates or widgets between different views and sections in your app. So those have to go in some sort of common views folder, losing much of your grouping. I wouldn't say either way is right or wrong, it just depends on your workflow, size of the app and size of the team working on it.
- buckbova 12y ago
  Why doesn't the widget go in its own folder?
  - thisGuysAccount 12y ago
    or in their own module, pulled into the project with bower

maaaats 12y ago

I understand the grouping of the JS files by feature. But I have a hard time including the partials/HTMLs with that. Because when building (concat, minify etc) the project, they will then need to be copied around and all template-references updated. It's easier instead to just dump all of them into one place and copy that folder, no need to update references etc. then. Any ideas on how to solve this?

nuclearghost 12y ago
Yeah I think that's a fair point. It's easy enough to write a grunt or gulp task that does the copy. Not too hard to copy all the *.html files from the app directory. The time savings for development are worth it to me
troybetz 12y ago
I use browserify and the brfs transform [0], but I know a lot of folks don't like mixing up other module systems with angular. Your approach is probably the easiest tbh. There might be some way to load them into $templateCache on build, but that would kill lazy loading [0] - https://github.com/substack/brfs https://github.com/substack/brfs
dougcorrea 12y ago
I use this Yeoman generator that uses a very good structure like recommended above https://github.com/cgross/generator-cg-angular https://github.com/cgross/generator-cg-angular
- jzig 12y ago
  We're using the same generator for a large government app. "Widget" partials are stashed in their respective folders under /widget while /services, /directives, and so on are contained in the root folder. HTML/CSS/JS stored in each folder. It's all super organized and modular IMO. Of course it helps to be working with the creator of said generator.
pyre 12y ago
Packaging up the templates? (e.g. https://www.npmjs.org/package/grunt-angular-templates https://www.npmjs.org/package/grunt-angular-templates)

lolatu54 12y ago

It doesn't necessarily make sense when you have a team working on different things, front-end devs working on the templates and back-end devs working on services, etc. Furthermore most likely you will be sharing many partial templates or widgets between different views and sections in your app. So those have to go in some sort of common views folder, losing much of your grouping. I wouldn't say either way is right or wrong, it just depends on your workflow, size of the app and size of the team working on it.

buckbova 12y ago
Why doesn't the widget go in its own folder?
- thisGuysAccount 12y ago
  or in their own module, pulled into the project with bower