Angular

Question 1

Описание Angular

Answer 1

Angular - фреймворк от Google для создания клиентских одностраничных приложений SPA.

Особенности Angular:
- двустороннее связывание
- маршрутизация
- Архитектура MVC
- внедрение зависимостей
- исп. TypeScript

Для работы с Angular нужно установить:
- npm (пакетный менеджер)
- сервер node.js
- Angular CLI (для компиляции)

Question 2

Директивы Angular

Answer 2

Директивы - набор инструкций, которые применяются при рендеринге html-кода.

Директива - это класс TypeScript, к которому применяется декоратор @Directive.

Типы директив Angular:
1) Компоненты
2) Атрибутивные (используются как атрибуты html-элементов)
3) Структурные (позволяют использовать код js в html-элементах)

Question 3

Создание атрибутивных директив

Answer 3

import {Directive, ElementRef} from “@angular/core”;

@Directive({
selector: “[bold]”,
standalone: true
})
export class BoldDirective{
constructor(private elementRef: ElementRef){
this.elementRef.nativeElement.style.fontWeight = “bold”;
}
}

//использование:

<p>Hello Angular</p>

Question 4

Структурные директивы

Answer 4

Структурные директивы:
1) ngFor (позволяет перебрать в шаблоне элементы массива):
<ul> <li *ngFor="let item of items">{{item}}</li> </ul>

2) ngIf (добавляет условие):
`<p *ngIf=”condition;else unset”>
Привет мир
</p>
<ng-template #unset>
<p>Пока мир</p>
</ng-template>

3) ngSwitch (встраивает в шаблон конструкцию switch..case)

Question 5

ElementRef

Answer 5

ElementRef - представляет ссылку на элемент шаблона, к которому будет применяться директива.

Question 6

Декоратор @HostListener

Answer 6

Декоратор @HostListener - позволяет связать события DOM и методы директивы.

@HostListener(“mouseenter”) onMouseEnter() {
this.setFontWeight(“bold”);
}

Question 7

Декоратор @HostBinding

Answer 7

Декоратор @HostBinding - позволяет связать обычное свойство класса со свойством элемента, к которому применяется директива.

Question 8

Получение параметров в директивах

Answer 8

Получение параметров в директивах - с помощью декоратора @Input.

Пример:
export class BoldDirective{
//Входные параметры
@Input() selectedSize = “18px”;
…
}

//использование

<p></p>

Question 9

Создание структурных директив

Answer 9

Создание структурных директива - это класс, декорированный @Directive.

Пример:
- структурная директива для цикла while
- объектTemplateRef - для доступа к шаблону, передается автоматически через DI
- ViewContainerRef - объект рендерера

import { Directive, Input, TemplateRef, ViewContainerRef } from “@angular/core”;

@Directive({ selector: “[while]”, standalone:true })
export class WhileDirective {
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef)
{ }</any>

@Input() set while(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
} }