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