Angular Service: Получите JSON! (видео включено)

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

Понятие «Услуги» — это «шаблон проектирования».

Понятие «Услуги» — это «шаблон проектирования». В конце концов, Сервис — это не более чем класс. Что делает это изысканный объединяет его с внедрением зависимостей (DI), которое обрабатывает создание и создание экземпляров для нас.

Так совпало, что Сервисы — это «Синглетоны». Это означает, что они будут созданы только один раз в текущем контексте. Внедряя службу в несколько мест, таких как родительский и дочерний компоненты, вы можете эффективно обмениваться состоянием объектов.

Почему я должен использовать сервис?

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

Объявление службы

создания службы

/src/app/forms.service.ts:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable, Subject} from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class FormsService {

    public constructor(private httpClient: HttpClient) {


    }

    public getFormSchema(): Observable {

        let subject: Subject = new Subject();

        this.httpClient.get('assets/form-schema.json').subscribe((results: any) => {

            console.log(results);

            subject.next(results);

        });

        return subject;

    }

}

Использование службы

В этом примере мы будем использовать «Внедрение зависимостей», чтобы иметь возможность вызывать метод getFormSchema() наших сервисов:

/источник/приложение/ app.component.ts

import {Component} from '@angular/core';
import {FormsService} from './forms.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    public constructor(private formsService: FormsService) {

        formsService.getFormSchema().subscribe((results: any) => {

            console.log(results);

        });

    }

}

Смотрите больше на