Правила написания кода (Angular)

Документация по именованию и т.д.

Именование

 

  • savedTheDay – ивенты (события, т.е. те что прописываются в @Output) в прошедшем времени, так показано в примерах оф.документации.
  • handleUpdateUser, handleUserData, handleActionClick
  • handleUpdateUser, handleUserData, handleActionClick – приставка handle в начале названия метода, что вешается на событие (обработчика событий). В документации также присутствует рекомендация использовать on вместо handle (onUpdateUser и т.д.), но в сообществе говорят, что об этом было много разговоров и лучше его не использовать.

 

  • carouselRef – имя шаблонной ссылки с окончанием Ref.
  • containertpl – темплейтреф (TemplateRef применяется для вставки темплейта в темлейт или другого управления темплейтом по ссылке) с окончанием tpl.

Порядок атрибутов внутри тега

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div
*ngIf="isDataLoaded"
class="this-is-some-meaningful-block"
*ngFor="let users of usersList"
#elementRef
[(name)]="contactPerson"
[type]="data"
[]=""
[]=""
(click)="handelClose()"
(click)="handelClose()"
>
<div *ngIf="isDataLoaded" class="this-is-some-meaningful-block" *ngFor="let users of usersList" #elementRef [(name)]="contactPerson" [type]="data" []="" []="" (click)="handelClose()" (click)="handelClose()" >
<div
   *ngIf="isDataLoaded"
   class="this-is-some-meaningful-block"
   *ngFor="let users of usersList"
   #elementRef
   [(name)]="contactPerson"
   [type]="data"
   []=""
   []=""
   (click)="handelClose()"
   (click)="handelClose()"
 >

*NgIf превыше всего и идет в самом начале. А *ngFor уже после названия класса. Двусторонне связывание ([(…)]) не точно стоит превыше одностороннего, но скорее всего так (логически).

Порядок свойств и методов внутри класса

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// most important variables
public CONSTANTS = CONSTANTS;
public i18n = i18n;
// defining variables for ex selects
@Input() asdasd
@Input() asdasd
@Input() asdasd
// possible separates by semantical purposes
@Input() asdasd
@Input() isLoad!: boolean;
@Output() sdfsdf = new EventEmitter<string>()
@Output() sdfsdf2 = new EventEmitter<string>()
public sdfsdf
public sdfsdf
public sdfsdf
private sdfsdf
private sdfsdf
private sdfsdf
@ViewChild
@ViewChild
@ViewChild
@ContentChildren
// constructor detaches variables and methods
constructor() {}
ngOnInit(){
this.getData();
}
afterViewInit() {}
ngOnDestroy(){}
public getData() {
this.calculate()
}
// public methods
public sdfsdf() {
}
public some() {
}
public some() {}
public some() {}
// private methods
private calculate() {}
// most important variables public CONSTANTS = CONSTANTS; public i18n = i18n; // defining variables for ex selects @Input() asdasd @Input() asdasd @Input() asdasd // possible separates by semantical purposes @Input() asdasd @Input() isLoad!: boolean; @Output() sdfsdf = new EventEmitter<string>() @Output() sdfsdf2 = new EventEmitter<string>() public sdfsdf public sdfsdf public sdfsdf private sdfsdf private sdfsdf private sdfsdf @ViewChild @ViewChild @ViewChild @ContentChildren // constructor detaches variables and methods constructor() {} ngOnInit(){ this.getData(); } afterViewInit() {} ngOnDestroy(){} public getData() { this.calculate() } // public methods public sdfsdf() { } public some() { } public some() {} public some() {} // private methods private calculate() {}
// most important variables
  public CONSTANTS = CONSTANTS;
  public i18n = i18n;

  // defining variables for ex selects
  @Input() asdasd
  @Input() asdasd
  @Input() asdasd

  // possible separates by semantical purposes
  @Input() asdasd
  @Input() isLoad!: boolean;
  @Output() sdfsdf = new EventEmitter<string>()
  @Output() sdfsdf2 = new EventEmitter<string>()

  public sdfsdf
  public sdfsdf
  public sdfsdf

  private sdfsdf
  private sdfsdf
  private sdfsdf

  @ViewChild
  @ViewChild
  @ViewChild
  @ContentChildren

  // constructor detaches  variables and methods
  constructor() {}

  ngOnInit(){
    this.getData();
  }

  afterViewInit() {}

  ngOnDestroy(){}

  public getData() {
    this.calculate()
  }

// public methods
  
  public sdfsdf() {

  }

  public some() {

  }

  public some() {}

  public some() {}
 // private methods
  private calculate() {}

Сразу идут паблик свойства, потом приват свойства.  Аналогично и с методами, которые пишутся после конструкторов и жизненных циклов (хуков).

Именование классов

Это пример с конкретного проекта, а не вообще:

Именование стилей пример

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *