Для начала работы с Angular2 и перехода на него нужно решить в общем и целом всего несколько вещей — как формировать шаблоны, как получать данные и роутить контроллеры и как собственно потом это все выложить на сервер. По очереди разберем эти вопросы — и самым первым — вопрос дизайна и адекватности шаблонов, так как чтобы мы потом не делали — если работа выглядит «говняшкой» — то это говняшка.
Модель
Сразу вынесем модель — для демопримера чуть модифицируем пример официального сайта (в эту модель же мы потом и вставим загрузку из php нужных нам данных)
Контроллер с шаблонов внутри
Все в принципе будет работать — только очень уж неудобно отдавать на верстку такие файлы — одно неверное движение или еще с десяток полей и дивов — и наш шаблон перерастет разумные пределы
Контроллер с вынесенным шаблоном и gulp
Вынесение одного шаблона — достаточно простая задача — просто напишите путь к файлу…
gulp
Если у Вас как у меня отдельная папка для «треша» девелоперского проекта (с собранным js подальше от ts и всякими билд тасками), то не забудьте поставить наблюдателя над этими шаблонами.
Директивы в Angular2
Директива теперь — это тоже маленький компонент (логично и отлично!) Добавляем в базовый компонент его директиву и в шаблон вызов. А сам компонентик «детальной информации» — он на самом деле такой же почти как и обычный, только надо дописать что входит из @Input()
«Директива» StoreItemComponent
template
Совсем для красоты (ну и если вам надоело куча вложенных span как часто случалось с первым angular) заменяем div на новый тег — template