Angular 1 Style Guide

Angular1

Angular Team Endorsed

Special thanks to Igor Minar, lead on the Angular team, for reviewing, contributing feedback, and entrusting me to shepherd this guide.

Purpose

Opinionated Angular style guide for teams by @john_papa

If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on my development experience with Angular, presentations, Pluralsight training courses and working in teams.

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

If you like this guide, check out my Angular Patterns: Clean Code course at Pluralsight which is a companion to this guide.

Angular Patterns: Clean Code

Community Awesomeness and Credit

Never work in a vacuum. I find that the Angular community is an incredible group who are passionate about sharing experiences. As such, Angular expert Todd Motto and I have collaborated on many styles and conventions. We agree on most, and some we diverge. I encourage you to check out Todd’s guidelines to get a sense for his approach and how it compares.

Many of my styles have been from the many pair programming sessions Ward Bell and I have had. My friend Ward has certainly helped influence the ultimate evolution of this guide.

See the Styles in a Sample App

While this guide explains the what, why and how, I find it helpful to see them in practice. This guide is accompanied by a sample application that follows these styles and patterns. You can find the sample application (named modular) here in the modular folder. Feel free to grab it, clone it, or fork it. Instructions on running it are in its readme.

Translations

Translations of this Angular style guide are maintained by the community and can be found here.

Table of Contents

  1. Single Responsibility
  2. IIFE
  3. Modules
  4. Controllers
  5. Services
  6. Factories
  7. Data Services
  8. Directives
  9. Resolving Promises
  10. Manual Annotating for Dependency Injection
  11. Minification and Annotation
  12. Exception Handling
  13. Naming
  14. Application Structure LIFT Principle
  15. Application Structure
  16. Modularity
  17. Startup Logic
  18. Angular $ Wrapper Services
  19. Testing
  20. Animations
  21. Comments
  22. JSHint
  23. JSCS
  24. Constants
  25. File Templates and Snippets
  26. Yeoman Generator
  27. Routing
  28. Task Automation
  29. Filters
  30. Angular Docs