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

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 } 
 ] 
 })