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

Предыдущие статьи:

Продолжаем добавлять функциональность нашему приложению. Создаем контроллеры для работы со справочниками категорий объявлений и городов. Данные контроллеры должны позволять получить все элементы справочника или отдельный элемент по его идентификатору.

CityController

TypesController

Теперь перейдем в файл card.service.ts и добавим методы вызова нашего серверного кода на языке C# из angular. Для этого для начала импортируем классы города и категории

И добавим соответствующие методы для получения данных

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

card-add.component.ts

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

Теперь добавим реальный функционал компоненту всех категорий type.component. Для этого для начала нам нужно будет изменить контроллер C#, так чтобы EntityFramework динамически подгружал связанные записи.

CardController.cs

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

Type.cs

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

TypesController.cs

Ну и наконец изменим сам компонент.

type.component.ts

type.component.html

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

Добавим метод для обращения к базе данных в файле card.service

Добавим новое правило навигации в файле app.shared.module.ts

Добавим в файле type.component.ts метод для перехода на фильтрованные объявления

Ну и соответственно изменим представление компонента, чтобы при нажатии на элемент вызывался данный метод

Больше всего изменений придется сделать в файле home.component.ts. Здесь мы добавляем проверку. Если был передан идентификатор, то выводим фильтрованные объявления. Иначе выводим все.

Теперь давайте перейдем к публикации приложения на хостинг. Я использую windows хостинг reg.ru. После покупки хостинга и домена должно пройти некоторое время,  пока данные обновятся в dns серверах. Обычно достаточно несколько часов, но я предпочитаю выждать сутки.

Авторизуемся на сайте провайдера и переходим в меню мои хостинг и услуги

Далее в таблице нажимаем на ссылку войти в столбце Панель управления

В панели управления сайта выбираем ftp доступ

Добавляем нового пользователя

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

Теперь идем в Visual Studio и начинаем настраивать публикацию.

В контекстном меню проекта выбираем пункт опубликовать

Выбираем FTP публикацию и нажимаем кнопку опубликовать (publish)

Задаем настройки подключения и нажимаем сохранить. После этого будет выполнена компиляция приложения о все необходимые файлы будут добавлены на сервер.

Если все настройки были выполнены правильно, то приложение будет доступно для использования.

Заключение

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

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