Curso Angular 2 – Aula 8: Serviços

Curso básico gratuito de Angular 2 | kazale.comO objetivo da aula 8 é ensinar como criar e utilizar Serviços no Angular 2.

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá como criar e utilizar Serviços no Angular 2, de modo a tornar o seu código mais limpo, isolando a lógica de negócios em um componente específico, que poderá ser facilmente testado e reutilizado por toda a aplicação.

1. Definição

A definição mais básica de Serviço no Angular 2 seria um Componente que contém lógica de negócio específica para um domínio, e que pode ser injetado e utilizado por outros componentes.

Um Componente padrão no Angular 2 deve estar associado a um template e controlar a navegação de uma página, porém quando decidimos adicionar regras de negócio nesse mesmo Componente, acabamos por criar um código difícil de manter e de ser testado.

Visando isolar a regra de negócio em um lugar específico, devemos utilizar um Serviço que será responsável por manter determina regra.

Nos próximos tópicos você aprenderá a criar um Serviço para manter um cadastro de aluno, assim como utilizar o serviço criado a partir de outro componente.

2. Criando o Serviço

A criação de um serviço segue o mesmo padrão de criação de um componente qualquer, porém com a diferença que ele será marcado com a anotação Injectable ao invés de Component.

A principal diferença é que a anotação Injectable permite que um componente seja injetado e utilizado por outros componentes.

O código abaixo contém a implementação de um Serviço que utilizaremos como exemplo para a aula:

Repare que a estrutura da classe criada utiliza o mesmo código utilizado para a criação de qualquer componente, exceto a utilização da anotação Injectable para tornar o componente um Serviço.

O Serviço acima criado armazena os dados do aluno em um atributo local da classe, uma vez que não iremos utilizar um acesso a uma API Restful para armazenamento dos dados, o que tornaria o código mais complexo e fora do escopo da aula.

3. Utilizando o Serviço no Componente

Uma vez criado o Serviço, devemos importá-lo no Componente e referenciá-lo na metadata da anotação Component, em providers.

Com a metadata configurada, devemos adicionar um atributo do tipo do Serviço no construtor do Componente, com isso o Angular 2 saberá como disponibilizá-lo para o Componente através de seu sistema de injeção de dependências.

Pronto, com isso basta chamarmos os métodos encontrados no Serviço dentro de nosso Componente, conforme o código a seguir:

Vale lembrar que podemos injetar mais de um Serviço no construtor de um Componente, seguindo o mesmo padrão utilizado acima.

O código acima implementa uma nova interface, chamada OnInit, que como o próprio nome sugere executa uma operação assim que o Componente for criado.

A interface OnInit foi utilizada por boas práticas, pois nosso Componente carrega os dados dos alunos assim que criado. Como nosso Serviço contém um atributo de armazenamento local, não seria um problema carregá-lo no construtor, mas caso os dados fossem obtidos de um servidor remoto a história seria outra, pois nosso Componente não seria criado até que os dados estivessem disponíveis, o que poderia causar problemas na criação do Componente.

Implementando a interface OnInit, o Componente será devidamente criado, e logo após sua criação o método ngOnInit será chamado para inicializar os demais valores do Componente.

4. Criando a View

Tendo o Serviço implementado e configurado para ser utilizado pelo Componente, será preciso agora criar o HTML responsável por exibir a tela de gerenciamento de alunos.

Para começar, configure o Componente principal para exibir os dados gerados pelo Componente de gerenciamento de alunos, conforme o código a seguir:

Com o Componente principal configurado, crie um novo aquivo HTML com o código abaixo para gerar a interface da aplicação:

O código acima não contém nada de novo do que foi estudado na aula anterior, e apenas inclui os elementos básicos de templates como eventos, atribuições, condicionais.

Por fim basta executar o código abaixo para visualizar a interface de gerenciamento de alunos:

Clique para fazer o download dos arquivos do template base da aula 8.

Clique para fazer o download dos arquivos do projeto completo desenvolvido na aula 8.

11 comentários em “Curso Angular 2 – Aula 8: Serviços

  1. Obrigado por mais essa aula… se possivel explique no final das aulas como que eu faço para desvincular o angular 2 do node.js, pois quero deixar ele rodando em um server comum, com o back em php e o angular no front, sei que ele roda sem o node.js, mas ainda não consegui entender como…rs

    1. Olá Caio,
      na verdade para rodar essa aplicação em outro server basta copiar os arquivos para ele e acessar o index.html.
      Em artigos que darão continuidade ao curso básico ensinarei como fazer isso de modo automatizado e eficiente com o Gulp, mas a simples cópia dos arquivos já é o suficiente para que ele funcione em outro server.

      1. O server que eu quero rodar não tem node.js, eu quero roda-lo também em app com o intel xdk + cordova.

        Eu quero roda-lo sem precisar fazer esse comando install… não sei como fazer =/

        1. O npm install é o responsável por gerenciar/baixar as dependências do projeto, e deverá ser executado pelo menos uma vez. No seu caso, execute o comando npm install localmente, que irá gerar o diretório node_modules. A partir dai basta copiar todos os arquivos, incluindo o diretório node_modules para o servidor, e não precisará mais rodar o comando de instalação do npm.

          1. Olá,

            E como eu compilo os arquivos .ts?

            na pasta do app todos os arquivos javascript tem a extensão .ts.

            A base do meu projeto eu peguei do link: https://github.com/angular/angular2-seed

            Outro problema que vejo nesse projeto base que copiei é que a pasta “node_modules” fica um nível acima da raiz, eu terei que muda-la de lugar para poder publica-la, pois se eu subir ela desse jeito para um server com cpanel ela ficaria acima do public_html e não ficaria visivel para quem visita o site.

            Vlw pela ajuda =)

          2. Caio,

            no caso do projeto angular-seed, pelo que vi basta executar ‘npm run build’ para gerar todo o fonte na pasta ‘dist’ do projeto, depois basta copiar a pasta ‘dist’ para o servidor.

  2. Parabéns mais uma vez. Me adiantei ao seu tutorial, desde o último episódio, implementei os serviços que se comunica com o servidor, mas, como sempre, aprendo bastante aqui. E entendi, através do ngOnInit onde as minhas telas estavam engasgando :-).
    Seguindo seu tutorial, como disse em comentário anterior, estou desenvolvendo um sistema de Controle de Ordem de Serviço, provavelmente irei subir para o gitgub, e estou me batendo com telas modal! Achei exemplos bem legais para o angular 1 e para o 2, release candidate 2 e 3, e esses mudaram muito em relação ao beta que estamos utilizando. Tentei migrar mas sem sucesso ainda. Você sabe de algum exemplo de modais, tipo alertas ou formulários simples, funcionando para a versão beta? Quero implementar todas as funcionalidades antes de começar a “aprender” o angular “mais novo”. Grato

    1. Obrigado Osmar, que bom que esteja aprendendo com o curso!

      Que legal que conseguiu um link que atendesse o que queria!

      Eu não cheguei a trabalhar com modais no Angular 2 ainda, só com o AngularJS…

      Quanto a versão, para a próxima aula iremos fazer um update no projeto para utilizar a versão RC 3 do Angular 2, e utilizando ele como base pode atualizar a versão utilizada no seu projeto atual!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

quatro × três =