Создание базового макета Angular на основе статичной html страницы

Зачастую при создании 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\

Add libs
Add libs

Теперь для удобства дальнейшей настройки сайта необходимо зайти в свойства проекта.

Project properties
Project properties

Выберем вкладку Ресурсы (Resources) и нажмем на ссылку создания нового файла ресурсов.

Add resouces
Add resouces

Теперь создадим набор свойств, которые будут подставляться в макет. Это необходимо для дальнейшего удобного поддержания работы сайта. Обратите внимание, что необходимо изменить модификатор доступа со значение Internal на Public в выпадающем списке.

Properties
Properties

Теперь изменим файл макета:

Angular2\Views\Shared\_Layout.cshtml

Приведем содержимое файла к следующему виду:

Layout
Layout

Теперь преступим к созданию компонентов Angular. Для начала выделим три самых крупных компонента:

Header (синий)
Content (оранжевый)
Footer (зеленый)
Select components
Select components

Подробнее о создании компонентов можно прочитать в статье Создание нового компонента Angular.

Итак, мы получаем три больших компонента. Создадим компоненты header и footer. Содержимое Content разместим на странице home.

Таким образом мы получаем следующую структуру приложения

App structure
App structure

header.component.html

header.component.html
header.component.html

header.component.ts

header.component.ts
header.component.ts

header.component.css

header.component.ts
header.component.ts

footer.component.html

footer.component.html
footer.component.html

footer.component.ts

footer.component.ts
footer.component.ts

footer.component.css

footer.component.css
footer.component.css

После этого не забываем регистрировать компоненты в app.shared.module.ts

app.shared.module.ts
app.shared.module.ts

Содержимое контента разместим в файле home.component.html

home.component.html
home.component.html

И наконец изменим файл app.component.html следующим образом

app.component.html
app.component.html

Запустим приложение чтобы проверить результат

result
result

Как мы можем увидеть получился идентичный результат исходному. Но это только самый начальных этап. Нам необходимо выполнять декомпозицию компонентов до тех пор, пока не останутся неделимые элементарные элементы. Кроме того, необходимо будет добавить логику работы приложения. Исходный код приложения можно посмотреть в репозитории github.