13,8 тыс подписчиков

8 полезных функций Angular, о которых стоит знать

28 февраля 202328 фев 2023

6 мин

Оглавление

1. Title
2. Meta
3. Переопределение интерполяции шаблонов

Курс SkillFactory Frontend-разработчик PRO. Получите перспективную творческую профессию. Изучите JavaScript и TypeScript. Выполните 13 проектов в портфолио.

Angular — один из лучших современных фреймворков для создания веб-приложений. Он позволяет разрабатывать на различных платформах, повторно использовать код, достигать максимальной скорости за счет применения веб-воркеров и рендеринга на стороне сервера. Кроме этого, Angular предлагает оптимальный контроль над масштабируемостью за счет построения моделей данных на RxJS, Immutable.js и быстрого создания функций с помощью простых и декларативных шаблонов.

Если вы потратили достаточное количество времени на создание Angular-приложений, то наверняка знаете, как работать с этим фреймворком. Но что, если вы пропустили функции Angular, предлагающие еще больше возможностей?

Узнайте о них прямо сейчас!

1. Title

Тег title — это элемент HTML, определяющий заголовок веб-страницы. Теги title отображаются в результатах выдачи поисковых систем в виде кликабельных заголовков. Они влияют на юзабилити, SEO и продвижение в социальных сетях.

Приложения Angular получают заголовок для окна браузера из тегов title>…/title> в файле index.html. Этот заголовок в Angular не меняется при межкомпонентном переходе.

А знаете ли вы, что с помощью компонентов можно переопределить заголовок браузера?

В @angular/platform-browser есть сервис Title. Для изменения заголовка нужно просто передать сервис Title компоненту и использовать метод setTitle.

import { Title } from “@angular/platform-browser”@Component({
…
})
export class LoginComponent implements OnInit {
constructor(private title: Title) {} ngOnInit() {
title.setTitle(“Login”)
}
}

При переходе к LoginComponent заголовок окна браузера изменится на “Login”.

То же самое можно сделать в любом компоненте проекта. Тогда по мере навигации внутри приложения заголовок будет меняться в окне браузера.

2. Meta

Большая часть того, что показывает приложение Angular, содержится в файле index.html. Приложение будет иметь метатеги, установленные в файле index.html. В @angular/platform-browser в Angular есть сервис Meta, который позволяет задавать метатеги из компонентов. Применять метатеги полезно для SEO и продвижения страниц в соцсетях.

Элементы Meta предоставляют поисковым системам информацию о веб-странице, которая помогает поместить ее в нужную категорию при ранжировании.

Meta легко использовать: просто импортируйте его из @angular/platform-browser и внедрите в компонент.

import { Meta } from “@angular/platform-browser”@Component({
…
})
export class BlogComponent implements OnInit {
constructor(private meta: Meta) {} ngOnInit() {
meta.updateTag({name: “title”, content: “”})
meta.updateTag({name: “description”, content: “Lorem ipsum dolor”})
meta.updateTag({name: “image”, content: “./assets/blog-image.jpg”})
meta.updateTag({name: “site”, content: “My Site”})
}
}

Благодаря Meta, BlogComponent может отображаться в Twitter и прочих соцсетях с правильно выведенными заголовками, изображениями и описанием.

3. Переопределение интерполяции шаблонов

Все мы по умолчанию используем интерполяцию шаблонов для отображения свойств в компоненте.

У нас есть начало и конец. Если поместить свойство между ними, оно отобразится в DOM браузера.

А известно ли вам, что можно использовать собственные символы вместо символов по умолчанию для начала и конца инкапсуляции? Это легко выполнить: просто укажите новые значения декоратору Component в свойстве интерполяции.

@Component({
interpolation: [“((“,”))”]
})
export class AppComponent {}

В шаблоне AppComponent “” больше не будет использоваться в качестве интерполяции. Вместо этого будет “(())”.

@Component({
template: `
<div>
((data))
</div>
`,
interpolation: [“((“,”))”]
})
export class AppComponent {
data: any = “dataVar”
}

