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