Возможно, вы написали уже много приложений на Angular и уверены, что все о нем знаете . Чтобы быть уверенным на 100% - читайте дальше!
Переводим для вас материал авторства Чидуме Ннамди, разработчика-фрилансера из Нигерии, который опубликовал данный обзор на Medium.com. Вот ссылка на оригинал. Нам понравились его советы, надеемся, и для вас они тоже будут полезны. Итак, потратив много часов на написание приложений с помощью Angular, вы вероятно, убеждены, что уже видели ВСЁ. Чтобы быть на 100% в этом уверенными, прочитайте текст ниже. Здесь представлены 10 полезных функций Angular, которые вы могли пропустить.
1. Title
Тег title — это элемент HTML-кода, который описывает заголовок веб-страницы. Содержимое тега title отображается на страницах выдачи результатов поисковой системы (search engine results pages - SERP) в виде короткого кликабельного заголовка для каждого выданного результата. Он имеет решающее значение для юзабилити, SEO и шэринга веб-страниц в соцсетях. Приложения на Angular также берут заголовок, предназначенный для окна браузера, из <title> ... </ title> документа index.html. При переходе от одного компонента к другому этот заголовок не меняется. Но знаете ли вы, что можно устанавливать title из компонента? У Angular есть Title service в @angular/platform-browser. Мы просто внедряем Title service в наши компоненты и используем метод setTitle для установки заголовка.
import { Title } from "@angular/platform-browser"
@Component({
...
})
export class LoginComponent implements OnInit {
constructor (private title: Title)
{...}
ngOnInit() {
this.title.setTitle("Login");
}
}В данном примере, когда мы перейдем к компоненту LoginComponent, заголовок в браузере будет изменен на «Login». Мы можем повторить это со всеми компонентами нашего проекта и сделать так, чтобы при переходе к ним окно браузера переименовывалось соответствующим образом.
2. Meta
Наше Angular-приложение в большинстве своем отображает содержимое документа index.html. Там же прописаны его метатеги. Согласно Википедии: Метатеги — (X)HTML-теги, предназначенные для предоставления структурированных метаданных (дополнительных, сопроводительных) о веб-странице. Как правило, указываются в заголовке (теге <head>) (X)HTML-документа. Элемент meta принимает как минимум четыре атрибута: content, http-equiv, name и scheme. Из них обязателен только атрибут content и исключение тег revisit. Несколько метаэлементов с разными атрибутами могут быть использованы на одной странице. Метаэлементы могут использоваться для указания описания страницы, ключевых слов и любых других метаданных, не предоставляемых другими элементами и атрибутами заголовка. Метаэлементы предоставляют информацию о веб-странице, которая может использоваться поисковыми системами для правильной категоризации страницы. У фреймворка Angular есть Meta service в @angular/platform-browser, он позволяет нам устанавливать метатеги в зависимости от наших компонентов. Это очень полезно с точки зрения SEO (для продвижения страниц в поисковике), а также при шэринге страницы в социальных сетях. Мета-сервис очень прост в использовании, просто импортируйте Meta из @angular/platform-browser и внедрите его в наш компонент.
import { Meta } from "@angular/platform-browser"
@Component({
...
})
export class BlogComponent implements OnInit {
constructor(private meta: Meta)
{...}
ngOnInit() {
this.meta.updateTag({name: "title", content: ""})
this.meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
this.meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
this.meta.updateTag({name: "site", content: "My Site"})
}
}Благодаря этому наш BlogComponent может отображаться в Facebook, Twitter и т. д., демонстрируя сам компонент, его заголовки, изображения и описания, но имейте ввиду - для шэринга еще придется озадачится server-side рендерингом.
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
Мы можем получить URL текущего окна браузера, используя сервис Location. В зависимости от того, какая LocationStrategy используется, Location будет сохраняться либо по пути URL, либо по сегменту хеша URL. С помощью Location мы можем перейти к URL-адресу, перейти вперед в истории, вернуться назад в истории, изменить URL-адрес браузера, заменить верхний элемент в стеке истории. Мы внедряем Location service из CommonModule для его использования.
import { Location } from "@angular/common"
@Component({
...
})
export class AppComponent {
constructor(private location: Location)
{...}
navigateTo(url) {
this.location.go(url)
}
goBack() {
this.location.back()
}
goForward() {
this.location.forward()
}
}
5. DOCUMENT
Иногда мы хотим получить объект document, чтобы мы могли работать с DOM из нашего Angular-приложения. DOCUMENT обеспечивает как раз это. DOCUMENT — это DI-токен, отвечающий за основной контекст рендеринга. В браузере это DOM Document. DOCUMENT обрабатывает операции с DOM независимо от среды. Примечание! DOCUMENT может быть недоступен, если контексты приложения и рендеринга не совпадают (например, при запуске приложения в Web Worker). Допустим, у нас есть элемент в нашем HTML:
<canvas id="canvas"></canvas>
Мы можем получить доступ к HTML-элементу canvas, внедрив DOCUMENT и вызвав getELementById(). Это лишь пример. На практике лучше получать canvas через ElementRef. Предупреждение: действуйте осторожно! Взаимодействие с DOM напрямую опасно и может повлечь за собой XSS-атаки.
6. Декоратор @Attribute
В нашем Angular-приложении мы использовали в основном компоненты, модули и декораторы директив. Но у нас также есть декоратор @Attribute, который позволяет нам передавать статическую строку без затрат на проверку обнаружения изменений. Значения декоратора @Attribute проверяются один раз и никогда не перепроверяются снова. Они используются аналогично декоратору @Input:
@Component({
...
})
export class BlogComponent {
constructor(@Attribute("type") private type: string )
{...}
}
7. HttpInterceptor
Это очень мощная функция в Angular. Он перехватывает http-запросы и обрабатывает их. Большинство перехватчиков будут преобразовывать исходящий запрос, прежде чем передавать его следующему перехватчику в цепочке, вызывая next.handle(transformedReq). В редких случаях перехватчик может «пожелать» полностью обработать запрос самостоятельно и не передавать его дальше по цепочке. Такое поведение допустимо. HttpInterceptor может быть использован для таких вещей, как: -аутентификация; -кэширование; -фейковый бэкенд; -преобразование URL; -изменение хэдеров; Перехватчик прост в использовании: сначала создайте сервис и реализуйте интерфейс HttpInterceptor:
@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
constructor() {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
...
}
}Затем зарегистрируйте его в модуле:
@NgModule({
...
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MockBackendInterceptor,
multi: true
}
]
...
})
export class AppModule {}Готово! Вы великолепны!
8. AppInitializer
Иногда мы хотим, чтобы при старте нашего Angular-приложения запускался какой-либо фрагмент кода. Например, для загрузки некоторых настроек, кэша, конфигураций или выполнения каких-либо проверок. Токен AppInitialzer поможет нам с этим. APP_INITIALIZER — это функция, которая будет выполняться при инициализации приложения. Она очень проста в использовании. Допустим, мы хотим, чтобы некая функция runSettings выполнялась при запуске Angular-приложения:
function runSettingsOnInit() {
...
}Мы переходим к нашему основному модулю – AppModule – и добавляем его в раздел провайдеров в декораторе NgModule:
@NgModule({
providers: [
{ provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
]
})9. Bootstrap Listener
Помимо AppInitializer, у фреймворка Angular есть функция, которая позволяет отловить момент инициализации компонента. Она называется APP_BOOTSTRAP_LISTENER. Все callback'и, предоставляемые через этот токен, будут вызываться для каждого загружаемого компонента. У нас есть много причин для наблюдения за инициализацией компонентов, например, модуль Router использует этот процесс для уничтожения и создания компонентов на основе route navigation. Чтобы использовать APP_BOOTSTRAP_LISTENER, мы добавляем его в раздел провайдеров в нашем AppModule с функцией callback:
@NgModule({
{
provide: APP_BOOTSTRAP_LISTENER, multi: true,
useExisting: runOnBootstrap
}
...
})
export class AppModule {}10. NgPlural
Плюрализация, то есть, склонение числительных и образование форм множественного числа – настоящая проблема в нашей сфере. Нам нужно всегда правильно определять, какие формы слов будут использоваться в нашем приложении, будут они единственного или множественного числа. Некоторые англоязычные сайты «выкручиваются», дописывая окончание «s» в скобках, например так:
1 component(s) removed 3 component(s) removed
Это «s» читатель сам должен мысленно удалить или добавить при чтении. Фреймворк Angular разобрался с этой проблемой в своей директиве NgPlural. NgPlural добавляет/удаляет поддеревья DOM, опираясь на имеющиеся числовые значения. Это сделано специально для правильной плюрализации. NgPlural позволяет отобразить правильный вариант в зависимости от переданного условия. Чтобы использовать эту директиву, вы должны предоставить элемент контейнера, который устанавливает атрибут [ngPlural] в выражение-переключатель. Внутренние элементы с [ngPluralCase] будут отображаться на основе их выражения:
<p [ngPlural]="components">
<ng-template ngPluralCase="=1">1 component removed</ng-template>
<ng-template ngPluralCase=">1">{{components}} components removed </ng-template>
</p>Как видите, в данном примере используется директива NgPlural, чтобы избавиться от «множественночисленной» буквы «s» при отображении количества удаленных компонентов. В жизни это будет выглядеть так:
// if 1 component 1 component removed // if 5 components 5 components removed
Вместо вывода
«Вы уже чувствуете себя старым?» - в шутку спрашивает автор материала. А потом отмечает, что у всех нас есть пробелы в знаниях, часть из них описана выше. Angular огромен и сложен, считает Чидуме, и предлагает заглянуть в документацию этого фреймворка, чтобы найти другие функции, о которых раньше не говорили и не писали. Что ж, возможно, как раз у вас получится сделать это!