Angular JS naming conventions ($, camelCase and PascalCase)

Question

What is the convention in AngularJS for prefixing providers with $? Should I prefix all custom services in my own code?

Looks like all things that come with angular have prefixed services, e.g. $http. Controllers, however, are not prefixed with $ in most articles. Also, all angular code comes with services named in camelCase, however I've also seen PascalCase in many blogs online. Which one is the convention?

http://stackoverflow.com/q/20802798/276648 points to https://github.com/mgechev/angularjs-style-guide — user276648, Sep 30 '14 at 07:24
It's confusing. I believe there is no camelCase vs CamelCase. There is only camelCase and PascalCase https://msdn.microsoft.com/en-us/library/x2dbyw72(v=vs.71).aspx — Lombas, Nov 04 '15 at 20:20

demisx · Answer 1 · 2014-10-25T17:16:33.430

22

Use PascalCase for controllers and for functions which return a constructor function that's supposed to be newed, e.g. var user = new User(). Controllers in Angular are viewed as scope constructor functions--thus the PascalCase.
Controllers should have Controller appended in their name. See http://demisx.github.io/angularjs/2014/09/14/angular-what-goes-where.html for naming examples.
Use camelCase for everything else.

These follow important Javascript conventions that dev around the world got used to.

edited Oct 25 '14 at 17:16

answered Sep 14 '14 at 07:09

demisx

7,217
4
45
43

Add `Ctrl` at the end of controllers or not? – Dan Dascalescu Oct 24 '14 at 06:43
Good question, Dan. Add `Controller` at the end of controller name. Do not abbreviate. I've updated my answer. Also note, that standalone controllers will be gone in Angular 2.0 in favor of Web Components. – demisx Oct 25 '14 at 17:18

score 19 · Accepted Answer · answered Apr 01 '13 at 17:59

19

The docs state this convention for internal services, but also state you should not do it for your own services to reduce naming collisions.

http://docs.angularjs.org/guide/concepts#angular_namespace

Also, regarding camelCase, the docs say to use camelCase.

Angular uses name-with-dashes for attribute names and camelCase for the corresponding directive name

http://docs.angularjs.org/tutorial/step_00

answered Apr 01 '13 at 17:59

Chris Sedlmayr

979
1
10
25

3

It says for the directives, but how about services and factories and stuff like that? – glebm Apr 01 '13 at 19:01
4

In the docs, they use camelCase for most stuff (except for Controllers for whatever reason) so I would say that is the way to go. – Timothy Lee Russell Jun 19 '13 at 02:59
8

I'm guessing because controllers are thought of as "classes" in the sense they are "newed" up for each use, wheras services are singletons and are typically expected to return an "instance". However nothing prevents you from returning a constructor function as a service so in that case it may make sense to use PascalCase to differentiate it. – Chris Nicola Jul 22 '13 at 22:06
2

And should the name end with `Service`? Isn't this too verbose? – Amir Ali Akbari May 25 '14 at 13:15

Pradip Wawge · Answer 3 · 2017-03-20T18:23:55.373

We can filter Text in CamelCase using following code 
 app.filter('camelCase', function(){
            var camelCaseFilter = function(input){
                    var words = input.split(' ');
                     for (var i = 0, len = words.length; i < len; i++)
                         words[i] = words[i].charAt( 0 ).toUpperCase() + words[i].slice(1);
                     return words.join(' ');
                 };
                 return camelCaseFilter;
        });

Angular JS naming conventions ($, camelCase and PascalCase)

3 Answers3

Linked