• Abstract commonly used functions into a service.
  • reduce ( function ( memo , item ) { return memo + ( item .
  • If using array definition syntax, use the original names of the controller’s dependencies.
  • Avoid writing business logic inside controllers.
  • Use camelCase to name your services.

angularjs-style-guide – Community-driven set of best practices for AngularJS application development

@fabiofolgori: #angularjs style guide

The goal of this style guide is to present a set of best practices and style guidelines for one AngularJS application. These best practices are collected from:

Note 1: this is still a draft of the style guide, its main goal is to be community-driven so filling the gaps will be greatly appreciated by the whole community.

Note 2: before following any of the guidelines in the translations of the English document, make sure they are up-to date. The latest version of the AngularJS style guide is in the current document.

In this style guide you won’t find common guidelines for JavaScript development. Such can be found at:

For AngularJS development recommended is the Google’s JavaScript style guide.

In AngularJS’s GitHub wiki there is a similar section by ProLoser, you can check it here.

Since a large AngularJS application has many components it’s best to structure it in a directory hierarchy. There are two main approaches:

In this way the directory structure will look like:

Here is its layout:

This approach can be combined with both directory structures above.

Conventions about component naming can be found in each component section.

TLDR; Put the scripts at the bottom.

Keep things simple and put AngularJS specific directives after standard attributes. This will make it easier to skim your code and will make it easier to maintain because your attributes are consistently grouped and positioned.

Other HTML attributes should follow the Code Guide’s recommendation

The following table is shown the naming conventions for every element:

), except if explicitly mentioned.

E2E tests are the next common sense step after unit tests, that will allow you to trace bugs and errors in the behaviour of your system. They are great for providing a sanity check that most common scenarios of using your application works. This way you can automate the process and run it each time before you deploy your application.

Ideally, Angular End-to-End tests are written in Jasmine. These tests are run using the Protractor E2E test runner which uses native events and has special features for Angular applications.

Since the goal of this style guide is to be community-driven, contributions are greatly appreciated. For example, you can contribute by extending the Testing section or by translating the style guide to your language.


You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.