Angular — Criando a Primeira aplicação

Criando um TODO list, implementando os conceitos.

Vamos criar nossa primeira aplicação em Angular: uma lista de tarefas. Ela vai envolver bootstrap e data binding. Direto ao ponto.

Este artigo é uma continuação de:

https://medium.com/cafe-recursivo/angular-criando-e-entendendo-projetos-angular-976662b33684

https://medium.com/cafe-recursivo/angular-entendendo-como-uma-aplica%C3%A7%C3%A3o-angular-funciona-3ded82febd7d

Link no github: https://github.com/bernardolobato/cafe-recursivo-angular-first-app

Criando e rodando a aplicação

• Uma vez instalado o node e o angular-cli (demonstrado nos artigos anteriores), criamos uma nova aplicação com o comando ng new
• Nossa aplicação se chamará todo-list, então a criaremos com o comando:

ng new todo-list

• Uma saída como a da imagem a seguir é exibida:

Figura 1 — saída do comando ng new

• Uma vez criada aplicação, rodamos com o comando ng serve

Figura 2 — Saída do comando ng serve

• Rodamos nossa nova aplicação no browser, entrando em localhost:4200 Uma imagem como a seguir deve ser mostrada

Figura 3 — Aplicação criada, rodando no browser

Criando o primeiro componente

• Um componente é o tijolo que constrói uma aplicação em Angular.
• Normalmente componentes são criados para um, e somente um propósito.
• Um componente possui um template (html) um estilo (css) e um arquivo de scripts (typescript)
• O nosso auxiliar angular-cli fornece um mecanismo muito simples para criação de componentes via linha de comando:

$ ng generate component todo-list

Figura 4 — Saída do comando ng generate component todo-list

• Para maiores detalhes sobre utilização de ng generate consulte: https://angular.io/cli/generate . Em breve farei um artigo explicando com bem mais detalhes a utilização do angular-cli.
• Por ora isso é tudo que precisamos saber sobre componentes. Em breve disponibilizarei uma série de artigos sobre componentes em Angular.
• Observe que foram criados quatro arquivos com o comando acima.
• Primeiramente vamos editar nosso app.component.html para que este chame nosso componente recém criado.

app.component.html

• Primeiramente vamos inserir nosso componente na tela, para que este seja visiível aos usuários. Para isso, dentro do nosso app.component.html inserimos o seguinte trecho:

<app-todo-list></app-todo-list>

• Repare que esta “tag” é a mesma criada no arquivo todo-list.component.ts, com a propriedade selector do decorator @Component.
• Isso quer dizer que onde quer que eu queira utilizar meu componente, basta eu inserir esse seletor no meu template
• Vamos editar o arquivo todo-list.component.html para ficar parecido com a figura abaixo:

• Agora rode de novo nosso exemplo no browser:

• Se a imagem acima foi mais ou menos o que apareceu pra você então estamos no caminho certo. Se Não funcionou adequadamente, revise os passos até aqui. Só dê prosseguimento ao tutorial se estiver tudo funcionando como deveria.

Instalando Bootstrap

• Para instalar o bootstrap na nossa aplicação, pare seu servidor com ctrl+c e digite: npm install bootstrap@4.3.1
• Esse comando instalará a versão 4.3.1 do bootstrap na sua aplicação.
• Caso ainda não saiba o que é o bootstrap, sugiro que antes de prosseguir entenda um pouco a documentação: https://getbootstrap.com/

Saída do comando npm install bootstrap@4.3.1

• Uma vez instalado, precisamos adicionar a folha de estilos no nosso projeto, para isso edite o arquivo styles.css e adicione a seguinte linha: @import '~bootstrap/dist/css/bootstrap.min.css'
• Pronto! Agora rode novamente a aplicação e perceba que o estilo do título mudou para o estilo do bootstrap. Caso isso nao tenha acontecido, revise os passos. Sugiro que não prossiga enquanto não tiver o resultado desejado.

Criando a Lista de Tarefas

• Uma vez o bootstrap instalado e devidamente configurado, é hora de criarmos nosso template da lista de tarefas. Como o objetivo deste artigo não é falar do bootstrap, disponibilizo a versão do html com os estilos que utilizaremos no exemplo. O arquivo é o todo-list.component.html

• Adicionado o código acima, o visual da sua página deve ficar parecido com o seguinte:

• Criaremos agora as funcionalidades

Adicionando comportamento Angular

Adicionando a diretiva ngModel

• Primeiramente criamos no nosso componente três variáveis, exatamente como no código abaixo:

• Em seguida devemos adicionar a diretiva ngModel ao nosso template. Esta diretiva nos diz que aquele item de formulário deve estar associado a uma variável no código do nosso componente

<input type="text" class="form-control add-todo" [(ngModel)]="itemToAdd" name="item" placeholder="Add Item...">

• Relembrando: o código em negrito é responsável por associar nosso elemento de formulário com a variável itemToAdd, definido no nosso arquivo javascript.
• Em um próximo artigo veremos o funcionamento desta associação de maneira bem completa. Por enquanto para efeito de simplicidade vamos somente aceitar seu funcionamento.
• Agora vamos rodar nossa aplicação novamente no browser. Se a tela ficou em branco, não se desespere, entre no console do seu navegador (F12) e verifique que um erro é exibido:

• Este erro ocorre porque começamos a utilizar formulários em nosso projeto e precisamos avisar ao Angular que vamos utilizar formulários para só então ele entender o que precisa ser feito com a diretiva ngModel.
• Para com que isso ocorra, precisamos editar o arquivo App.module.ts e adicionar o FormsModule na propriedade imports.

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

• A partir de agora, o Angular sabe como trabalhar com formulários. Entre novamente na aplicação no browser e veja que o erro não ocorre mais.