При рендеринге страницы будет отображаться “dataVar” вместо “((data))”.

4. Location

Используя сервис Location, можно получить URL страницы, открытой в браузере. В зависимости от выбора LocationStrategy, Location будет сохраняться либо по пути в URL, либо по части URL после решетки (#).

С помощью Location можно перейти к URL, продвинуться вперед и вернуться назад по истории платформы, изменить URL браузера и заменить верхний элемент в истории платформы.

Сервис Location используется путем внедрения его из модуля CommonModule.

import { Location } from “@angular/common”@Component({
…
})
export class AppComponent {
constructor(private location: Location) {} navigateTo(url) {
this.location.go(url)
} goBack() {
location.back()
} goForward() {
location.forward()
}
}

5. DOCUMENT

Иногда нужно получить модель документа, чтобы прямо в приложении Angular выполнять операции с DOM.

Именно это и позволяет сделать DOCUMENT — DI Token (токен внедрения зависимостей), представляющий основной контекст рендеринга. Это то, чем является DOM-документ браузера. Он обеспечивает операции DOM в любой среде выполнения.

Примечание: если Application Context и Rendering Context отличаются, DOCUMENT может быть недоступен в Application Context (например, при запуске приложения в веб-воркере).

Допустим, в HTML имеется такой элемент:

<canvas id=”canvas”></canvas>

Чтобы получить HTML-элемент canvas, внедрите DOCUMENT:

@Component({})
export class CanvasElement {
constructor(@Inject(DOCUMENT) _doc: Document) {}
}

HTML-элемент canvas можно получить, вызвав getElementById().

@Component({})

export class CanvasElement {

constructor(@Inject(DOCUMENT) _doc: Document) {} renderCanvas() {

this._doc.getElementById(“canvas”)

}

}

Это можно сделать безопасно, используя ElementRef и ссылку на шаблон.

Предостережение: будьте осторожны при использовании DOCUMENT! Прямое взаимодействие с DOM повышает риск XSS-атак.

6. Декоратор Attribute

Чаще всего в приложении Angular используются декораторы Component, Module и Directive.

Декоратор Attribute позволяет передавать статическую строку без замедления работы, избегая проверки изменений.

Значения декоратора Attribute проверяются только один раз. Способ использования такой же, как и в случае @Input:

@Component({
…
})
export class BlogComponent {
constructor(@Attribute(“type”) private type: string ) {}
}

7. HttpInterceptor

Это очень мощная часть Angular. HttpInterceptor идентифицирует запросы HttpRequest, перехватывает и обрабатывает их.

Вызывая next.handle(transformedReq), большинство перехватчиков изменяют исходящий запрос перед отправкой его следующему перехватчику в цепочке.

В редких случаях перехватчики могут самостоятельно обработать запрос вместо того, чтобы передавать его по цепочке. Такое поведение вполне нормально.

HttpInterceptor может использоваться для:

аутентификации;
кэширования;
поддельного бэкенда;
трансформации URL;
изменения заголовков.

Эту функцию легко использовать. Сначала создайте сервис и реализуйте интерфейс HttpInterceptor.

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
constructor() {} intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
…
}
}

После добавьте его в модуль main:

@NgModule({
…providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MockBackendInterceptor,
multi: true
}
]
…
})
export class AppModule {}

8. AppInitializer

Иногда необходимо, чтобы при запуске приложения Angular выполнялся определенный код. Это может понадобиться при загрузке некоторых настроек, кэша, конфигураций, а также при проверках. Выполнение подобной задачи облегчает токен AppInitializer.

APP INITIALIZER — это функция, которая запускается при первом запуске Angular-приложения.

Она проста в использовании. Допустим, вы хотите, чтобы при запуске приложения Angular выполнялась некая функция runSettings:

function runSettingsOnInit() {
…
}

Добавьте ее в раздел провайдеров декоратора NgModule, перейдя к основному модулю AppModule:

@NgModule({
providers: [
{ provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
]
})