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

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.

@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:

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