Получение данных из сервиса

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

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

Создание и регистрация PersonsService

Создание

• Создайте новый файл: src/app/persons/persons.service.ts
• Откройте его в VSCode и начните вводить a-service: должно появиться меню выбора фрагмента. Выберите базовую версию: a-service.

import { Injectable } from '@angular/core';
@Injectable()
export class PersonsService {}

Регистрация

Сервисы Angular необходимо зарегистрировать в модуле.

Итак, давайте создадим новый функциональный модуль PersonsModule и зарегистрируем в нем наш новый PersonsService.

• Создать src/persons/persons.module.ts
• Добавьте PersonsService в его массив providers:

import { NgModule } from '@angular/core';
// App Services
import { PersonsService } from './persons.service';
@NgModule({
  providers: [PersonsService],
})
export class PersonsModule {}

• Дайте AppModule знать, что PersonsModule существует:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// App Components
import { AppComponent } from './app.component';
import { GreetingCardComponent } from './greeting-card/greeting-card.component';
// App Modules
import { PersonsModule } from './persons/persons.module';
@NgModule({
  declarations: [AppComponent, GreetingCardComponent],
  imports: [BrowserModule, PersonsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Получение данных от PersonsService

• Обновите PersonsService, чтобы он предоставил метод для получения данных:

import { Injectable } from '@angular/core';
// App Models
import { Person } from './person.model';
@Injectable()
export class PersonsService {
  // In the future, this will fetch data from a REST endpoint
  getPersons(): Person[] {
    const persons: Person[] = [
      new Person({ name: 'William', age: 41 }),
      new Person({ name: 'Mickey', age: 90 }),
      new Person({ name: 'Donald', age: 85 }),
    ];
    return persons;
  }
}

• Обновите AppComponent, чтобы использовать новый PersonsService

import { Component } from '@angular/core';
// App Models
import { Person } from './persons/person.model';
// App Services
import { PersonsService } from './persons/persons.service';
@Component({
  selector: 'ng4d-root',
  template: `
    <ng4d-greeting-card *ngFor="let person of persons" [person]="person"></ng4d-greeting-card>
  `,
})
export class AppComponent {
  persons: Person[];
  constructor(private personsService: PersonsService) {
    this.persons = this.personsService.getPersons();
  }
}

Как вы могли заметить, мы используем *ngFor для циклического перебора массива persons и печати компонента ng4d-greeting-card для каждой итерации.

Подведение итогов

Вы только что научились:

• Создайте и зарегистрируйте сервис.
• Начните систематизировать кодовую базу ваших приложений Angular по функциям (src/app/persons - «функция»), каждая со своим собственным модулем.
• Внедрить сервис в компонент и получить от него данные.

Все становится интереснее, но лучшее еще впереди.

В следующем рассказе мы познакомимся с RxJS и Observables и узнаем, как легко получать данные из REST API.

Предыдущая: Угловые компоненты: передача данных

Далее: передача данных из конечной точки REST в компоненты Angular