Angular — это фреймворк позволяющий быстро и удобно разрабатывать одностраничные веб приложения. В своей основе он использует язык программирования TypeScript. Давайте рассмотрим процесс создания процесс создания SPA-приложения (Single Page Application) с помощью данного фреймворка от идеи до публикации.

Данная статья достаточно объемна, поэтому будет разбита на несколько частей. Перед прочтением я рекомендую ознакомится с кратким описанием особенностей языка TypeScript  в статье Немного о TypeScript. Для разработки будет использоваться  Angular 5, Visual Studio 2017.

Итак, нашей целью является разработка простого приложения представляющее собой доску объявлений, куда можно публиковать короткие объявления. Приступ. Перед началом работы не забываем, что предварительно необходимо установить node.js.

Создаем новый проект

Выбираем тип приложения Angular

Необходимо подождать, пока будут загружены все библиотеки из nuget. После этого собираем проект, чтобы проверить корректность всех полученных библиотек и наличия всех необходимых компонентов системы. В результате мы видим стандартный шаблон приложения.

Не забудьте проверить файлы конфигурации приложения. Они должны выглядеть примерно следующим образом. Удалим лишнее и добавим недостающее, чтобы получить следующий вид:

Package.json

Tsconfig.json

Теперь нам нужно подготовить html шаблон страницы, на основе которой будет строиться приложение. Будем использовать css фреймворк bootstrap 4 версии. Внешний вид макета страницы будет следующий:

Исходный код страницы будет подробнее рассмотрен позже, при выделении отдельных компонентов.

Теперь приступим к переносу данного шаблона на Angular. Зайдем в файл _Layout.cshtml и изменим его структуру.

Также очистим проект от лишних данных, созданных для демонстрации работы приложения при создании. Подробнее об этом можно прочитать в статье Очистка стандартного решения Angular 2 на базе ASP.NET Core.

Теперь для проверки перенесем все содержимое страницы в home компонент, чтобы проверить работу всех библиотек. Просто копируем все содержимое между тегами <body> в файл Adsmini\ClientApp\app\components\home\home.component.html. Файлы таблиц стилей, скриптов и изображения помещаем в папку Adsmini\wwwroot\dist\ и меняем ссылки в соответствии с этим расположением файлов. Запускаем приложение чтобы проверить работу.

Обратите внимание, если у вас возникает ошибка с кодом TS2339 TypeScript (TS) Property does not exist on type, то вам необходимо зайти в файл Adsmini\ClientApp\boot.server.ts и изменить строчку с ошибкой следующим образом:

Теперь нам нужно приступить к декомпозиции компонентов на более мелкие части. Подробнее про создание компонентов можно прочитать в статье Создание нового компонента Angular и Создание базового макета Angular на основе статичной html страницы.

Для начала изменим файл app.component.html

Здесь мы задаем статическое содержимое страницы, которое не будет меняться при переходе с одной страницы на другую. Изменяемое содержимое будет размещаться в компоненте <router-outlet></router-outlet> в зависимости от того, на какую страницу мы перешли. Давайте теперь создадим все недостающие компоненты страницы.

Заголовок страницы (header)

Выделим заголовок в отдельный компонент header. Для этого создадим следующую структуру папок:

Header.component.ts

Header.component.html

Обратите внимание, что мы объявляем переменную logoPath, на которую потом ссылаемся в разметке <img [src]=»logoPath»>. Удалим соответствующий html код из home.component.

Ну и наконец зарегистрируем наш компонент в app.shared.module.ts

Создание компонента Описание (description)

description.component.ts

description.component.html

Обратите внимание, что здесь мы выводим значение переменной content обращаясь к ней {{content}}.

Создание компонента Категория (type)

type.component.ts

type.component.html

Обратите внимание, что здесь мы создаем компонент, который принимает значение в переменную, а кроме того содержит массив элементов, который выводится циклически в виде списка. В дальнейшем мы изменим данный компонент с использованием отдельного класса, чтобы выводить не только название категории, но и количество записей в ней.

Создание компонента Поиск (search)

search.component.ts

search.component.html

В данном компоненте при нажатии на кнопку мы получаем значение из поля ввода #searchInput и передаем его в компонент для дальнейшей обработки.

Создание компонента Подвал (footer)

footer.component.ts

footer.component.html

Создание компонента Карточка объявления (Card-summary)

Обратите внимание, что так как с карточками объявлений у нас будут связаны несколько представлений, мы создаем отдельную папку, в которую добавим все связанные компоненты.

card-summary.component.ts

card-summary.component.html

Теперь нам необходимо добавить компонент подробного объявления, чтобы при нажатии на объявление отображалась вся информация доступная в объявлении.

Компонент детальной информации объявления (card-detail)

card-detail.component.ts

card-detail.component.html

После всех манипуляций и переноса кода в отдельные компоненты в home.component.html останется только один компонент, и тот в дальнейшем будет изменен.

Теперь нам необходимо настроить навигацию, чтобы при нажатии на объявление отображалась карточка с подробной информацией. Для этого добавим строку в RouterModule файла app.shared.module.ts

Теперь если в браузере вбить адрес http://localhost:64080/card/1234, то отобразится окно с подробным представлением объявления

Добавим переход на страницу подробностей объявления при нажатии на объявление на главной странице. Для этого изменим компонент card-summary-component следующим образом

А также добавим событие нажатия на карту в html файле этого же компонента

Компонент формы добавления объявления (card-add)

Ну и наконец создадим компонент для добавления новых объявлений. Для начала изменим компонент с описанием приложения, добавив туда кнопку для перехода на форму добавления объявления.

description.component.ts

description.component.html

app.shared.module

Добавим в RouterModule еще одно правило навигации

Теперь перейдем непосредственно к созданию компонента формы добавления нового объявления.

card-add.component.ts

card-add.component.html

При нажатии кнопки Добавить данные из полей передаются в соответствующие переменные компонента для дальнейшей обработки.

Заключение

На первом этапе разработки нами были созданы все необходимые для работы системы компоненты. Исходный код доступен в репозитории github. В следующей статье мы рассмотрим взаимодействие с хранилищем данных, использование классов и расширим функционал наших компонентов.

Продолжение в статье Создание Angular 5 приложения. Часть 2

 

shwan

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

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