> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/angular-services.md).

# Angular services

Сервіси в Angular виконують певні специфічні завдання, наприклад, логуваня, отримання та обробку даних і т.д. На відміну від компонентів і директив сервіси не працюють з уявленнями, тобто не працюють з html розміткою. Вони виконують певне і досить вузьке завдання.

Стандартні завдання сервісів:

* Надавати дані додатку. Сервіс може сам зберігати дані в пам'яті, або для отримання даних може звертатися до сервера
* Сервіс може бути каналом взаємодії між окремими компонентами аплікації
* Сервіс може інкапсулювати бізнес-логіку, різні обчислювальні завдання. Також в сервіс часто виносять куски спільного коду, таким чином вирішують проблему повторення коду.

Створеня нового сервісу.

{% code title="cmd" %}

```
ng g service todo
```

{% endcode %}

{% code title="todo.service.ts" overflow="wrap" lineNumbers="true" %}

```typescript
import { Injectable } from '@angular/core';

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

  constructor() { }

}
```

{% endcode %}

Даний сервіс є автоматично підключений до AppModule, завдяки параметру *provideIn: 'root'*

Якщо нам потрібно самостійно підключити сервіс в модулю, то сервіси підключаються в *providers*

{% code title="app.module.ts" overflow="wrap" lineNumbers="true" %}

```typescript
// ...
@NgModule({
    // ...
    providers: [
        TodoService
    ]
})
export class AppModule { }
```

{% endcode %}

Після того як ми підключили сервіс в модулі ми можемо ним користуватися в сомпонентах цього модуля. В компоненті сервіс підключається наступним чином

{% code title="app.component.ts" overflow="wrap" lineNumbers="true" %}

```typescript
// ...
export class TodoComponent implements OnInit {
    constructor(
        private todoService: TodoService
    ) {}
    
    // ...
}
```

{% endcode %}

## Завдання.

* Створити **TodoService** та використати його в **todo** компоненті.

  <pre data-title="cmd"><code>ng g service core/services/todo/todo
  </code></pre>
* Перенести **todoData** з компонента **todo-list** в сервіс і вже користуючись сервісом отримати TodoData.