Angular Style Guide

Angular

• Apply the Single Responsibility Principle to all components, services and other symbols. Do one thing services or component per file limiting 400 lines of code to avoid bugs, maintain & reuse code.
• Define Small functions limiting 75–100 lines.
  Smaller the function, easier to read, test and promote reusability of function.
• Make use of Generic Naming Conventions.
  Use consistency while naming components, services, pipes etc. It make easy to identify what is the file or folder all about and easy to understand while working in large team.
  Giving file convention like this helps a lot — .component.ts, .service.ts, .module.ts, .pipe.ts, .directive.ts
• Use dashed-case component selector for components. It keeps the element names consistent with specification for Custom Elements.
  For ex, app-employees or app-users.
• Make a Shared structure — SharedModule in shared folder for common or reusable code/files.
• Put Presentation logic in component class and not in the template to improve readability, maintainability and reusability.
• Make sure you are placing properties up followed by methods for consistent sequence.
• Put bootstrapping and platform logic for the application in a main.ts file.

For the Application Structure,

Structure your application in such a way that you can Locate code quickly, Identify the code, keep the Flattest structure and Try to be DRY.

- Locating code means finding code in different modules, files which makes the task a lot easier.

- Identify the code means you instantly know what it contains and represents in the application.

- Flattest structure means create subfolder once you folder is having seven or more files and modularize your code. A Flat structure is easy to scan.

- DRY — Don’t Repeat Yourself.

Share your view and best practices followed by you or your team in comments!!