Objective
On this page, you will find guidelines for working with Angular and Typescript.
Prerequisites
These guidelines are meant to build on the parent guidelines: Coding Guidelines. I recommend becoming familiar with that document because this document builds on, and modifies parts of that document.
Naming Guidelines
Class Names should be PascalCasing. Append the purpose to the end of the name: ProductList[Component], DataAccess[Service].
Properties should be in camelCase.
Methods names should be camelCase.
Selectors should be prefixed for clarity and to avoid clashes: agape-root.
Use a singular name for Enum.
| IDENTIFIER | CASE | EXAMPLE |
| Class | Pascal | DonationListComponent |
| Interface | Pascal prefixed with an “I” | IDonation |
| Enum | Pascal | Direction |
| Event | Camel | onClick, valueChange |
| Property | Camel | backgroundColor |
| Method | Camel | toString |
| Namespace | Pascal | Agape.Attendance |
| Parameters | Camel | firstName |
| Magic Numbers | UPPER SNAKE CASE | AGAPE_GREEN |
| Local variables | _camelCase | _subscriptionType |
| Decorator | @Camel | @sealed |
| Selector | kebab-case | agape-jumbotron |
| Pipe | Camel | dashToSpaces |
| Modules | Pascal | RoutingModule |
File Names
Separate the file names with dot and dashes to make them easy to identify at a glance. Remember that the point is to make them quickly identifiable. Don’t use cryptic abbreviations.
If you find yourself struggling with the name you should reconsider the scope of the feature or type.
Practice the following pattern: [feature].[type].[ts | html | css | spec]
Example:
- product-list.component.ts
- product-list.component.html
- product-list.component.css
- data-access.service.ts
Use standard type names for the application parts:
- .service
- .component
- .pipe
- .module
- .directive
Symbols
Take care to add a conventional suffixes representation the type: [Entity][Type]
- AppComponent
- ProductListComponent]
- ValidationDirective
- AppModule
- AddressPipe
- ProfileService
Note: It is possible to make the distinctions with services without adding the “Service” suffix. It is acceptable in some projects to identify a service with the “er” ending. However, I am choosing to recommend that you avoid adopting this exception for the purpose of consistency.
Unit Test
Use the same name as the component that is tested.
The file name should contain the “.spec” suffix: logger.service.spec.ts
The end-to-end test should contain the “.e2e-spec” suffix: products.e2e-spec.ts
Maintainability
Avoid using “var” to declare a variable.
Use “let” for local variables.
Avoid using “any” as the variable type.
Ensure that you always unsubscribe from an observable when it is not needed.
Remember to call “super()” in the constructor of a class that “extends” another class.
In classes, follow the following order:
- Public Members
- Protected Members
- Private Members
- Public Methods
- Protected Methods
- Private Methods
Always start with lowes access level: private, protected, public.
| access | class | child | app |
| private | Yes | No | No |
| Protected | Yes | Yes | No |
| Public | Yes | Yes | Yes |
Always use “TemplateUrl” and “StyleUrl” in a component decorator.
Architectural Practice
If your application needs to get data, get it through a service. It doesn’t matter where the data is coming from or going to. It could be from memory, local storage, a backend service, or a third-party API. make these operations happen through a service.
Always create Unit Test and an End-to-end test should be part of that.
Security
Avoid binding properties to HTML elements like “innerHTML” as this could open your application to XSS attacks.
Always enforce Trusted Types so that the built-in DOM APIs will automatically protect you from security vulnerabilities.
References
Smith, James. n.d. Coding Standards. Accessed Oct 22, 2020. https://expertdev.blog/coding-standards/.
Smith, James. n.d. Coding Guidelines. Accessed Oct 22, 2020. https://expertdev.blog/coding-guidelines/.
Microsoft. n.d. TypeScript: Typed JavaScript at any Scale. Accessed Dec 14, 2020. https://www.typescriptlang.org/.
Google. n.d. Angular coding style guide. Accessed Dec 16, 2020. https://angular.io/guide/styleguide