Angular 6 - Ускоренный курс MEAN Stack - Часть 3: Подключение Front-end к Back-end

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Подпишитесь на YouTube | Живая демонстрация | Код на GitHub

Создание приложения Angular 6 CRUD с нуля с помощью MongoDB, Express, Node.js и пользовательского интерфейса Material Design

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

Во второй части мы рассмотрели внутренний проект приложения стека MEAN. Мы реализовали сервер Node.js / Express, который подключен к экземпляру базы данных MongoDB. Мы реализовали конечные точки сервера, принимающие HTTP-запросы для создания, обновления, удаления и получения данных о проблемах.

Если вам нравится CodingTheSmartWay, подумайте о поддержке нас через Patreon. С вашей помощью мы сможем чаще выпускать руководства для разработчиков. Большое спасибо! Станьте покровителем!

В этой части мы реализуем класс обслуживания Angular в нашем интерфейсном проекте, который используется для подключения к серверной части. Затем этот сервис используется в различных компонентах нашего интерфейсного приложения. Реализация службы Angular для доступа к серверной части помогает нам сохранить наш код в СУХОМ состоянии, инкапсулируя логику, необходимую для доступа к серверной части REST, в один единственный класс.

Давайте еще раз взглянем на обзор стека MEAN:

Добавление услуги

Добавить службу в проект Angular легко, если снова использовать Angular CLI. Сначала перейдите в папку проекта внешнего интерфейса.

$ cd frontend

Затем выполните следующую команду Angular CLI в этой папке:

$ ng g s Issue

При выполнении этой команды в приложение добавляется новый файл issue.service.ts с новой реализацией службы по умолчанию. Эта команда также гарантирует, что этот новый класс обслуживания импортирован в app.module.ts:

import { IssueService } from './issue.service';

и добавлен в массив, который назначен свойству Provider декоратора @NgModule:

providers: [IssueService]

Это необходимо для использования IssueService в компонентах нашего приложения.

Реализация IssueService

Приступим к реализации класса обслуживания. Поскольку служба должна иметь доступ к серверной части путем отправки HTTP-запроса, нам сначала нужно включить HttpClient Angular в issue.service.ts, добавив следующий оператор импорта:

import { HttpClient } from '@angular/common/http';

Затем обязательно вставьте HttpClient в конструктор класса службы:

constructor(private http: HttpClient) {}

Получение проблем

Служба должна содержать служебные методы для получения данных о проблемах из серверной части:

метод для получения всех доступных проблем
метод получения единственной записи о проблеме по идентификатору

Давайте добавим методы getIssues и getIssueById в класс IssueService следующим образом:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class IssueService {
  uri = 'http://localhost:4000';
  constructor(private http: HttpClient) {
  }
  getIssues() {
    return this.http.get(`${this.uri}/issues`);
  }
  getIssueById(id) {
    return this.http.get(`${this.uri}/issues/${id}`);
  }
}

Используя экземпляр HttpClient, доступный через http, можно получить полный список проблем, выполнив:

this.http.get(`${this.uri}/issues`);

При этом мы отправляем HTTP-запрос GET на конечную точку / issues внутреннего сервера. Список проблем извлекается из базы данных MongoDB, а затем возвращается в формате JSON.

Аналогичным образом работает метод getIssueById. Кроме того, он принимает параметр (идентификатор проблемы, которую необходимо получить) и передает значение параметра конечной точке / issues /: id.

Добавление проблем

Для добавления новых задач добавлен служебный метод addIssue:

addIssue(title, responsible, description, severity) {
    const issue = {
      title: title,
      responsible: responsible,
      description: description,
      severity: severity
    };
    return this.http.post(`${this.uri}/issues/add`, issue);
  }

Этот метод принимает четыре параметра (название, ответственный, описание и серьезность). Со значениями, доступными в этом параметре, создается новый объект задачи. При использовании метода http.post для конечной точки / issues / add инициируется HTTP-запрос POST, и новый объект задачи передается в данные тела запроса.

Обновление проблем

Чтобы обновить существующие проблемы, нам нужно отправить запрос POST в / issues / update / $ {id} и обязательно передать обновленный объект задачи в качестве данных тела:

updateIssue(id, title, responsible, description, severity, status) {
    const issue = {
      title: title,
      responsible: responsible,
      description: description,
      severity: severity,
      status: status
    };
    return this.http.post(`${this.uri}/issues/update/${id}`, issue);
  }

Удаление проблем

Также просто предоставить сервисный метод для удаления проблем:

deleteIssue(id) {
    return this.http.get(`${this.uri}/issues/delete/${id}`);
  }

В следующем листинге вы снова можете найти полный код файла issue.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class IssueService {
  uri = 'http://localhost:4000';
  constructor(private http: HttpClient) {
  }
  addIssue(title, responsible, description, severity) {
    const issue = {
      title: title,
      responsible: responsible,
      description: description,
      severity: severity
    };
    return this.http.post(`${this.uri}/issues/add`, issue);
  }
  getIssues() {
    return this.http.get(`${this.uri}/issues`);
  }
  getIssueById(id) {
    return this.http.get(`${this.uri}/issues/${id}`);
  }
  updateIssue(id, title, responsible, description, severity, status) {
    const issue = {
      title: title,
      responsible: responsible,
      description: description,
      severity: severity,
      status: status
    };
    return this.http.post(`${this.uri}/issues/update/${id}`, issue);
  }
  deleteIssue(id) {
    return this.http.get(`${this.uri}/issues/delete/${id}`);
  }
}

Внедрение службы

Поскольку три компонента, которые были созданы в нашем приложении Angular, уже должны использовать службу для доступа к серверной части, нам необходимо ввести IssueServices в ListComponent, EditComponent и CreateComponent. Прежде всего добавьте следующие операторы импорта в файлы list.component.ts, edit.component.ts и create.component.ts.

import { IssueService } from '../../issue.service';

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

constructor(private issueService: IssueService, private router: Router) { }

Что дальше

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

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Angular и NodeJS №1 - Руководство по стеку MEAN

Узнайте, как подключить ваш Angular Frontend к Backend NodeJS, Express и MongoDB, создав реальное приложение
Go To Course…

# 2 Angular 6 - Полное руководство

Осваивайте Angular (Angular 2+, включая Angular 6) и создавайте потрясающие, реактивные веб-приложения с преемником Angular.js
Go To Course…

Заявление об ограничении ответственности: это сообщение содержит партнерские ссылки. Это означает, что если вы нажмете на одну из ссылок на продукт, я получу небольшую комиссию. Это поможет поддержать этот блог!

Angular 6 - Ускоренный курс MEAN Stack - Часть 3: Подключение Front-end к Back-end