Angular szolgáltatások

• Szerző: Sallai András
• Copyright © Sallai András, 2021, 2022, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Szolgáltatás generálása:

ng generate service valami

Rövden:

ng g s valami

A szolgáltatásokat egy shared nevű könyvtárba szokás tenni:

ng g service shared/valami

Az ng g service shared/valami utasítás hatására létrejön a következő:

• src/app/shared/valami.service.ts
• src/app/shared/valami.service.spec.ts

src/app/shared/valami.service.ts

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class ValamiService {
 
  constructor() { }
}

Létrejött tesztfájl:

src/app/shared/valami.service.spec.ts

import { TestBed } from '@angular/core/testing';
 
import { ValamiService } from './valami.service';
 
describe('ValamiService', () => {
  let service: ValamiService;
 
  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(ValamiService);
  });
 
  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

Szolgáltatás:

src/app/shared/fruit.service.ts

import { Injectable } from '@angular/core';
 
@Injectable({
  providedIn: 'root'
})
export class ValamiService {
  fruits = [
    'alma', 
    'körte', 
    'barack',
    'szilva'
  ];
 
  constructor() { }
 
  getFruits() {
    return this.fruits;
  }
}

src/app/teker/teker.component.ts

import { Component, OnInit } from '@angular/core';
import { FruitService } from '../shared/fruit.service';
 
@Component({
  selector: 'app-teker',
  templateUrl: './teker.component.html',
  styleUrls: ['./teker.component.scss']
})
export class TekerComponent implements OnInit {
 
  fruits !: string[];
 
  constructor(private fruit: FruitService) { }
 
  ngOnInit(): void {
    this.fruits = this.fruit.getFruits();
  }
 
}

src/app/teker/teker.component.html

<ul>
    <li *ngFor="let fruit of fruits">
        {{fruit}}
    </li>
</ul>