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

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

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

CityController
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Adsmini.Models;
 
namespace Adsmini.Controllers
{
    [Produces("application/json")]
    [Route("api/city")]
    public class CityController : Controller
    {
        private readonly AdsminiContext _context;
 
        public CityController()
        {
            _context = new AdsminiContext();
        }
 
        [HttpGet("getall")]
        public List<City> GetCities()
        {
            var cities = _context.Cities.ToList();
            return cities;
        }
 
        [HttpGet("get/{id}")]
        public IActionResult GetCity([FromRoute]int id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
 
            var city = _context.Cities.Find(id);
 
            if (city == null)
            {
                return NotFound();
            }
 
            return new ObjectResult(city);
        }
    }
}
TypesController
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Adsmini.Models;
 
namespace Adsmini.Controllers
{
    [Produces("application/json")]
    [Route("api/type")]
    public class TypesController : Controller
    {
        private readonly AdsminiContext _context;
 
        public TypesController()
        {
            _context = new AdsminiContext();
        }
 
        [HttpGet("getall")]
        public List<Models.Type> GetTypes()
        {
            var types = _context.Types.ToList();
            return types;
        }
 
        [HttpGet("get/{id}")]
        public IActionResult GetType([FromRoute]int id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
 
            var type = _context.Types.Find(id);
 
            if (type == null)
            {
                return NotFound();
            }
 
            return new ObjectResult(type);
        }
    }
}

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

import { CardType } from '../../components/shared/card-type.type';
import { CardCity } from '../../components/shared/card-city.type';

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

getAllTypes() {
    return this.http.get("api/type/getall/")
        .map(response => response.json() as CardType[])
        .toPromise();
}
 
getType(id: number) {
    return this.http.get(`api/type/get/${id}`)
        .map(response => response.json() as CardType)
        .toPromise();
}
 
getAllCities() {
    return this.http.get("api/city/getall/")
        .map(response => response.json() as CardCity[])
        .toPromise();
}
 
getCity(id: number) {
    return this.http.get(`api/city/get/${id}`)
        .map(response => response.json() as CardCity)
        .toPromise();
}

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

card-add.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { NgModel } from '@angular/forms';
import { Card } from '../../shared/card.type';
import { CardService } from '../../shared/card.service';
import { CardType } from '../../shared/card-type.type';
import { CardCity } from '../../shared/card-city.type';
 
@Component({
    selector: 'card-add-component',
    templateUrl: './card-add.component.html'
})
export class CardAddComponent implements OnInit {
    
    card: Card;
    types: CardType[];
    cities: CardCity[];
 
    constructor(private cardService: CardService, private router: Router) {
        this.card = new Card(this.cardService);
    }
 
    ngOnInit(): void {
        this.cardService.getAllTypes()
            .then(types => {
                this.types = types;
            });
 
        this.cardService.getAllCities()
            .then(cities => {
                this.cities = cities;
            });
    }
 
    add() {
        this.cardService.addCard(this.card)
            .then(card => {
                this.card = card;
                this.router.navigate(["card", card.id]);
            });
        
    }
}

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

<div class="alert alert-info" role="alert" [hidden]="addForm.form.valid">
    Заполните все обязательные поля.
