Particle1Particle2Particle3Particle4Particle5
HWdTech / Блог /

10 полезных фич

Angular, которые вы,

вероятно, не использовали

Возможно, вы написали уже много приложений на Angular и уверены, что все о нем знаете . Чтобы быть уверенным на 100% - читайте дальше!

February 3, 2020
#AngularJS #front-end #JavaScript # useful tips

Reading time: 7 min

Переводим для вас материал авторства Чидуме Ннамди, разработчика-фрилансера из Нигерии, который опубликовал данный обзор на 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:

QUOTE
<canvas id="canvas"></canvas>

Мы можем получить доступ к 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: true
8 }
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: runOnBootstrap
5 }
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 огромен и сложен, считает Чидуме, и предлагает заглянуть в документацию этого фреймворка, чтобы найти другие функции, о которых раньше не говорили и не писали. Что ж, возможно, как раз у вас получится сделать это!

Читайте также

Наши статьи!

Подписка

Раз в месяц мы делаем рассылку с анонсом новых кейсов и статей, опубликованных на сайте.

* - обязательное поле

Гарантируем - никакого спама. Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой в отношении обработки персональных данных.