Exists Angularjs code/naming conventions?

The question:

Does anyone know if exists any official or most accepted reference for Angular naming conventions to use when we build our applications?

Angular has many different types of components such as filters, directives, services, and so on.

Wouldn’t you agree that having a reference naming convention when we implement them in our applications will make sense?

For example:
If we need to create new filters, how should we name them like [Something]Filter or filter[Something] or something else?
And same applies to Controllers, Services, Directives, and so on.
I wonder if variables/functions that belong to the scope should have a particular prefix or suffix. In some situations, it may be useful to have a way to differentiate them from functions and other (none angular code).

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Check out this GitHub repository that describes best practices for AngularJS apps. It has naming conventions for different components. It is not complete, but it is community-driven so everyone can contribute.

Method 2

If you are a beginner, it is better you first go through some basic tutorials and after that learn about naming conventions. I have gone through the following to learn Angular, some of which are very effective.

Tutorials :

  1. http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app
  2. http://viralpatel.net/blogs/angularjs-controller-tutorial/
  3. http://www.angularjstutorial.com/

Details of application structure and naming conventions can be found in a variety of places. I’ve gone through 100’s of sites and I think these are among the best:

Method 3

For structuring an app, this is one of the best guides that I’ve found:

Note that the structure recommended by Google is different than what you’ll find in a lot of seed projects, but for large apps it’s a lot saner.

Google also has a style guide that makes sense to use only if you also use Closure.


…this answer is incomplete, but I hope that the limited information above will be helpful to someone.

Method 4

Update : STYLE GUIDE is now on Angular docs.

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

If you are looking for an opinionated style guide for syntax,
conventions, and structuring AngularJS applications, then step right
in. The styles contained here are based on my experience with
AngularJS, presentations, training courses and working in
teams.

The purpose of this style guide is to provide guidance on building
AngularJS applications by showing the conventions I use and, more
importantly, why I choose them.

– John Papa

Here is the Awesome Link (Latest and Up-to-date) : AngularJS Style Guide

Method 5

I started this gist a year ago: https://gist.github.com/PascalPrecht/5411171

Brian Ford (member of the core team) has written this blog post about it: http://briantford.com/blog/angular-bower

And then we started with this component spec (which is not quite complete): https://github.com/angular/angular-component-spec

Since the last ng-conf there’s this document for best practices by the core team: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment