Best Practices & Guidelines for Angular

Here are some set of guidelines that we should follow to make our project comply with the coding standard; [5 minutes read]

1. Angular Coding Styles

Here are some set of rules that we should follow to make our project comply with the coding standard;

1. Per file, the code must not exceed 400 lines limit

2. Per function, the code must not exceed 75 lines

3. Names of properties and methods should be in camel case

4. Always leave one empty line between imports such as third party and application imports

2. Folder Structure for Angular

Creating a folder structure is an extremely important factor that we should consider before creating any projects. We should refer angular style guide.

3. Utilizing ES6 Features

for example ‘let and const’ instead of ‘var’

4. Using strict types instead of "any"

If we are not specifying the variables and constants, they will be assumed by the value and as a result, will be assigned to it. If it happens, we are now in trouble as it will create some unintended issues, anytime.

5. Follow the Single Responsibility Principle

It is very important not to create more than one component, service, directive… inside a single file. Every file should be responsible for a single functionality. By doing this, we are keeping our files clean, readable, and maintainable.

6. Breaking down Components

If a component is growing big, break it down into multiple, more manageable, smaller components, dedicating each one to an atomic task.

7. Using Interfaces

If we want to create a contract for our class we should always use interfaces. By using them we can force the class to implement functions and properties declared inside the interface.

8. Safe Navigation Operator (?)

To be on the safe side we should always use the safe navigation operator while accessing a property from an object in a component’s template. Example:

<span> {{user?.Name}} </span>        

9. Build Reusable Components

If there is a piece of UI that you need in many places in your application, build a component out of it and use the component.

10. Use lint rules for Typescript and SCSS

Linting forces the program to be cleaner and more consistent. It is widely supported across all modern editors and can be customized with your own lint rules and configurations.

11. Write enough Unit test

We should write enough unit tests not only to obtain the highest code coverage but to catch most of the issues during the development time itself.