Folder Structure and File Naming Conventions

[shairez]

Hi Guys,
I tried to find common conventions and best practices on how to structure large scale applications but couldn't find any that made sense for me.

We all believe it's very important to stay consistent when working in a team, and I think we should strive towards having a unite angular file naming conventions and even a common folder structure to save time.

In Java and in Flex it was very clear how to structure and name your folders / files, but in Javascript for some reason it is still the wild west.

So I'm raising this issue to see if anyone think the same and to get way more experienced devs involved and sharing their thoughts so we can try and create a naming convention that will hopefully find its way to the WIKI for newcomers to see.

I divided it to several topics:

Multi Word Separation:

1. Dashed: my-folder or my-file
2. camelCased: myFolder or myFile
3. underlined: my_folder or my_file

From what I see, the common use is the dashed one: my-file.

File Suffix:

Because I think it's a good practice to separate each controller / service / module into its own file I think having a suffix is important and I saw in other projects several options for this also:

1. userController.js
2. userCtrl.js
3. user.ctrl.js

I favor #3, as we can suffix any file by it's type and it seems clearer:
Controller - .ctrl.js
Service - .srv.js
Module - .mdl.js
etc...

One use case it can help is when you when you need to concatenate files in a specific order and you want the modules to be first in the concatenation. so you can do something like: [".mdl.js", ".js"]

Folder structure

In large scale applications, we usually divide things into modules, but looking at some example projects like angular-app or angular-sprout, I got confused and it was hard to see which one can survive the test of time and thousands of files. I personally don't know what is the best way, but it seems that things are usually divided into two categories: "Common" and "Core". core meaning the application specific files, and common are reusable components between modules.

I can create a new "Seed" project we can debate over if it's something that other find useful.

So... what do you think?

[bjconlan]

couldn't find any that made sense for me.™

It is nice to have some formalization, but this is best dictated by some organizational or even project standard. Not an angular team endorsement (although I'm sure they do have such standards for the angular project)

I've always found things like this tend to become 'stone tablets from on high' and cause friction between those who do and those who don't follow such a conventions. It might be best suited to a blog entry of experiences instead.

I've found the defaults created by the yeoman generator intuitive but do like your suggestions and I think I'll apply some to my current project.

... now where to put my dialog partials. ;)

[shairez]

Thanks for the comment Benjamin, I do agree it suppose to be a "standard committee" job to decide on these things, but I have the feeling that they'll come to that somewhere on 2052...
So that's why I rather start with something small, I'm not trying to decide the js naming standards, just file and folder naming and structure for large scale angular apps.
I know that the Angular community is a smart and strong one, saw it with the amazing ui-router job the angular-ui folks did, so just wanted to raise this issue to see what others are thinking.

[mikehaas763]

Just stumbled upon this. I also just started https://github.com/mikehaas763/angular-conventions

We need to get some conventions going on for file structure. Care to start engaging? I think my repository is a good place to begin and as it starts getting some more traction we can move it to a more "official" committee of some sort.

[petebacondarwin]

This is not the repository you are looking for...

Try: https://github.com/angular/angular-component-spec

[mikehaas763]

@petebacondarwin If you're following angular-component-spec please see the issue I've posted there if you care to provide any input.

[dandv]

@petebacondarwin: I don't see any discussion on filenaming conventions in the component-spec repo?

[dandv]

https://github.com/mgechev/angularjs-style-guide seems a better resource.

[johnhunt]

Whilst a fair few people moan about naming conventions etc, they're invaluable.. look at what PSR did for PHP.. totally modernised the language and allowed tools like composer to exist.