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 }
]
})
Читайте также:
- Как работает внедрение зависимостей в Angular
- Как масштабировать Angular без ограничений
- Платформы Аngular в деталях. Часть 4. Визуализация Angular-приложений в терминале
Читайте нас в Telegram, VK и Дзен
Перевод статьи Sefali Warner: Most Useful Angular Features You’ve Probably Never Used
