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

 

shwan

Программист .NET

×
%d такие блоггеры, как: