Serviços em Angular!

Sumário

Sobre | Como criar um serviço? | Observação

This project was generated with Angular CLI version 6.0.0.

Sobre

Os serviços podem ser uma forma de centralizar uma lógica, ou o armazenamento de dados e também de implementar comunicação entre componentes. Ou seja, quando você tem um código duplicado, que ocorre em diferentes lugares de uma aplicação Angular, um serviço pode ajudar terceirizando e centralizando a execução desse código.

Como criar um serviço?

Para criar um serviço é necessário criar uma classe c/ a extensão '.service.ts'. Dentro desta classe você pode construir o seu código. Os serviços em Angular, podem e devem ser usados nos componentes, mas não é uma boa prática instanciar a classe do serviço manualmente sempre que for utilizá-lo.

    export class AccountService {

        accounts = [
            {
            name: 'Master Account',
            status: 'active'
            },
            {
            name: 'Testaccount',
            status: 'inactive'
            },
            {
            name: 'Hidden Account',
            status: 'unknown'
            }
        ];

        // constructor(private logging: LoggingService) {

        // }

        updateStatus = new EventEmitter<string>();

        onAccountAdded(name: string, status: string) {
            this.accounts.push({name: name, status: status});
            this.logging.changeStatus(status)
        }
        
        onStatusChanged(id: number, newStatus: string) {
            this.accounts[id].status = newStatus;
            this.logging.changeStatus(newStatus)
        }
    } 

Para isso, o Angular tem uma ótima ferramenta que dá acesso aos serviços sem precisar instanciar a classe do referido serviço manualmente nos componentes, o injetor de dependências. Uma dependência é algo que uma classe depende, por exemplo, nessa aplicação o componente de nova conta depende de um método do serviço de conta. O injetor de dependências Angular injeta a classe do serviço automaticamente em um componente e, além disso, funciona de maneira hierárquica, ou seja, de cima para baixo. O nível mais alto em que um serviço pode ser injetado é no app.module.ts

    @NgModule({
    declarations: [
        AppComponent,
        AccountComponent,
        NewAccountComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
    ],
    providers: [AccountService, LoggingService], <-------- injeta o serviço no nível mais alto
    bootstrap: [AppComponent]
    })

Dessa maneira, a instancia da classe de um serviço fica disponível para toda aplicação. Nos casos em que um serviço, irá ser utilizado apenas em alguns componentes e não em toda a aplicação, a injeção pode ser feita no componente pai dos componentes que precisarão da instancia do serviço.

    @Component({
        selector: 'app-account',
        templateUrl: './account.component.html',
        styleUrls: ['./account.component.css'],
        providers: [LoggingService], <--------- injeta o serviço no nível de um único componente/ de seus componentes filhos
    })

Observação:

1 - No exemplo acima, o componente './account.component.html' não é pai de nenhum outro componente, mas a nível de demonstração, a injeção do serviço deveria ocorrer dessa maneira

2 - Os serviços não se propagam, eles apenas descem na árvore de componentes. É uma única instancia que desce na árvore entre os componentes. O nível mais baixo, portanto, é um componente único que depende de um serviço, sem componentes filhos.

Feito isso, os componentes que estiverem abaixo do componente 'app-account' que recebeu a injeção do serviço, poderão utilizar e executar tudo que foi construído dentro da classe do serviço [LoggingService]. Mas para isso é preciso informar ao Angular que precisamos da instancia do serviço em um determinado componente:

    constructor(private logging: LoggingService, private accountService: AccountService) {

    }

Dessa maneira, quando o Angular constrói o componente, ele já cria uma instancia do serviço para ele.