Ok. I realize this has probably been done to death and I've seen several
threads regarding naming conventions. But personally, I'm not satisfied
with what I've seen so far.
Directives are easy and have been discussed. Obviously, don't prefix with
'ng' and camelCaseTheName. Got it.
Don't prefix anything else with $, because it might conflict with Angular
core. Got it (although there seem to be an awful lot of folks who missed
the memo on that one - angulartics, ui-bootstrap and many others expose
injectables starting with $).
But that's as far as any specific rules go that I'm aware of. In my apps, I
use a single-responsibility-file format (one component per file) and
feature-based directory organization. Components are grouped by their usage
in a feature, not by component type; common code across features gets its
own directory (e.g. Resources/), but for the most part, injectables,
directives, controllers and templates live together. From a readability
point of view, it's important to be able to immediately distinguish what
kind of file you're looking at while browsing your codebase. For that
reason, there **must** be different naming conventions for the different
types of components.
As I said, directives are clear already. The filename matches the directive
name, which is camelCase, and everything else uses TitleCase. But between
Controllers and injectables, the distinction is not clear. I'm not really
happy with suffixing literally everything with either Controller or
Service. It's cumbersome and repetitive. Frankly I just think it's ugly. I
also (this is just personal mind you) don't really like to use
abbreviations in my code. Svc and Ctrl are not ideal to me.
Furthermore, suffixing all your injectables with Service is misleading. Not
every injectable is a service; they could also be implemented as Factory,
Constant, Value or Provider as well. And, on top of that, *do I really
care?* What difference does it make how an injectable is implemented? In
the end, they all provide API that can be injected into a controller. I
don't care how the API gets there, just that it does. I don't want to have
to suffix everything with Factory or Constant or Value either.
So, with all this in mind, I have invented the following naming convention,
and I want to get public opinion about whether or not it is kosher.
Directives:
camelCase, e.g. touchDefault.js
Controllers:
TitleCase, e.g. History.js, OrderLookup.js
Templates:
TitleCase, e.g. History.html, OrderLookup.html
Injectables:
TitleCase$, e.g. Navigation$.js
**gasp!* *you say! A dollar sign?
But wait. Why not? Angular uses $ as a prefix to identify injectables. It's
easy to understand because anything that is injectable, regardless of
implementation, is prefixed with $. We can't use it as a prefix to avoid
name collision. But why not use it as a suffix?
It actually reads nicely; consider:
OrderLookup.js
angular
.module('App')
.controller('OrderLookup', OrderLookup);
function OrderLookup($scope, $location, $modal, Lookup$, History$,
Navigation$) {
Because I already follow the convention of injecting core modules first,
then third-party modules, then app-specific modules, this reads
beautifully. First of all, all of my modules are TitleCase. Secondly, $ as
a suffix is very distinct from $ as a prefix. And, when reading it, you
almost get the feeling that $ is short for Service. It could be. It is, in
a way.
So, what does the Angular community think? Am I setting foot where no
mortal should trod? Or is there merit to this suggestion? I am considering
proposing a refactor to our codebase to follow this convention, and I want
to get some backing from the community before I stick my neck out. If
someone can produce a really good reason not to do this, I'll just give up
the idea and stick to suffixing everything with Service and Controller.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
