Scribd
Upload
178 views

Angular Style Guide - DominicodersPRO PDF

This document provides Angular style guide best practices in 9 sections: 1. Single responsibility and file/function size limits 2. Using absolute paths over relative paths 3. Recommendations for naming interfaces and using classes vs interfaces 4. Suggestions for import line spacing and ordering 5. Keeping a flat folder structure until a folder exceeds 7 files 6. Overall structural guidelines 7. Using trackBy with ngFor to optimize re-rendering 8. Organizing related items in an index.ts file 9. Using the async pipe in templates to automatically unsubscribe from observables

Uploaded by

Pablo Ferreira
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
178 views

Angular Style Guide - DominicodersPRO PDF

This document provides Angular style guide best practices in 9 sections: 1. Single responsibility and file/function size limits 2. Using absolute paths over relative paths 3. Recommendations for naming interfaces and using classes vs interfaces 4. Suggestions for import line spacing and ordering 5. Keeping a flat folder structure until a folder exceeds 7 files 6. Overall structural guidelines 7. Using trackBy with ngFor to optimize re-rendering 8. Organizing related items in an index.ts file 9. Using the async pipe in templates to automatically unsubscribe from observables

Uploaded by

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

Angular Style Guide / Best

Practices

1. Single responsibility
A class should have one and only one reason to change meaning that a
class should have only one job.

Do define one thing such as a service or component per file.

Limiting files to 400 Lines of code.

Define small functions and Limiting to no more than 75 lines.

The small functions are easy to reuse, read and maintain.

2. Absolute paths instead relative paths


Do use a absolute paths you can easily setup this in your tsconfig.ts
"paths": {
"@app/*": ["src/app/*"],
"@auth/*": ["src/app/auth/*"],
"@shared/*": ["src/app/shared/*"]
},
3. Interfaces

Do name an interface using the upper camel case.

Consider naming an interface without an I prefix.

Consider using a class instead of an interface for services and declarable


(components, directives, and pipes).

Consider using an interface for data models.

Interfaces are completely removed during compilation and so they will not
add any unnecessary bloat to our final js code

4. Import line spacing

Consider leaving one empty line between third-party imports and


application imports.
Consider listing import lines alphabetized by the module.

5. Flat

Do keep a flat folder structure as long as possible.

Consider creating sub-folders when a folder reaches seven or


more files.

On the other hand, psychologists believe that humans start to


struggle when the number of adjacent interesting things exceeds nine.
So when a folder has ten or more files, it may be time to create
subfolders
6. Overall structural guidelines
7. Use trackBy along with ngFor

When using ngFor to loop over an array in templates, use it with a


trackBy function which will return a unique identifier for each DOM
item.
When an array changes, Angular re-renders the whole DOM tree. But
when you use trackBy, Angular will know which element has changed
and will only make DOM changes only for that element.

Use ngFor
Now, each time the changes occur, the whole DOM tree will be
re-rendered.

Using trackBy function

export class MyApp {


getItems() { // load more items }
trackByFn(index, item) { return index; // or item.id}
}
Now, it returns as a unique identifier for each item so
only updated items will be re-rendered.

8. Use index.ts
index.ts helps us to keep all related things together so that we don’t have
to be bothered about the source file name.
This helps reduce size of the import statement.

For example, we have /heroes/index.ts as


//heroes/index.ts
export * from './hero.model';
export * from './hero.service';
export { HeroComponent } from './hero.component';

We can import all things by using the source folder name.


9. Use async pipe in templates

Observables can be directly used in templates with the async pipe,


instead of using plain JS values. Under the hood, an observable would be
unwrapped into plain value. When a component using the template is
destroyed, the observable is automatically unsubscribed.

Without Using async pipe


//template {{ text }}
Using async pipe
// template {{ text | async }}
// component this.text = observable.pipe( map(value => value.item) );
Extension recommendation for Visual Studio Code

Angular Language Service

Angular Language Service — This extension provides a rich


editing experience for Angular templates, both inline and
external templates.

JSON to TS

JSON to TS isn’t Angular specific and works whenever you’re


working with TypeScript. Json2ts comes handy when you have
to create a TypeScript interface from a JSON object.

Angular2-switcher
angular2-switcher Easily navigate to
typescript(.ts)|template(.html)|style(.scss/.sass/.less/.css) in
angular projects.
Auto Import
Auto Import Automatically finds, parses and provides code
actions and code completion for all available imports. Works
with Typescript and TSX

Path Intellisense
Path Intellisense Visual Studio Code plugin that
autocompletes filenames

Angular Essentials
Angular Essentials is Extension Pack for VS Code

Auto Close Tag


Auto Close Tag Automatically add HTML/XML close tag, same
as Visual Studio IDE or Sublime Text.

You might also like