</div>
 
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Добавить объявление</h3>
    </div>
    <div class="card-body">
        <div class="card-text">
            <form (ngSubmit)="add()" #addForm="ngForm">
                <div class="form-group">
                    <label for="title"><strong>Заголовок*</strong></label>
                    <input type="text"
                           class="form-control"
                           id="title"
                           name="title"
                           required
                           [(ngModel)]="card.title"
                           placeholder="Введите короткий заголовок объявления (50 символов)...">
                </div>
 
                <div class="form-group">
                    <label for="text"><strong>Краткое описание*</strong></label>
                    <input type="text"
                           class="form-control"
                           id="text"
                           name="text"
                           required
                           [(ngModel)]="card.text"
                           placeholder="Введите короткое описание объявления (140 символов)...">
                </div>
 
                <div class="form-group">
                    <label for="type"><strong>Категория*</strong></label>
                    <select class="form-control"
                            id="type"
                            name="type"
                            required
                            [(ngModel)]="card.typeid">
                        <option *ngFor="let type of types" [value]="type.id">{{type.name}}</option>
                    </select>
                </div>
 
                <div class="form-group">
                    <label for="longText">Подробное описание</label>
                    <input type="text" 
                           class="form-control" 
                           id="longText" 
                           name="longText" 
                           [(ngModel)]="card.longText"
                           placeholder="Введите подробное описание...">
                </div>
 
                <div class="form-group">
                    <label for="price">Цена</label>
                    <input type="number" 
                           class="form-control" 
                           id="price" 
                           name="price" 
                           [(ngModel)]="card.price"
                           placeholder="0.00">
                </div>
 
                <div class="form-group">
                    <label for="name">Имя</label>
                    <input type="text" 
                           class="form-control" 
                           id="name" 
                           name="name" 
                           [(ngModel)]="card.name"
                           placeholder="Введите Ваше имя...">
                </div>
 
                <div class="form-group">
                    <label for="phone">Контактный телефон</label>
                    <input type="tel" 
                           class="form-control" 
                           id="phone" 
                           name="phone" 
                           [(ngModel)]="card.phone"
                           placeholder="+7 (999) 999-9999">
                </div>
 
                <div class="form-group">
                    <label for="email">Электронная почта</label>
                    <input type="email" 
                           class="form-control" 
                           id="email" 
                           name="email" 
                           [(ngModel)]="card.email"
                           placeholder="mail@domen.com">
                </div>
 
                <div class="form-group">
                    <label for="site">Сайт</label>
                    <input type="url" 
                           class="form-control" 
                           id="site" 
                           name="site" 
                           [(ngModel)]="card.site"
                           placeholder="https://shwanoff.ru/">
                </div>
 
                <div class="form-group">
                    <label for="city">Город</label>
                    <select class="form-control"
                            id="city"
                            name="city"
                            [(ngModel)]="card.cityid">
                        <option *ngFor="let city of cities" [value]="city.id">{{city.name}}</option>
                    </select>
                </div>
 
                <div class="form-group">
                    <label for="tags">Теги</label>
                    <input type="text" 
                           class="form-control" 
                           id="tags" 
                           name="tags" 
                           [(ngModel)]="card.tags"
                           placeholder="Введите теги через запятую...">
                </div>
 
                <button type="submit" 
                        class="btn btn-primary float-right" 
                        [disabled]="!addForm.form.valid">
                    Добавить
                </button>
            </form>
        </div>
    </div>
</div>

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

CardController.cs
using Adsmini.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System;
using System.Linq;
 
namespace Adsmini.Controllers
{
    [Produces("application/json")]
    [Route("api/card")]
    public class CardController : Controller
    {
        private readonly AdsminiContext _context;
 
        public CardController()
        {
            _context = new AdsminiContext();
        }
 
        [HttpGet("getall")]
        public IActionResult Index()
        {
            var cards = _context.Cards
                .Include(card => card.Type)
                .Include(card => card.City)
                .Take(200)
                .ToList();
 
            return new ObjectResult(cards);
        }
 
        [HttpGet("get/{id}")]
        public IActionResult Details(int id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
 
            var card = _context.Cards
                .Include(c => c.Type)
                .Include(c => c.City)
                .Where(c => c.Id == id)
                .SingleOrDefault();
 
            if (card == null)
            {
                return NotFound();
            }
 
            return new ObjectResult(card);
        }
 
        [HttpPost("add")]
        public IActionResult Add([FromBody]Card card)
        {
            if (card == null)
            {
                return NotFound();
            }
 
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
 
            card.Date = DateTime.UtcNow;
            _context.Cards.Add(card);
            _context.SaveChanges();
 
            return new ObjectResult(card);
        }
    }
}

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

