htlstp.if.scre

# Angular Services

---
#### Motivation
![](./assets/ng-services/amazon-graph-output.svg)

🤮

---
#### Service
![](./assets/ng-services/ng-services.svg)

<ul>
    <li class="fragment fade-in-then-semi-out">kein UI</li>
    <li class="fragment">übernimmt <strong>eine</strong> Zuständigkeit
        <ul>
            <li class="fragment fade-in-then-semi-out">Datenhaltung</li>   
            <li class="fragment fade-in-then-semi-out">Abrufen externen Daten</li>   
            <li class="fragment">...</li>   
        </ul>
    </li>
</ul>

---
#### Service
```typescript
@Injectable({
  providedIn: 'root'
})
export class SomeService {
  // logic
}
```

```typescript
@Component({ ... })
export class SomeComponent {
  service = inject(SomeService);
}
```

<ul>
    <li class="fragment fade-in-then-semi-out">Instanzierung durch Angular</li>
    <li class="fragment">einmalig (<em>Singleton</em>)</li>
</ul>

---
#### Datenhaltung
```typescript
export class BasketService {
  basket = signal<Product[]>([]);
}
```

```typescript
export class ItemComponent {
  product = input.required<Product>();
  service = inject(BasketService);
  
  addToBasket() {
    this.service.basket.update(s => [...s, this.product()]);
  }
}
```

```typescript
export class BasketComponent {
  service = inject(BasketService);
  basket = this.service.basket();
}
```

----
#### Best Practice
```typescript
export class BasketService {
  private _basket = signal<Product[]>([]);
  readonly basket = this._basket.asReadonly();

addToBasket(product: Product) {
    this._basket.set([...this._basket(), product]);
  }
```

```typescript
export class ItemComponent {
  product = input.required<Product>();
  service = inject(BasketService);
  
  addToBasket() {
    this.service.addToBasket(this.product);  
  }
```

```typescript
export class BasketComponent {
  service = inject(BasketService);
  basket = computed<Product[]>(this.service.basket);
```

----
#### `computed`

```typescript
count = signal(2);
doubleCount = computed(() => count() * 2); // 4
count.set(3) // count = 4, doubleCount = 6
```

<ul>
  <li class="fragment fade-in-then-semi-out stretch">entstehen aus existierenden Signals</li>
  <li class="fragment fade-in-then-semi-out stretch">read-only</li>
</ul>

```typescript
doubleCount.set(42); 🚫
```

```typescript
computed(() => a() + b());
```

<ul>
  <li class="fragment fade-in-then-semi-out">updated, wenn <code>a</code> oder <code>b</code> updaten</li>
  <li class="fragment fade-in-then-semi-out">lazy evaluated</li>
  <li class="fragment">gecached</li>
</ul>