Adicionando pipe para mostrar o resultado

• Para vermos o funcionamento do nosso data binding, vamos exibir em tempo real o que está sendo modificado na aplicação.
• Observe o código abaixo, principalmente a parte em negrito:

<form class="form-inline">
<input type="text" class="form-control add-todo" name="item" [(ngModel)]="itemToAdd" placeholder="Add Item...">
<button id="checkAll" class="btn btn-success ml-2">Add</button>{{itemToAdd |json}}
</form>

• Adicionei a propriedade itemToAdd seguida de um operador |. Observe também o uso de duas chaves. Essas chaves são utilizadas para interpretar o resultado de uma expressão e exibir seu resultado. Veremos bastante o uso dessas expressões quando falarmos de data binding.
• O “|” é chamado de pipe. Um pipe nada mais é do que uma função que modifica a expressão para ser mostrada ao usuário de uma forma diferente. Falaremos de pipes em um artigo posterior. o pipe json formata a variável itemToAdd para ser exibida em um formado json.
• Adicione o código acima no seu projeto e rode a aplicação novamente. escreva qualquer informação no campo de texto e observe que o texto que é alterado vai aparecendo imediatamente na tela.
• Resumindo: o ngModel altera o valor da variável no componente e a expressão pega o valor da variável do componente e exibe na tela. A este tipo de binding chamamos de two-way-data-binding.
• Utilizamos isso somente para testar a alteração da variável. Pode remover o código com a expressão e o pipe.

<form class="form-inline">
<input type="text" class="form-control add-todo" name="item" [(ngModel)]="itemToAdd" placeholder="Add Item...">
<button id="checkAll" class="btn btn-success ml-2">Add</button>
</form>

Adicionando Comportamento

• Agora vamos adicionar o comportamento a nossa aplicação. Funcionará assim: O usuário digita um item na caixa de texto e clica em Add. Este item será adicionado na lista TODO com um checkbox. Ao clicar no checkbox, este item é adicionado a DONE, com um tachado no texto.
• Vamos iniciar com o html do template. Entre no seu arquivo todo-list.component.ts e adicione o seguinte código (em negrito) no botão:

<button id="checkAll" class="btn btn-success ml-2" (click)="addToList()">Add</button>

• Este código adiciona um comportamento ao botão. Ao evento click, ele executa o método addToList() dentro do nosso componente.

Angular suporta uma boa variedade de eventos javascript em seus componentes. Para verificar todos os eventos javascript, recomendo: https://www.w3schools.com/jsref/dom_obj_event.asp

• Agora vamos criar nosso método dentro do arquivo de typescript todo-list.component.ts:

addToList() {
  this.todoList.push(this.itemToAdd);
}

• lembre-se que criamos em um item acima as variáveis: todoList; doneList e itemToAdd. No código acima inserimos o valor da variável itemToAdd no array todoList com o método push. Lembre-se que o valor de itemToAdd foi definido na caixa de texto que o usuário digitou.
• Agora precisamos refletir o valor da variável todoList no template html do nosso componente. Para isso utilizamos a diretiva ngFor.

<ul id="sortable" class="list-unstyled">
<li class="ui-state-default" *ngFor="let item of todoList; let i = index">
<div class="checkbox">
<label>
<input type="checkbox" value=""/>{{item}}</label>
</div>
</li>
</ul>

• Observe o código acima e substitua as partes em negrito no seu código.
• A diretiva ngFor serve exatamente para iterar entre componentes de uma lista ou array. Funciona como um For comum em uma linguagem de programação: a primeira parte define uma variável item, que será o valor de cada iteração dentro da lista, que é definida após a palavra reservada of. Em seguida, definimos mais uma variável i, que representa o índice da iteração. Esta parte não é obrigatória.
• O * utilizado antes do ngFor sinaliza que esta é uma diretiva estrutural, ou seja, uma diretiva que modifica o template. Em breve um artigo explicando o funcionamento deste tipo de diretiva será liberado.
• Se você atualizar a página agora, e adicionar qualquer coisa na lista, verá que ela é atualizada, conforme o esperado.

Adicionar ação no click do checkbox

• Agora vamos adicionar um método que tira o item da lista de todo e adiciona na lista done. Esse método será executado quando o usuário clicar sobre o checkbox correspondente ao item da lista.
• Primeiramente, vamos ao template:

<ul id="sortable" class="list-unstyled">
<li class="ui-state-default" *ngFor="let item of todoList; let i = index">
<div class="checkbox">
<label>
<input type="checkbox" value="" (click)="doItem(i)" />{{item}}</label>
</div>
</li>
</ul>

• Nenhuma novidade aqui. Já vimos como funciona a interação do Angular com os eventos JavaScript. Portanto, sabemos que ao clicar no checkbox, o método doItem será chamado, passando como parâmetro o índice da iteração. Este índice é importante, pois é através dele que sabemos qual elemento retirar de uma lista e passar para a outra.
• Agora vamos adicionar o método no nosso componente:

doItem(index: number) {
this.doneList.push(this.todoList[index]);
this.todoList.splice(index, 1);
}

• Observe o que fizemos: com base no indice, primeiramente adicionamos o elemento da TodoList na doneList e, em seguida removemos o mesmo elemento da todoList, utilizando o método splice. Para entender o seu funcionamento recomendo: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Por enquanto é isso, enossa primeira aplicação em Angular está completa! Plenamente funcional. Observe que não utilizamos as melhores técnicas de programação, estou ciente disso. Mas o objetivo primário era entender o funcionamento geral de uma aplicação em Angular. Teremos inúmeras outras oportunidades de demonstrar como um bom código pode ser feito. Agradeço quem chegou até aqui e até a próxima!