AngularsRuleSet.md

💡 Module Structure

The modular structure of Angular arranges the code into different modules so all services and components are divided into different groups when you construct them. In Angular coding, you can separate functionality into reusable pieces of code.

💡 Files and Folders

Naming conventions are hugely important to maintainability and readability and help to provide a consistent way to find the content at a glance. Consistency within the project is vital which help in tremendous efficiency.

💡 Let’s See How to Name Our Files and Classes

1. File Naming

While creating files, we should pay attention to the file names.

Names of folders and files should clearly convey their intent. Names should be consistent with the same pattern in which we mention the file’s feature first and then the type, dot separated. For example consultation.component.ts or home.component.html or auth.service.ts

If we want to add more descriptive names to our files we should use a dash(-) to separate the words in the name: tc-home.component.ts book-appointment.component.ts

2. Class Names

When we add names to classes, we should use upper camel case style with the added suffix that represents the type of our file: DatepickerDirective TcHomeComponent AuthService

💡 Angular Coding Practices

Coding standards are the ways of programming the software. In Angular applications, certain coding styles can be followed for the best user experience.

Developers usually find it difficult to fix bugs and reflect on immediate issues when dealing with complex code structures.

Here’re some set of rules that you need to follow to make your project comply with the standard Angular style guide

• Per file, the code must not exceed from 400 lines limit
• Per function, the code must not exceed from 75 lines
• Utilise custom prefix to prevent element name collisions with components in other apps and with native HTML elements.
• If the values of the variables are intact, declare it with const
• Names of properties and methods should be in lower camel case
• Always leave one empty line between imports and module such as third party and application imports and third-party module and custom module
• We shouldn’t name our interfaces with the starting capital I letter as we do in some programming languages.

💡 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. If the object is null and we try to access a property, we are going to get an exception. But if we use the save navigation (?) operator, the template will ignore the null value and will access the property once the object is not null anymore.

💡 Prevent Memory Leaks in Angular Observable

Observable memory leaks are very common and found in every programming language, library, or framework. Angular is no exception to that. Observables in Angular are very useful as it streamlines your data, but memory leak is one of the very serious issues that might occur if you are not focused. It can create the worst situation in mid of development. Here’re some of the tips which follow to avoid leaks.

• Using async pipe
• Using take(1)
• Using takeUntil()

💡 Using index.ts

index.ts helps us to keep all related things together so that we don’t have to be bothered about the source file name. This helps reduce the size of the import statement.

For example, we have article/index.ts as

💡 Using strict types instead of "any"

While working on an Angular project, developers, generally end up typing ‘any’ to declare variables. If you 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, you are now in trouble as it will create some unintended issues, anytime.

💡 Module Organization and Lazy Loading

Utilizing lazy load the modules can enhance productivity. Lazy Load is a built-in feature in Angular which helps us with loading the things on demand. When have used LazyLoad it helps in reducing the size of the application by abstaining from unnecessary file from loading. Following are the modules, which are been used in angular apps widely

• Multi Modules
• Routing Modules
• Shared Modules
• Lazy Load Modules

💡 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.

💡 Always Document

Always document the code as much as possible. It will help the new developer involved in a project to understand its logic and readability.

It is a good practice to document each variable and method. For methods, we need to define it using multi-line comments on what task the method performs and all parameters should be explained.

💡 Cache API Calls

Caching the API calls especially on the website limits the number of server requests to fetch redundant information thus saving time and reduce the load on the server.

To utilize the caching, one needs to make an HTTP request and then store the results of that request in memory, which can be served once again whenever required without requesting to the server. This helps in user to make fewer HTTP requests to the server and on return had to wait less for the response every time it required.