Angular 1.5 компоненты на TypeScript

Angular 1.5 дал нам возможность совершить в какой-то степени плавный переход с Angular1.x на Angular 2.
Так, я сейчас занимаюсь переписыванием существующих модулей в компоненты.
Думаю я не одна этим занимаюсь, поэтому захотелось поделиться.

С чего начнем?

Перво на перво пришлось подумать над структурой — какие компоненты у меня будут родительскими, какие дочерними.
В контроллере родительского я разместила сохранение данных, полученных с сервиса, в общие переменные. Там же и общие функции.
Сами запросы к серверу вынесены в отдельный сервис — Friends.

Писать компоненты я решила на TypeScript (на es6). Почему было принято такое решение, можно прочесть в посте Миграция с CoffeeScript на TypeScript
Впрочем, typeScript для меня еще пока довольно неосновательно изученная вещь,так что пример получился скорее на тему es6 🙂

Да будет пример

Допустим, мы хотим реализовать функционал запросов на дружбу с юзером, которые могут быть входящими и исходящими.
Значит в контроллере родительского компонента будем получать входящие и исходящие заявки, которые нам понадобятся как в родительском компоненте, так и в дочернем. Там же и общие функции, например, вывод окна приглашения друзей.
Впрочем, пусть вас не смущают компоненты без контроллеров — и такое бывает.

Родительский компонент в примере — по сути табы. А дочернии — их содержимое.

Итак, в шаблоне мы организуем табы. Рядом с табой «Входящие» выведем количество не принятых запросов на дружбу.
Переход будет осуществляться благодаря angular-ui-router.
То есть компонент у нас будет роутерный.
В роутере:

А в каком-нибудь шаблоне мы вполне можем вставить наш компонент с указанием атрибута tab, в таком случае у нас откроется соответствующая таба, да при этом в данном случае в попапе.

<requests-tabs tab="inbox_request"></requests-tabs>

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

Еще из интересного — $onInit(). Это один из методов жизненного цикла компонента.

Он срабатывает при инициализации компонента. Когда выполнены все контроллеры и привязки.

Дочерний компонент

Далее рассмотрим дочерний компонент на примере входящих:

В функции AcсeptAll() мы будет очищать массив входящих — принимать все заявки.
Нам важно, что в родительском компоненте используется тот же самый массив, так как при принятии заявок, в табах (шаблон родительского компоненты) должно исчезнуть количество не принятых заявок.

Как видите сами заявки мы получаем через опцию require. Значок ^^ говорит о том, что мы обращаемся к родительскому элементу.
С соседями такой трюк, кстати, не прокатит.

Полезные ссылки

На этом мой пример подходит к концу, а я хотела бы поделиться информацией, которая мне очень помогла. Я решила ее не освещать, так как это хорошо написано на нижеследующих ресурсах:

NG 1.5 from the trenches
One-way data-binding in Angular 1.5
Exploring Angular 1.5: Lifecycle Hooks
Advanced Angular 1.x: Component Communication with Require
Creating an AngularJS 1.5 component

Хотите быть в курсе новых статей?