Implementation best practices

The aim of this doc is to precise already well-know styleguide as Angular

Naming services

import { AnalyticsService } from '@shared/analytics.service';
import { AuthService } from '@providers/auth.service';

constructor ItemsComponent (
    analyticsService: AnalyticsService,
    authService: AuthService
) {}

/* WRONG */
private profileService: ContactsService

/* OK */
private contactsService: ContactsService

JavaScript ES6+: var, let, or const?

a single identifier should only be used to represent a single concept

Constructor vs ngOnInit

ngOnInit is part of Angular lifecycle, while constructor is part of ES6 JavaScript class. Mostly we use ngOnInit for all the initialization/declaration and avoid stuff to work in the constructor. The constructor should only be used to initialize class members but shouldn't do actual "work". So you should use constructor() to setup Dependency Injection and not much else.

Sources:

• https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit/35763811#35763811
• https://blog.angularindepth.com/the-essential-difference-between-constructor-and-ngoninit-in-angular-c9930c209a42

Mock: mimic an Observable

Observable.of from RxJS to give an Observable stream from the results, this is a nice way to mimic an Observable response. => Could be use to mock contacts or comments.

this.contacts = Observable.of([ { "id": 1, "name": "Laura", "email": "[email protected]", "age": 47 }, ...

How to submit form on Angular

/* WRONG */
<form novalidate (ngSubmit)="onSubmit(f)" #f="ngForm">

/* OK */
<form novalidate (ngSubmit)="saveProfile(user)" #f="ngForm">

Furthermore

• Understanding why Semantic HTML is important, as told by TypeScript