Hacker News Reader

Comment by troybetz | Hacker News Reader

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-Awi1EZXAXS4PzDz...

View on HN

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.

Why doesn't the widget go in its own folder?

or in their own module, pulled into the project with bower

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?

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

I use this Yeoman generator that uses a very good structure like recommended above https://github.com/cgross/generator-cg-angular

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.

Packaging up the templates? (e.g. https://www.npmjs.org/package/grunt-angular-templates)

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

Reply on news.ycombinator.com