[go: up one dir, main page]

0% found this document useful (0 votes)
47 views8 pages

Angular - Frontend - Coding - Guidelines v1

This document outlines the coding standards and best practices for applications developed using .Net technologies at Inevia. It emphasizes the importance of consistent naming conventions, file structures, and coding styles to enhance software quality, readability, and maintainability. The document includes specific guidelines across various categories such as component names, service names, and security practices, aimed at improving performance and reducing vulnerabilities.

Uploaded by

Raj Kurmi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as XLSX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
47 views8 pages

Angular - Frontend - Coding - Guidelines v1

This document outlines the coding standards and best practices for applications developed using .Net technologies at Inevia. It emphasizes the importance of consistent naming conventions, file structures, and coding styles to enhance software quality, readability, and maintainability. The document includes specific guidelines across various categories such as component names, service names, and security practices, aimed at improving performance and reducing vulnerabilities.

Uploaded by

Raj Kurmi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as XLSX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Organizat

Inevia
ion Name

Name of
Coding Standards and Best Practices
Template

Current
1
Version
Released
6/5/2025
on:
Classificat INTERNAL
ion USE

Nature / Prepared
Version Date of Descripti /
Number Release on of Changed
Change By

Raj Kurmi
Initial
1 6/5/2025 & Ranjeet
version
Chorge
Best Practices

Approved By

Sandeep Desai
#VALUE!
Objective

Purpose

* This document is a strictly confidential property of Inevia.


This document defines the Coding standards and best practices for the applications developed in .Net technologies

Coding Standards are crucial for maintaining the quality, readability, and maintainability of software.
Consistent naming conventions, file structures, and coding styles make the codebase easier to read and understand.
It helps to create a streamlined application structure.
The performance, security, and stability are improved.
It reduces the code complexity and reduces vulnerable loopholes.
The data integrity and confidentiality are retained.
The application aligns with the industry standards.

ia.
#VALUE!
# Category
1 Component Names
2 Service Names
3 Interface Names
4 Variable Names
5 Constants
6 Method Names
7 File Naming
8 Module Organization
9 HTML Structure
10 SCSS Naming
11 RxJS Naming
12 Imports Order
13 Unsubscribe
14 Avoid Logic in Templates
15 Form Naming
16 Data Binding
17 Commenting
18 Avoid Inline Styles
19 Testing
20 Use TrackBy in ngFor
21 API Layer
22 Shared Components
23 State Management
24 Use Angular CLI
25 Environment Configs
26 Security
27 Accessibility
28 Avoid Magic Numbers
29 Linting & Formatting
30 Avoid `any` Type
31 Field Validations
Standard
Use PascalCase ending with `Component`.
Use PascalCase ending with `Service`.
Use `I` prefix and PascalCase.
Use camelCase for variables.
Use UPPER_SNAKE_CASE or PascalCase for exported constants.
Use camelCase and describe actions.
Use kebab-case with feature type suffix.
Group related components/services in feature folders.
Use semantic HTML with clear structure.
Use BEM naming convention.
End Observables with $
1. Angular libs, 2. 3rd party, 3. App imports
Always unsubscribe in ngOnDestroy() or use takeUntil.
Move logic to TS file.
Use meaningful names for FormGroup and controls.
Use one-way binding unless two-way is needed.
Add comments above complex logic.
Use SCSS files for styling.
Write *.spec.ts for components/services.
For performance in loops.
Abstract API calls in services.
Create /shared module for common UI parts.
Use services with BehaviorSubject or NgRx.
Always generate components/services using CLI.
Use environment.ts and environment.prod.ts.
Sanitize dynamic HTML, escape user inputs.
Use proper ARIA labels and roles.
Use constants for repeated values.
Use Prettier + ESLint
Use proper interfaces or `unknown`.
Perform validation like required, minLength, maxLength, pattern, etc. at the form level
Example
UserProfileComponent
UserService, ApiClientService
IUser, IProductDetails
userId, userList
API_ENDPOINT, DefaultPageSize
fetchUserList(), updateProfile()
user-profile.component.ts
/user/user-profile.component.ts
<section>, <article>, <header>
card__header--highlighted
userList$, isLoading$

*ngIf="isUserLoggedIn"
loginForm.get('email')
{{ user.name }}
// Fetch the user list based on filter
user-profile.component.scss
user-profile.component.spec.ts
*ngFor="let item of items; trackBy: trackByFn"
UserService.getUsers()
Buttons, modals, loaders
userState$ = new BehaviorSubject<IUser>(null);
ng g c user/profile
environment.apiUrl
Use DomSanitizer if needed
<button aria-label="Close">
MAX_ATTEMPTS = 5;
Auto format on save
IUser
Validators.required, Validators.pattern(...)
Remarks
Match file names: user-profile.component.ts
Filename: user.service.ts
Keep interfaces in /models or /interfaces folder.
Avoid abbreviations.
Store in a constants.ts file.
Avoid generic names like loadData().
Follow Angular CLI standard.
Use lazy loading for large modules.
Avoid deeply nested divs.
Keep styles scoped using Angular’s :host and encapsulation.
Makes it clear it’s an Observable.
Use VSCode’s organize imports or ESLint autofix.
Prevent memory leaks.
Avoid *ngIf="user && user.role === 'admin'"

Prefer over [(ngModel)]


Use /** */ for method docs.

Use Jasmine/Karma or Jest.


Prevents re-rendering.
Don't call HttpClient in components.
Avoid duplication.
Depends on app size.
Ensures consistent structure.
Avoid hardcoding URLs.
Prevent XSS.
Important for users with disabilities.

Add Git hooks for lint check


`any` defeats TypeScript's purpose.
Ensure validations match backend rules. Use Angular’s Reactive Forms.

You might also like