10 полезных функций Angular, которые вы упускали / Хабр

Если вы регулярно пишете приложения на Angular и потратили на это не одну сотню часов, вы, скорее всего, знаете об этих функциях. Но, всё же, чтобы убедиться — прочтите :)

Прежде чем мы перейдем к функциям Angular, стоит упомянуть один очень полезный инструмент. Bit (Github) позволяет с легкостью работать над Angular-компонентами вместе и делиться ими. От души рекомендую его для поддержания консистентного интерфейса, ускорения разработки и минимизации количества ошибок в коде.

Пример: Круговые загрузчики для Angular с bit.dev

1. Title

Тег title — это HTML-элемент, определяющий заголовок веб-страницы. Заголовки отображаются на странице результатов поиска (SERP) в виде кликабельного заглавия результата. Они очень важны для юзабилити, SEO и продвижения в соц. сетях.

Приложения на Angular берут заголовок из тега ... в index.html. По умолчанию, переход между компонентами в Angular этот заголовок не меняет.

Знаете ли вы, что заголовок можно задать отдельно из каждого компонента?

В Angular есть сервис Title в angular/platform-browser. Можно легко внедрить его в другие компоненты и использовать метод 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. А чтобы задавать их из компонентов, пригодится сервис Meta из 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() {
        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"})
    }
}

Теперь BlogComponent сможет корректно отображаться в Twitter, Facebook и т.д. При этом выводя описания, заголовки и изображения в правильном, читабельном виде.
Об это тоже слышали? Тогда вот кое-что поинтереснее.

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 (/example/page/), либо по части URL после решётки (#test/page/).

С помощью 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

Иногда необходимо получить модель документа, чтобы производить операции с DOM прямо из Angular приложения.

DOCUMENT как раз и служит этой цели. DOCUMENT — это DI-токен, представляющий основной контекст рендеринга. В браузере это DOM Document. Он обеспечивает операции с DOM независимо от среды выполнения.

Примечание: Document может быть недоступен в Application Context, если контексты Application и Rendering не совпадают (например, при запуске приложения в Web Worker).

Допустим, у нас есть какой-то HTML элемент:

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

Чтобы получить canvas HTMLElement внедряем DOCUMENT:

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}
}

Получаем HTMLElement canvas используя getElementById()

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}    renderCanvas() {
       this._doc.getElementById("canvas")
   }
}

Предупреждение: используйте DOCUMENT осторожно! Взаимодействие с DOM напрямую опасно и увеличивает риск XSS.

6. Декоратор @Attribute

В основном, в Angular приложении, используют декораторы Component, Module и Directive.

Однако, ещё есть декоратор Attribute, позволяющий передавать статическую строку без лишних затрат производительности, минуя проверку изменений.

Значения декоратора Attribute проверяются только один раз. Используется аналогично декоратору Input:

@Component({
   ...
})
export class BlogComponent {
   constructor(@Attribute("type") private type: string ) {}
}

7. HttpInterceptor

HttpInterceptor — очень мощная функция в Angular, позволяющая перехватывать запросы HttpRequest и обрабатывать их.

Большинство перехватчиков преобразуют исходящий запрос, прежде чем передать его следующему перехватчику в цепочке, вызывая next.handle(transformedReq).

В редких случаях, перехватчики могут полностью обработать запрос самостоятельно, а не делегировать оставшуюся часть цепочки дальше. Такое поведение разрешено.

HttpInterceptor чаще всего используется в:

Аутентификации
Кэшировании
Fake backend
Трансформации 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

По аналогии с AppInitialzer, в Angular есть функция позволяющая отслеживать загрузку какого-либо компонента. Это APP_BOOTSTRAP_LISTENER.

Все коллбеки, возвращаемые этим токеном, будут вызываться для каждого загружаемого компонента.

Применить эту функцию отслеживания начальной загрузки компонентов можно во многих случаях. Например, модуль Router использует её для уничтожения и создания компонентов на основе навигации по маршруту.

Для использования APP_BOOTSTRAP_LISTENER, необходимо добавить его в раздел провайдеров в AppModule с функцией обратного вызова:

@NgModule({
   {
       provide: APP_BOOTSTRAP_LISTENER, multi: true,
       useExisting: runOnBootstrap
   }
   ...
})
export class AppModule {}

10. NgPlural

Плюрализация — головная боль программистов. Задача грамматической корректировки словоформ в зависимости от употребления единственного / множественного числа возникает постоянно. Некоторые сайты просто используют для этого окончание (s). Например:

1 component(s) removed
3 component(s) removed

То есть читатель сам должен понять, какое число подразумевается :)

Angular предлагает решить эту проблему более цивилизованно, с помощью директивы NgPlural.

NgPlural добавляет или удаляет подветви DOM на основании числового значения. Для плюрализации — то, что нужно.

Чтобы использовать эту директиву необходимо задать атрибут [ngPlural] контейнеру элемента в виде выражения-переключателя. Внутренние элементы с атрибутом [ngPluralCase] отобразятся в зависимости от заданных условий:

<p [ngPlural]="components">
   <ng-template ngPluralCase="=1">1 component removed</ng-template>   
   <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>   
</p>

Теперь можно выбросить “(s)”. Директива NgPlural поможет вывести правильную словоформу в зависимости от значения. Итог:

// if 1 component
1 component removed

// if 5 components
5 components removed

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