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

Продолжим создание нашего приложения. Первая часть доступна по ссылке Создание Angular 5 приложения. Для того, чтобы сделать более функциональное приложение нам необходимо создать классы данных, удалить жестко зафиксированные данные из кода. Этим мы сейчас и займемся. Для начала создадим класс модели данных card.type.ts в папке shared. Здесь мы указываем все необходимые переменные.

Теперь необходимо создать два недостающих класса CardType и CardCity

Теперь применим класс объявления. Перейдем в файл home.component.ts и добавим свойства массив объявлений, не забыв импортировать класс объявления.

Изменим файл представления. Добавим вывод всех элементов массива с помощью цикла *ngFor. А в случае, если в массиве не будет элементов, будем выводить информационное сообщение.

Теперь в конструкторе создадим один элемент массива.

После этого на странице у нас отобразиться одно объявление, но все еще оно будет содержать неправильные данные. Для того, чтобы передать данные для начала изменим вывод объявлений так, чтобы объект передавался в качестве параметра в компонент card-summary

Затем идем в сам компонент объявления и импортируем библиотеку Input. Добавляем входную переменную card. И наконец меняем правило навигации, чтобы выполнялся переход по идентификатору из переменной card.

И наконец меняем отображение данных на карте в файле card-summary.component.html

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

Обратите внимание, что здесь мы делаем несколько интересных операций. Во-первых, мы используем ActivatedRoute для получения идентификатора из параметра URL.

Во-вторых, мы наследуем событие OnInit, которое происходит при загрузке компонента.

Ну и естественно нам необходимо поправить представление в соответствии с моделью.

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

В представлении нам понадобится везде изменить обращение не напрямую к переменной компонента, а к свойству модели. Например  [(ngModel)]=»title» заменим на [(ngModel)]=»card.title», и по аналогии для всех остальных полей ввода.

Теперь давайте приступим к настройке взаимодействия нашего фронтэнда с бекендом. Нам необходимо настроить обращение к базе данных для получения и отправки данных. Для начала создадим файл сервиса объявления.

Здесь мы определили три метода, которые будем вызвать для обращения к базе данных. Теперь регистрируем данный сервис в app.shared.module.ts. Импортируем компонент

И добавляем его в список провайдеров

Теперь добавим вызов нашего сервиса в компоненты, на забыв его импортировать в них.

home.component.ts

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

card-detail.component.ts

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

card-add.component.ts

И наконец здесь мы вызываем добавление нового объявления в базу данных передавая полученные с формы данные, а затем перезаписываем результат в локальную переменную (для получения идентификатора)

Контроллер C# и работа с БД

Приступим к созданию бекенда. Создадим в корне проекта папку Models, в которую добавим класс Card.cs, в котором перечислим все поля рекламного объявления. Будем сразу проектировать модель с учетом использование ORM фреймворка EntityFramework 6.

Обратите внимание, что для успешной десериализации данных нам необходимо указывать с помощью атрибута [DataMember(Name = «id»)] имена свойств, как в typescript классе.

Также добавим вспомогательные классы справочники City и Type.

City.cs

Type.cs

Теперь подключаем библиотеку EntityFramework 6 из nuget. Заходим в панель управления пакетами решения nuget.

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

Обратите внимание, что стандартная библиотека EntityFramework для .net framework не будет работать в .net core приложении. Нам необходимо установить три библиотеки:

  • EntityFrameworkCore
  • EntityFrameworkCore.SqlServer
  • EntityFrameworkCore.Tools

Теперь приступим к созданию класса контекста, позволяющего настроить подключение к БД и в дальнейшем взаимодействовать с ней. Для этого в папке моделей создадим класс AdsminiContext. Он должен наследовать класс DbContext из пространства имен Microsoft.EntityFrameworkCore.

Теперь перейдем к созданию контроллера. За основу мы можем взять автоматически сгенерированный контроллер EF. Для его создания зайдем в папку контроллеров и в контекстном меню выберем добавить контроллер.

Выбираем использование MVC сонтроллера EntityFramework

После этого выбираем класс модели, созданный ранее контекст данных, создание представлений можно отключить.

Из сгенерированного контроллера удалим не нужные нам методы, оставим только конструктор, index, details и два Create.

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

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

Заключение

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

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