Зачастую при создании SPA-приложения с помощью фреймворка Angular имеется шаблон сайта, представленный в виде статической html страницы. Задача разработчика состоит в том, чтобы разбить этот макет на отдельные компоненты, сохранив внешний вид сайта неизменным. Именно этим мы сейчас и займемся.
Начнем перенос шаблона сайта Bootstrap 4 на Angular. Используемый шаблон сайта можно найти в статье Базовый шаблон сайта Bootstrap 4.
Для начала подключим библиотеки bootstrap к проекту. Для этого скачиваем последнюю актуальную на данный момент версию 4.0.0-beta.2-dist с официального сайта Bootstrap.
Добавляем файлы bootstrap.min.css и bootstrap.bundle.min.js в папку библиотек Angular2\wwwroot\dist\
Теперь для удобства дальнейшей настройки сайта необходимо зайти в свойства проекта.
Выберем вкладку Ресурсы (Resources) и нажмем на ссылку создания нового файла ресурсов.
Теперь создадим набор свойств, которые будут подставляться в макет. Это необходимо для дальнейшего удобного поддержания работы сайта. Обратите внимание, что необходимо изменить модификатор доступа со значение Internal на Public в выпадающем списке.
Теперь изменим файл макета:
Angular2\Views\Shared\_Layout.cshtml
Приведем содержимое файла к следующему виду:
Теперь преступим к созданию компонентов Angular. Для начала выделим три самых крупных компонента:
Header (синий) Content (оранжевый) Footer (зеленый)
Подробнее о создании компонентов можно прочитать в статье Создание нового компонента Angular.
Итак, мы получаем три больших компонента. Создадим компоненты header и footer. Содержимое Content разместим на странице home.
Таким образом мы получаем следующую структуру приложения
После этого не забываем регистрировать компоненты в app.shared.module.ts
Содержимое контента разместим в файле home.component.html
И наконец изменим файл app.component.html следующим образом
Запустим приложение чтобы проверить результат
Как мы можем увидеть получился идентичный результат исходному. Но это только самый начальных этап. Нам необходимо выполнять декомпозицию компонентов до тех пор, пока не останутся неделимые элементарные элементы. Кроме того, необходимо будет добавить логику работы приложения. Исходный код приложения можно посмотреть в репозитории github.