Type.cs
using System.Collections.Generic;
using System.Runtime.Serialization;
 
namespace Adsmini.Models
{
    /// <summary>
    /// Категория.
    /// </summary>
    [DataContract(Name = "type")]
    public class Type
    {
        /// <summary>
        /// Уникальный идентификатор объявления.
        /// </summary>
        [DataMember(Name = "id")]
        public int Id { get; set; }
 
        /// <summary>
        /// Название.
        /// </summary>
        [DataMember(Name = "name")]
        public string Title { get; set; }
 
        /// <summary>
        /// Количество объявлений данного типа.
        /// </summary>
        [DataMember(Name = "count")]
        public int Count { get { return Cards?.Count ?? 0; } }
 
        /// <summary>
        /// Объявления.
        /// </summary>
        public virtual ICollection<Card> Cards { get; set; }
 
        /// <summary>
        /// Приведение объекта к строке.
        /// </summary>
        /// <returns> Название категории. </returns>
        public override string ToString()
        {
            return Title;
        }
    }
}

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

TypesController.cs
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Adsmini.Models;
using Microsoft.EntityFrameworkCore;
 
namespace Adsmini.Controllers
{
    [Produces("application/json")]
    [Route("api/type")]
    public class TypesController : Controller
    {
        private readonly AdsminiContext _context;
 
        public TypesController()
        {
            _context = new AdsminiContext();
        }
 
        [HttpGet("getall")]
        public List<Models.Type> GetTypes()
        {
            var types = _context.Types
                .Include(type => type.Cards)
                .ToList()
                .OrderByDescending(type => type.Count)
                .ToList();
 
            return types;
        }
 
        [HttpGet("get/{id}")]
        public IActionResult GetType([FromRoute]int id)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
 
            var type = _context.Types.Find(id);
 
            if (type == null)
            {
                return NotFound();
            }
 
            return new ObjectResult(type);
        }
    }
}

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

type.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { CardType } from '../card-type.type';
import { CardService } from '../card.service';
 
@Component({
    selector: 'type-component',
    templateUrl: './type.component.html'
})
export class TypeComponent implements OnInit {
    
    @Input() title: string;
    items: CardType[];
 
    constructor(private cardService: CardService) {
        
    }
 
    ngOnInit(): void {
        this.cardService.getAllTypes()
            .then(types => {
                this.items = types;
                console.log(this.items);
            });
    }
}
type.component.html
<div id="types">
    <div class="card">
        <div class="card-header">
            <a href="#">{{title}}</a>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" *ngFor="let item of items">
                {{item.name}}
                <span class="badge badge-primary badge-pill">{{item.count}}</span>
            </li>
        </ul>
    </div>
</div>

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

[HttpGet("getbytype/{id}")]
public IActionResult Filtered(int id)
{
    var cards = _context.Cards
        .Where(card => card.TypeId == id)
        .Include(card => card.Type)
        .Include(card => card.City)
        .Take(200)
        .ToList();
 
    return new ObjectResult(cards);
}

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

getCardsByType(id: number) {
    return this.http.get(`api/card/getbytype/${id}`)
        .map(response => response.json() as Card[])
        .toPromise();
}

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

{ path: 'type/:id', component: HomeComponent },

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

getCards(id: number): void {
    this.router.navigate(["type", id]);
}

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

<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" *ngFor="let item of items" (click)="getCards(item?.id)">

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

ngOnInit() {
    this.route.params.subscribe(params => {
        let id = +params["id"];
 
        if (id) {
            this.cardService.getCardsByType(id)
                .then(cards => {
                    this.cards = cards;
                });
        } else {
            this.cardService.getAllCards()
                .then(cards => this.cards = cards);
        }
    });
}

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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