AngularJS: Controllers / Services should be Pascal Case? (using Yo in yeoman)

Question

I have started using Yo (yeoman) to scaffold my controllers, services etc for angularjs.

I normally do a

  yo angular:service passwordService

I am using camel case as this is the name of the file it creates but I have noticed it also uses the same name for the name of the service so

passwordService

rather than

PasswordService

What are the best practices here?

Thanks

Answer 1

It's worth noting that in the Developer Guide in many places (including the linked-to "services" section), the AngularJS devs use camelcase + first lowercase for names of services and other things. So maybe you would consider that a best practice for AngularJS.

That said, I think from other languages it is more common to name services and classes with camelcase + first uppercase and actually as it turns out in JavaScript this seems to be of especial importance. Consider that you have a class named user—then what would you call a variable that contains an instance of user? You couldn't call it user without extremely awkward/error-prone shadowing.

In AngularJS, your $resource services will end up becoming your classes in OO JavaScript "of old." Look:

angular.module('Foo', [], function() {}).factory('User', function() {
  var User = $resource('/api/user');

  User.prototype.getFullName = function() {
    return this.firstName + ' ' + this.lastName;
  };

  return User;
});

See where I'm going with this? You will eventually inject your new User $resource and instantiate it:

function MyController($scope, User) {
  var someNewUser = new User();
};

Or you will want to iterate over several users using a simple var name like user for the current item:

angular.forEach(someUsers, function(user) {
  // Good thing you didn't name your $resource "user"!
  // Weird/undesirable shadowing would result here then...
});

Let me know if you need more clarification as to why I believe best practice is first uppercase for class/service names given the context of JavaScript. (For contrast, consider that in PHP var names are prefixed with $, therefore shadowing can't happen between var names and class names. $User = new User() is perfectly fine.)

Of course, you could do User = new user() in JS but that would be just about opposite the standards of existing languages/style guides.

Answer 2

For Javascript conventions, you should only use PascalCase if and only if the related function is a constructor function. (i.e. must be called with new). It is important becase it lets the programmers to know that one has to use new, otherwise this property will be messed up.

For factories and providers etc, you should actually use camelCase convention.

Update

While my initial claim holds still in JS environment outside of Angular, I now think it is better to use PascalCase for injected variables. This has been the convention for a long time and it's not worth fighting back. Since injected variables are almost always singletons and are application wide, it feels right to differ them from the local variables created in the function's scope.