> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap/general/frontend/documentation/winforms-angular-components/conventions/names.md).

# Names

## File structure conventions

Every component file name should be:

> \[ *ControlName* ].**component**.**ts**

Every template file name should be:

> \[ *ControlName* ].**compoment**.**html**

Every style file name should be:

> \[ *ControlName* ].**compoment**.**css**

Every spec file name should be:

> \[ *ControlName* ].**compoment**.**spec**

Every service file name should be:

> \[ *ServiceName* ].**service**.**ts**

## Single responsibility

### Rule of One (Style 01-01)

* Define one thing ( service, component ), per file.
* Limit to 400 lines of code per file.

### Small functions (Style 01-02)

* Limit to 75 lines of code per function.

## Naming

### General Naming Guidelines (Style 02-01)

* see [File structure conventions](broken://pages/-MG9b8Tkh7X8XMErAXrd#file-structure-conventions)

### Separate file names with dots and dashes (Style 02-02)

* Use Dashes to separate words in the descriptive name.

### Symbols and file names (Style 02-03)

* Use upper camel case for class names.
* Match the name of the symbol with the name of the file.
* Append the symbol name with the conventional suffix(such as Component, Directive, Module, Pipe, Service).
* Give the filename the conventional suffix (such as .component.ts, .directive.ts, .module.ts, .pipe.ts, or .service.ts) for a file of that type.

Samples:

| Symbol Name                                   | File Name                      |
| --------------------------------------------- | ------------------------------ |
| export class **ListPrimengComponent** { }     | list-primeng.component.ts      |
| export class **ComboBoxPrimengComponent** { } | heroes-primeng.component.ts    |
| export class **HeroListComponent** { }        | hero-list-primeng.component.ts |
| export class **UserProfileService** { }       | user-profile.service.ts        |

### Service names (Style 02-04)

* Use suffix a service class name with **service**.
* You can use a service name without the suffix if the name ends with -er. For example, logger.

Samples:

| Symbol Name                          | File Name            |
| ------------------------------------ | -------------------- |
| export class **HeroDataService** { } | hero-data.service.ts |
| export class **CreditService** { }   | credit.service.ts    |
| export class **Logger** { }          | logger.service.ts    |

## Bootstrapping (Style 02-05)

* Put bootstrapping and platform logic for the app in a file named **main.ts**
* Include error handling in the bootstrapping logic.

### Directive Selectors (Style 02-06)

* Use lower camel case for naming the selectors of directives.

### Custom prefix for components (Style 02-07)

* Use a hyphenated, lowercase element selector value. ***'wm'*** means WebMap.

```typescript
@Directive({
    selector : '[wm-users]'
})

export class ValidateDirective { }
```

### Custom prefix for directives (Style 02-08)

* Use a custom prefix (wm) for the directive selector. ***'wm'*** means WebMap.
* spell non-element selectors in lower camel case unless the selector is meant to match a native HTML attribute.

For example:

```typescript
@Directive({
    selector : '[wmValidate]'
})

export class ValidateDirective { }
```

### Pipe names (Style 02-09)

* Use consistent names for all pipes, named after their feature.

| Symbol Name                                                    | File Name        |
| -------------------------------------------------------------- | ---------------- |
| export class **EllipsisPipe** implements **PipeTransform** { } | ellipsis.pipe.ts |

## Angular NGModule names (Style 02-12)

* Append the symbol name with the suffix Module.
* give the file name the .module.ts extension.