Separation of Responsibilities

An extremely important part of designing AngularJS applications is the separation of responsibilities. The whole reason you choose a structured framework is to ensure that code is well implemented, easy to follow, maintainable, and testable. Angular provides a very structured framework to work from, but you still need to ensure that you implement AngularJS in the appropriate manner.

The following are a few rules to follow when implementing AngularJS:

The view acts as the official presentation structure for the application. Indicate any presentation logic as directives in the HTML template of the view.

If you need to perform any DOM manipulation, do it in a built-in or your own custom directive JavaScript code—and nowhere else.

Implement any reusable tasks as services and add them to your modules by using dependency injection.

Ensure that the scope reflects the current state of the model and is the single source for data consumed by the view.

Ensure that the controller code only acts to augment the scope data and doesn’t include any business logic.

Define controllers within the module namespace and not globally. This ensures that your application can be packaged easily and prevents overwhelming the global namespace.