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

 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 terceira parte do artigo vamos definir o código da interface no arquivo app.component.html.

Criando a interface com o usuário e consumindo o serviço

Abra o arquivo app.component.html na pasta src/app e inclua o código abaixo :

<header>
  <h1>Tarefas</h1>
  <input placeholder="Informe o nome da tarefa" autofocus="" [(ngModel)]="newTarefa.titulo" (keyup.enter)="addTarefa()">
</header>
<section *ngIf="tarefas.length > 0">
  <ul>
    <li *ngFor="let tarefa of tarefas">
      <div>
        <input type="checkbox" (click)="alternarTarefaComplete(tarefa)" [checked]="tarefa.concluida">
        <label>{{tarefa.titulo}}</label>
        <button (click)="removeTarefa(tarefa)">X</button>
      </div>
    </li>
  </ul>
</section>
<footer *ngIf="tarefas.length > 0">
  <span><strong>{{tarefas.length}}</strong> {{tarefas.length == 1 ? 'tarefa' : 'tarefas'}} </span>
</footer>

Temos aqui código HTML intercalado com código Angular.

1- [(ngModel)]="newTarefa.titulo"

Inclui um two-way databinding entre o valor do input e o valor de newTarefa.titulo. Ao digitar o título ele é vinculado no modo two-way databinding e toda alteração feita será exibida.

2- (keyup.enter)="addTarefa()

Informa ao Angular para chamar o método addTarefa() quando a tecla ENTER for pressionada

3- *ngIf="tarefas.length > 0"

Somente exibe esta seção e todos os seus itens quando existir pelo menos uma tarefa. No interior dessa seção iremos gerar um elemento li para cada tarefa.

4-*ngFor="let tarefa of tarefas"

Percorre todos os itens de tarefa no array tarefas e atribui a tarefa atual para a variável chamada em cada iteração

5- <input type="checkbox" (click)="alternarTarefaComplete(tarefa)" [checked]="tarefa.concluida">

Executa o método alternarTarefaComplete() quando o checkbox for clicado  e atribui o valor tarefa.concluida a propriedade [checked] do controle

6-  <label>{{tarefa.titulo}}</label>

Exibe o título da tarefa

7-  <button (click)="removeTarefa(tarefa)">X</button>

Executa o método removeTarefa() quando o botão for clicado

8- *ngIf="tarefas.length > 0"

Verifica se existem tarefas

9- <span><strong>{{tarefas.length}}</strong> {{tarefas.length == 1 ? 'tarefa' : 'tarefas'}} </span>

Se existir uma tarefa exite o texto 'tarefa' se existir mais de uma tarefa exibe o texto 'tarefas'

Assim concluímos a análise do código da interface com o usuário definida no arquivo app.component.html.

Ajustando o arquivo app.module

Para que o código definido acima funcione, devido ao uso da diretiva ng-model, temos que incluir uma referência a  FormsModule no arquivo de módulo da aplicação e definir um import para essa classe.

Veja como deve ficar o arquivo app.module.ts :   

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Tarefa } from './tarefa';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Agora só falta testar o nosso projeto. Antes vamos lembrar o fluxo de execução dos arquivos em uma aplicação Angular 2/4.

Podemos então esquematizar o fluxo dos arquivos assim :

webpack -> index.html -> main.ts -> app.module.ts -> app.component.ts -> app.component.html -> index.html(página)

É assim que se dá o bootstrap de uma aplicação angular básica com o webpack.

Se abrirmos o arquivo index.html da aplicação veremos que ele possui a tag <app-root></app-root> onde o código será renderizado.

Lembrando que essa tag esta definida no arquivo app.component.ts.

Vamos abrir uma janela de terminal no Visual Studio Code teclando SHIFT+' e a seguir digitar o comando:  ng server

Acessando o endereço http://localhost:4200 no navegador teremos o seguinte resultado : (após digitar algumas tarefas)

Muito bem. Nossa aplicação esta funcional mas tudo esta apenas na memória.

Que tal então implementar um backend e definir uma API REST para expor os serviços ?

Vou agendar para abordar esse assunto mais adiante mas por enquanto fica como um exercício.

Pegue o projeto aqui :  Tarefas.zip  (sem as referências)

Portanto, quer comais quer bebais, ou façais outra qualquer coisa, fazei tudo para glória de Deus.
 1 Coríntios 10:31

Referências:

José Carlos Macoratti