Angular2: Шаблон в отдельном файле

Для начала работы с Angular2 и перехода на него нужно решить в общем и целом всего несколько вещей — как формировать шаблоны, как получать данные и роутить контроллеры и как собственно потом это все выложить на сервер. По очереди разберем эти вопросы — и самым первым — вопрос дизайна и адекватности шаблонов, так как чтобы мы потом не делали — если работа выглядит «говняшкой» — то это говняшка.

Модель

Сразу вынесем модель — для демопримера чуть модифицируем пример официального сайта (в эту модель же мы потом и вставим загрузку из php нужных нам данных)

Контроллер с шаблонов внутри

Все в принципе будет работать — только очень уж неудобно отдавать на верстку такие файлы — одно неверное движение или еще с десяток полей и дивов — и наш шаблон перерастет разумные пределы

Контроллер с вынесенным шаблоном и gulp

Вынесение одного шаблона — достаточно простая задача — просто напишите путь к файлу…

gulp

Если у Вас как у меня отдельная папка для «треша» девелоперского проекта (с собранным js подальше от ts и всякими билд тасками), то не забудьте поставить наблюдателя над этими шаблонами.

Директивы в Angular2

Директива теперь — это тоже маленький компонент (логично и отлично!) Добавляем в базовый компонент его директиву и в шаблон вызов. А сам компонентик «детальной информации» — он на самом деле такой же почти как и обычный, только надо дописать что входит из @Input()

«Директива» StoreItemComponent

template

Совсем для красоты (ну и если вам надоело куча вложенных span как часто случалось с первым angular) заменяем div на новый тег — template

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">