Angular 4 - Criando uma aplicação com Angular CLI - III

 Neste artigo vou mostrar como podemos criar uma aplicação Angular 2/4 bem simples usando a ferramenta de linha de comando CLI.

Se você esta chegando agora e não sabe o que é esse tal de Angular 2/4, leia os artigos abaixo que mostram como configurar o ambiente e criar uma aplicação usando a nova versão do Angular.

Nota: Quando eu escrevi este artigo estava sendo anunciado o Angular 5 como um beta. A versão estável atual é a versão 4.

Continuando a segunda parte do artigo vamos ajustar o código da classe AppComponent para criar uma instância do serviço e usar seus métodos.

Ajustando o código da classe AppComponent

Quando criamos o nosso projeto o Angular CLI criou na pasta src/app o arquivo de componente da aplicação definido em app.component.ts e neste arquivo criou o seguinte código:

Para poder acessar o serviço criado precisamos injetar o serviço definido na classe TarefaService em nosso componente.

Primeiro vamos importar o serviço e especificar no array providers; depois vamos importar a classe Tarefa, e  vamos injetar o serviço no construtor da classe AppComponent e a seguir definir os métodos para acessar o serviço.

Veja como deve ficar o código da classe AppComponent:

import { Component } from '@angular/core';
import {TarefaService} from './tarefa.service';
import { Tarefa } from './tarefa';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [TarefaService]
})
export class AppComponent {
 
  newTarefa: Tarefa = new Tarefa();
  constructor(private tarefaService: TarefaService) {
  }
  addTarefa() {
    this.tarefaService.addTarefa(this.newTarefa);
    this.newTarefa = new Tarefa();
  }
  alternarTarefaComplete(tarefa) {
    this.tarefaService.alternarTarefaComplete(tarefa);
  }
  removeTarefa(tarefa) {
    this.tarefaService.deleteTarefaById(tarefa.id);
  }
  get tarefas() {
    return this.tarefaService.getAllTarefas();
  }
}

Neste código temos os seguintes métodos:

Agora podemos usar o nosso componente para gerenciar tarefas e vamos fazer isso definindo o código da interface do usuário no arquivo app.component.html na próxima parte do artigo.

"Disse-lhe Jesus: Eu sou o caminho, e a verdade e a vida; ninguém vem ao Pai, senão por mim"
 João 14:6

Referências:

José Carlos Macoratti