back to listing index

AngularJS project structure | Hacker News

[web search]
Original source (
Tags: angularjs
Clipped on: 2016-04-11

Image (Asset 1/2) alt= Hacker News new | threads | comments | apply | show | ask | jobs | submit jaytaylor (1842) | logout
AngularJS project structure (
41 points by gurgus 3 hours ago | flag | past | web | 13 comments

Image (Asset 2/2) alt=

As far as I know this is a solved problem. I used this guide when starting out with angular. Helped a lot to start and keep everything organized.

>Enter problem two. What happens when my project has heaps of controllers/services etc… I now have directories that could have a lot of files and none of them are particularly easy to find.

My team uses Angular 1.4.7 for a very large project (hundreds of JS files, dozens of views/controllers/services). We have in our JS folder a services folder, controllers, directives, etc. No subfolders except in our directives folder which has some directives which are only applicable to a specific area of the application. Services by convention are just the name of the topic at hand, no "service" suffix (i.e. alert.js, user.js). We have had no issues as far as file navigation goes. I grant that convenience to our development environment. We run a primarily .NET stack and leverage Visual Studio 2015 so the "CTRL + comma" keyboard shortcut makes it very easy to work with these relatively large folders. My main point being I think the development environment plays a very large role in whether structure A or structure B will be more optimal for your team. If a CLI were going to be our means of navigation, this structure would be much more challenging to work with and I don't have a good suggestion for that circumstance.

CTRL + what?

What user crabl said. Edited for clarity.

CTRL + comma

"AngularJS for the front end allows someone who sucks at front end work to be able to produce some pretty useful interfaces". That's actually a nice way to explain its success, for better and for worst. Spot on, IMO.

Both in our Angular and React codebases, we group things by functionality. Ideally, we should be able to take a folder (and its subfolders) and make them a separate npm-package. In the past, we have actually done so successfully, and can share and reuse these modules through our internal npm (Nexus).

Isn't it redundant to prefix have a file in the foo directory called foo.controller.js ?

I sense a weakness in someone's editor/IDE. Personally I'd call it controller.js and expect my tools to not make that problemmatic

What would you name the controller in the code in that case? It's annoying to have mismatch between a file's content and the name, and having all controllers in the app be named "controller" makes debugging hard.

Sure, but it feels natural to me. File is foo.controller.js and is named FooController within.




would all be in different folders, one for controllers, one for services one for directives etc. if you have multiple tabs open in your ide like Webstorm you'd only see foo.js three times over, if you did not prefix it, and be hard pressed to know which is which at first glance.

With that said Angular 1 is dead long live Angular 2 :)

No, the point is to not have separate folders for controllers, directives etc.

Yes, you should have separate folders for controllers directives etc, when you are grouping by features, under the feature. Otherwise good luck telling where everything is, when you have something beyond a trivial app...

I'm not suggesting putting all components in component folder and all services in services folder.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact