Angular Styleguide

angular-styleguide.md

Angular Styleguide

This document is the extension of the original Angular Styleguide and overrides some original rules. Must be applied in common.

Components

1. Imports must be at the beginning of a source file and must keep the following order:
   1. Angular libraries
   2. Angular-related vendor libraries
   3. Other vendor libraries
   4. Custom libraries
   5. Custom modules
   6. Custom services
   7. Custom components and directives
   8. Custom models
2. Component properties must keep the following order:
   1. Decorated properties
   2. Private properties
   3. Protected properties
   4. Public properties
   5. Constructor method
   6. Private methods
   7. Protected methods
   8. Public methods:
      1. Angular lifecycle hooks
      2. Ionic lifecycle hooks
   9. Static methods
3. All the component properies must be declared and typed in the class body.
4. All the component properties must be initialized in the constructor method.

Template syntax

1. Every custom component/directive must be prefixed: ion-content, mot-button, blog-card etc.

2. Every html element must be placed at newline if possible/correct

3. Every html element that has elements of the Angular Template syntax should have it's elements sorted in the following order:

   1. Structural directives
   2. Template variable declaration
   3. Two-way data bindings
   4. One-way data bindings 0. Standart/built-in Angular directives and its input properties
      1. 3rd-party directives and its input properties
      2. Custom directives and its input properties
      3. Styling directives(NgStyle, NgClass)
      4. Standart/built-in DOM properties
      5. Standart/built-in DOM attributes
   5. Event handlers
   6. Attributes with assignment
   7. Attributes without assignment

E.g.

<form
    #formHost
    [formGroup]="loginForm"
    [ngxGroup]="formHost"
    [blogForm]="loginForm.controls"
    [ngClass]="formClasses"
    [id]="loginFormId"
    [attr.data-pending]="formHost.pending"
    (ngSubmit)="handleSubmit($event)"
    class="form"
    novalidate>
    <!-- 
        #formHost               - Template variable declaration
        [formGroup]="loginForm" - Standart/built-in Angular directives and its input properties 
        [ngxGroup]="formHost"   - 3rd-party directives and its input properties
        [blogForm]="loginForm"  - Custom directives and its input properties
        [ngClass]="formClasses" - Styling directives(NgStyle, NgClass)
        [id]="loginFormId"      - Standart/built-in DOM properties
        [attr.data-pending]="formHost.pending"  - Standart/built-in DOM attributes
        (ngSubmit)="handleSubmit($event)"       - Event handlers
        class="form"    - Attributes with assignment
        novalidate      - Attributes without assignment
     -->
</form>