Code Style Guide In Angular Application

[reboottime]

Overview

This article discusses the code style I endorse for Angular applications.

• Naming Convention
• Component Code Organization
• Folder and File Organization

References

1. Angular: Migrating to ESLint
2. Angular Style Guide

[reboottime]

Naming Convention

Component member methods

• Event Handlers:
  • Format: on[Topic][EventName]
  • For example, onCancellButtonClick
• HTTP Requests for Getting and Setting Component Data:
  • fetchAndSet[Topic], add All prefix if the request is about getting and setting plural items.
  • for example, fetchAndSetUsers, fetchAndSetCurrentUser
• methods return boolean value:
  • format: is[Topic] / has[Topic]
  • for example, isAdminUser, hasBadOrder
• get a derived value used in template:
  • format: get[Topic]
  • example: getOrderStatus(order: Order)
• Indicate API request Loading state:
  • format: isLoading[Topic]
  • example: isLoadingUserOrders

File Naming Convention

Angular CLI supports generating various file types, including:

• services
• guards
• components
• modules

However, it does not provide a direct command for generating "models."

As a best practice, it is recommended to follow the Angular CLI-generated file naming conventions for consistency.

Sample Code:

• Example: Naming convention for component members and code organization

[reboottime]

Code Organization ( in component ts file)

Good practices on component

• component member methods declaration order
• keep the component line amount less than 400
• Single component, single responsibility

Component member methods declaration order

• 1, constructor
• 2, lifecycle hooks
• 3, other public methods are declared using alphabetical order
• 4, private/protected methods

Packages and File Import Order

• 1, Node Module Imports: Alphabetically ordered.
• 2, External Imports.
• 3, Internal Imports.

And, we need a line break between each import group

Grouping component variables

Suggest organizing component variables by topic and incorporating a line break between distinct data groups, as exemplified by:

// group on user data
userData = new User();
isLoadingUserData = true;


// group user orders
isLoadingUserOrders = true;
userOrder = undefined;

[reboottime]

Folder and File Organization

• Regarding .model.ts, if you are from React Application background:

  • Angular employs TypeScript as its built-in language, thereby supporting the use of @types.
  • However, in Angular applications, it is customary to use models for type annotations rather than interfaces.

• Guidelines on Angular Application folder structure

  • Do create folders named for the feature area they represent.
  • Keep the folder structure FLAT

Bellow is a widely accepted Angular application folder structure.

src/
|-- app/
|   |-- shared/
|   |   |-- components/
|   |   |   |-- shared-component/
|   |   |       |-- shared-component.component.ts
|   |   |       |-- shared-component.component.html
|   |   |       |-- shared-component.component.scss
|   |   |       |-- shared-component.component.spec.ts
|   |   |
|   |   |-- directives/
|   |   |-- pipes/
|   |   |-- services/
|   |   |-- utils/
|   |   |
|   |   |-- models/
|   |       |-- user.model.ts
|   |
|   |-- home/
|   |   |-- home.component.ts
|   |   |-- home.component.html
|   |   |-- home.component.scss
|   |   |-- home.component.spec.ts
|   |
|   |-- dashboard/
|   |   |-- dashboard.component.ts
|   |   |-- dashboard.component.html
|   |   |-- dashboard.component.scss
|   |   |-- dashboard.component.spec.ts
|   |
|   |-- core/
|       |-- interceptors/
|       |-- guards/
|       |-- services/
|       |   |-- data.service.ts
|       |   |-- logger.service.ts
|       |
|       |-- core.module.ts
|
|-- assets/
|-- environments/
|-- styles/
|-- index.html
|-- main.ts
|-- polyfills.ts
|-- tsconfig.app.json
|-- tsconfig.spec.json
|-- angular.json
|-- package.json
|-- README.md