Introdução à Programação Web com Angular

Programação para a Web
com Angular
Prof. Elmano Ramalho Cavalcanti
https://sites.google.com/site/elmano
Atualizado em: 28/08/2019

Antes de qualquer coisa...
O que é a Web?
2

http://info.cern.ch/Proposal.html
1989

O que é a Web (World Wide Web - WWW)?
•A Web é, ainda, a principal aplicação da Internet
•Possui arquitetura do tipo Cliente-Servidor
•HTTP é o protocolo da Web
•HTML é a linguagem de marcação usada na construção
de páginas web
4

http://sites.google.com/site/elmano/home/erc_id.jpg
Nome do hospedeiro Nome do
caminho
PC executando
Chrome
MAC executando
Firefox

Alguns acontecimentos marcantes da Web
6
1993 19951991 1997
HTTP/1.1
1998 2000
Página dinâmicas
Redes sociais
Feeds
2004/5 2014/52012

Qual tecnologia é usada para desenvolver
aplicações para a Web?
Há muitos frameworks disponíveis! (clique na imagem abaixo)
7

Comparação entre os principais frameworks
Tarefa: acesse o Google Trends e compare a popularidade
dos seguintes frameworks ao longo dos anos:
● JSF (Java)
● Primefaces (Java)
● Grails (Groovy)
● Django (Python)
● Angular (Typescript) 8Resultado

Qual framework web você acha que deve
aprender?
9

Objetivos da aula
● Preparar um ambiente de desenvolvimento em Angular;
● Desenvolver nossa primeira aplicação;
● Compreender a estrutura básica e o funcionamento de
uma aplicação em Angular.
10

Livro-texto
Adam Freeman. Pro Angular 6.
3a edição. Apress, 2018.
● Recente (2018)
● Detalhado (780 p.)
● Bem estruturado
● Códigos disponíveis no github
(com versões p/ Angular 6 e 7)
● Bem avaliado na Amazon (4,4)
● Encontrável no google :-)
11

Outra opção
Asim Hussain. Angular 5: From
Theory To Practice. Codecraft, 2017.
● Razoavelmente ainda
atualizado
● Bem avaliado na Amazon
● Gratuito! (versão Kindle)
12

Tem livro em
português?
Sim, mas pouquíssimas opções.
Thiago Guedes. Crie aplicações
com Angular. Casa do Código,
2017.
+ Barato (R$ 29,90 - ebook)
+ Útil para iniciante
- Baseado no Angular 2 :-(
13

1) Instalando as ferramentas
necessárias
14

Instalando as
ferramentas
necessárias
Do que vou precisar?
1. Node.js
2. Pacote Angular-cli
3. Git
4. Editor de código
5. Browser
15

1. Node.js
3. Git
5. Browser
16

Node.js
● Criado em 20091
● Runtime simples e eﬁciente para aplicações server-side feitas
em JavaScript
● Baseada na engine usada no navegador Chrome
● Provê uma API para executar código JavaScript fora do
ambiente do navegador
OBS: iremos utilizar a versão 8.11.3 (LTS)
1: https://en.wikipedia.org/wiki/Ryan_Dahl
17

Veriﬁcação da instalação do Node.js
19

1. Node.js
3. Git
5. Browser
20

Angular-cli
● CLI = command line interface (interface de linha de
comando)
● Tornou-se o modo padrão de criar e gerenciar projetos
desenvolvidos no Angular
21

Angular-cli (instalação)
No prompt de comandos:
Windows
Linux ou
MacOS
22

Angular-cli (instalação) [VERIFICAÇÃO]
Veriﬁque se o comando ng é reconhecido no prompt de comandos:
23
Caso esteja ok, avance para o slide 26.

Angular-cli (instalação) [correção]
Caso o comando ng
não esteja sendo
reconhecido, será
necessário adicionar
uma variável de
ambiente.
24

Para ativar o comando ng
A variável PATH deve ter o seguinte valor:
C:Users<usuário>AppDataRoamingnpm
Onde <usuário> é o nome do usuário logado
na máquina (ex: Aluno)
OBS: após a alteração será necessário fazer
logoff.
25

1. Node.js
3. Git
5. Browser
26

Git
● Sistema de controle de versões;
● Criado por Linus Torvalds em 2005 para gerenciar o
desenvolvimento do kernel do Linux;
● Necessário para gerenciar pacotes requeridos no
desenvolvimento de projetos em Angular;
● https://git-scm.com/download/win
27

Veriﬁcando a instalação do git
29

1. Node.js
3. Git
5. Browser
30

Editor de código
Pode ser usado qualquer editor. Algumas opções open
source:
● Atom (github)
● Brackets (github)
● Visual Studio Code (github)
Atom versus VSC
31

1. Node.js
3. Git
5. Browser
33

2. Criando meu primeiro projeto
Angular
34

TODO: Meu primeiro projeto Angular
Pensemos em um aplicativo
web para gerenciar Listas de
Tarefas.
TODO: to do (a fazer)
35

Requisitos funcionais:
● Adicionar uma tarefa;
● Ver a lista de tarefas;
● Marcar uma tarefa como resolvida;
● Ver apenas a lista de tarefas pendentes.
TODO: Meu primeiro projeto Angular
36

Criando o projeto Angular “ToDo”
Escolha um local adequado para o projeto e execute o comando:
Esse comando cria e conﬁgura um novo projeto.
É criado um diretório chamado todo contendo
todos os arquivos de conﬁguração, arquivos de
código e pacotes NPM usados no
desenvolvimento, execução e deployment.
37

Abrindo o projeto no Visual Studio Code
38

Adicionando o pacote Bootstrap CSS
Bootstrap é um framework CSS bastante popular.
Contém templates para tipograﬁa e componentes
GUI (forms, botões, navegação, etc.)
Esse comando adiciona a pasta
bootstrap na pasta node_modules
39

Conﬁgure o Angular para usar o Bootstrap
Edite o arquivo angular.json:
40
Preste atenção
aos detalhes!!!

O que aconteceu?
O arquivo angular.json é usado para conﬁgurar as ferramentas
do projeto. A linha acrescentada incorpora o Bootstrap CSS
dentro do projeto, de forma que seu conteúdo também será
enviado ao navegador.
41

Rodando a aplicação
● As ferramentas de desenvolvimento do projeto incluem um
servidor HTTP.
● Após o processo de construção (build) ﬁnalizar, uma nova
janela será aberta no navegador com a página inicial da
aplicação.
42

OBS: Caso ocorra erro no módulo rxjs
(aconteceu comigo!)
ctrl+c (para finalizar o arquivo em lotes)
npm install rxjs@6.0.0 --save
43
Solução:

Processo de build da aplicação
44

Editando o arquivo index.html
Edite o arquivo index.html na pasta todo/src, substituindo o
conteúdo existente pelo conteúdo disponível neste link.
Após salvar o arquivo, o navegador irá atualizar
automaticamente as novas informações.
Veja que esse index.html contém apenas dados estáticos.
46

Tela da aplicação (html estático)
47

Començando a usar Angular no index.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo</title>
<meta charset="utf-8" />
</head>
<body class="m-1 p-1">
<todo-app>Angular placeholder</todo-app>
</body>
</html>
48
Substitua o conteúdo
do index.html pelo
conteúdo ao lado.
Após salvar o arquivo,
reveja como está o
sistema!

O que aconteceu?
Não existe elemento todo-app na especiﬁcação do HTML. Logo,
o navegador ignora-o.
Esse elemento será nosso ponto de entrada para o mundo do
Angular. Ele será substituído pelo conteúdo da aplicação.
49

Criando um modelo de dados (Data model)
No index.html inicial os dados estavam espalhados por vários
elementos HTML:
<h3 class="bg-primary text-white p-3">Lista de tarefas</h3>
Os detalhes das tarefas a fazer estavam contidos dentro de
elementos td na table:
<tr><td>Preparar aula de LPW</td><td>No</td></tr>
50

Criando um modelo de dados
O que precisamos é juntar os dados em um modelo de
dados. Com isso, poderemos separar os dados da forma
como eles são apresentados ao usuário (ideia-chave do
padrão MVC).
51

Criando um modelo de dados: Typescript
Aplicações em Angular são feitas em
Typescript.
Typescript é um superscript do Javascript.
Uma vantagem: escrever códigos da última
especiﬁcação Javascript (mesmo antes de
ser suportada pelos navegadores!).
52

Um dos pacotes que o angular-cli adicionou ao projeto é o
compilador Typescript; Sempre que um arquivo .ts é
alterado, automaticamente será gerado código javascript
que o browser compreende.
53

Crie o arquivo model.ts na pasta src/app com este conteúdo:
54

Typescript com código 100% javascript?
Veja que o código do slide anterior é puramente javascript (ES 5
/ 2009). Ou seja, você não é obrigado a usar código especíﬁco
do typescript.
Entretanto, normalmente é melhor programar utilizando recursos
mais avançados do javascript. É o que faremos no próximo slide!
55

Alterando o arquivo model.ts (ES6)
56

Alterando o arquivo model.ts (continuação)
57

Javascript (ES6)
● O código dos dois últimos slides ainda é em javascript;
porém, referente a uma especiﬁcação mais recente (ES6 /
2015);
● Alguns navegadores podem ainda não ter suporte ao ES6!
● O que muda entre as versões ES5, ES6 e as próximas?
○ ES6: declaração de classe; função lambda, etc.
58

ES5 vs ES6 vs Typescript
● Angular foi projetado para as
versões mais recentes do
javascript (ES6 em diante)
● As versões mais recentes tornam
a programação mais atraente
para programadores OO (Java,
C#)
59

Compreendendo o arquivo model.ts
export: é usado para identiﬁcar dados ou tipos (classes) que
você pretende usar em alguma outra parte da aplicação. Está
relacionado aos módulos JavaScript.
60

Compreendendo o arquivo model.ts
61
construtor da classe (como em java)
Variável que
contém um
array.

Preparando o template (view)
Precisamos de uma forma de mostrar os valores contidos no
modelo para o usuário.
Em Angular, isso é feito usando um template.
Quando você criou o projeto (ng new todo), o angular-cli criou o
arquivo de template app.component.html na pasta src/app.
62

Editando o arquivo app.component.html
Substitua o conteúdo desse arquivo por:
<h3 class="bg-primary p-1 text-white">Lista de tarefas de
{{ getName() }}</h3>
63
Chaves duplas {{ .. }} determinam um data binding,
criando uma relação entre o template e os dados.
getName() é um método que será invocado.

Estamos quase lá...
Até agora, temos um modelo de dados que contém uma
propriedade de usuário com o nome a ser exibido e temos um
template que exibe o nome invocando uma função getName.
Precisamos de algo que conecte o modelo ao template!
Isso é resolvido com o uso de um componente.
64

Preparando o componente (controller)
● Um componente Angular é responsável por gerenciar um
template, fornecendo os dados e a lógica que ele necessita.
● Em uma aplicação Angular, o trabalho pesado é feito pelos
componentes.
● Abra o arquivo src/app/app.component.ts
65

Editando o arquivo src/app/app.component.ts
66
Substitua o conteúdo do
arquivo pelo que consta na
imagem ao lado.

Compreendendo o arquivo app.component.ts
67
import:
- Oposto à cláusula export;
- Semelhante ao import do java;
i) @angular/core:
- Funcionalidade chave
do Angular
ii) ./model:
- Módulo que criamos
antes.

68
Exemplo de um Decorator:
- Provê metadados de uma classe
- Fornece informações de conﬁguração
Reveja o slide 45!

69
Deﬁnição de classe (semelhante a como é feito em java)

Juntando as peças
Temos agora as três partes fundamentais que formam
uma aplicação Angular:
● Um modelo;
● Um template;
● Um componente.
70
Veja como está a aplicação
neste momento.

Como está a aplicação agora
71
O que está faltando ? Quase tudo! :-)
Comecemos pelo formulário!

Adicionando um formulário
Precisamos importar o módulo de formulários do Angular.
Para isso, precisamos editar o arquivo app.module.ts
(módulo raiz) que contém os módulos que são
requisitados por nossa aplicação.
Abra o arquivo app.module.ts.
72

Habilitando o uso de formulários
(editando o arquivo app.module.ts)
73

Arquivo de bootstrap
Aplicações Angular também precisam de um arquivo de bootstrap,
o qual contém o código necessário para iniciar a aplicação.
O arquivo de bootstrap chama-se main.ts, também localizado na
pasta src.
Desta vez, porém, não será necessário editar esse arquivo.
74

Fluxo de execução da aplicação
75
<todo-app>
bootstrap
{{ .. }}

Fluxo de execução da aplicação (explicação)
76
1- O navegador executa o código do arquivo bootstrap, o qual
lança o Angular;
2- Angular processa o documento HTML e encontra o elemento
todo-app;
3- Angular identiﬁca o componente responsável pelo elemento
todo-app (propriedade selector), inserindo o template do
componente (app.component.html) no local;
4- Ao analisar o template, o Angular encontra a ligação de dados
{{ e }}, avalia a expressão contida nele, invoca o método
getName() e mostra o resultado.

Continuando o desenvolvimento...
Bem, até agora a
tela do nosso
sistema só mostra
o nome do usuário.
Vamos acrescentar
a tabela de tarefas.
77

Adicionando a lista de tarefas
1) Precisamos deﬁnir no componente um método que retorna
para o template o array de tarefas.
78

Adicionando a lista de tarefas
2) Agora precisamos acrescentar a tabela de tarefas no template.
O código encontra-se no próximo slide. Atente para as diretivas:
● *ngFor
● [ngSwitch]
● *ngSwitchCase
● *ngSwitchDefault
79

Como ﬁcou o sistema agora:
81

Exercício
Visualize o código html gerado pelo Angular referente a
essa tabela de tarefas.
Dica: use a tecla F12 no navegador
82

Criando um two-way data binding (ligação
de dados bidirecional)
Perceba que não podemos alterar o status de uma tarefa. Ela
está no modo “apenas leitura”. Ou seja, é do tipo one-way
(unidirecional): [Model -> View]
Precisamos permitir que o usuário altere o status da tarefa (ex:
marcando-a como realizada): [Model <--> View] (bidirecional)
83

Permitindo que o usuário ﬁnalize uma tarefa
84

Veriﬁcando como ﬁcou o sistema
85

Compreendendo o que foi feito
● Veja que o “modelo de dados está vivo”.
● Isso simpliﬁca o desenvolvimento de aplicações web: será
bem mais simples garantir que sua aplicação mostra os
dados atuais quando o estado da aplicação muda.
86

Exercício
Visualize o código html gerado pelo Angular referente ao
campo checkbox.
87

Relembrando as funcionalidades da app
● Adicionar uma tarefa - FALTA;
● Ver a lista de tarefas - OK;
● Marcar uma tarefa como resolvida - OK;
● Ver apenas a lista de tarefas pendentes - FALTA.
88

Filtrando as tarefas
Para ver apenas as tarefas pendentes, precisamos criar um ﬁltro.
89
(item => !item.done) //exemplo de função lambda (estude isso!)

Função lambda
return this.model.items.filter(item => !item.done);
return this.model.items.filter(
function (item) {
return !item.done
});
90

Aprenda as funções da API do Typescript (o
bom e velho ctrl+space)
Ctrl+space:
91

Relembrando as funcionalidades da app
● Adicionar uma tarefa - FALTA;
● Ver a lista de tarefas - OK;
● Marcar uma tarefa como resolvida - OK;
● Ver apenas a lista de tarefas pendentes - OK.
93

Adicionando uma tarefa
Desta vez, vamos usar a abordagem top-down: fazer primeiro o
código na View (template) e depois no Controller (component).
94

Após inserção do campo e do botão Add
95

Por ﬁm, basta agora acrescentar o método addItem no component.
Para isso, é necessário que o component conheça a classe TodoItem:
96

Método addItem:
97

Eis aí nossa 1ª aplicação em Angular:
98

Resumo
● Desenvolvemos uma simples aplicação que permite criar,
listar e ﬁltrar tarefas.
● Não esqueça que aplicações em Angular seguem, em geral,
o padrão/estilo MVC: modelo, visão e controle. A visão é
feita por templates e o controle, por componentes.
99

Aperfeiçoando o TODO
A seguir são apresentadas uma série de problemas que
guiarão o desenvolvimento de novas funcionalidades ao
sistema TODO.
A ideia é que os exercícios sejam feitos na sequência
apresentada.
101

Exercício I: TODO versão 1.1
Problema: ao marcar uma tarefa como
concluída, ela simplesmente desaparece!
Porém, faz bem para o ego poder ver a
lista de tarefas que já foram concluídas.
Como você faria para implementar essa
funcionalidade?
102

Exercício II: TODO versão 1.2
Problema: Imagine que você marcou sem
querer uma tarefa como concluída. E
agora? Seria ótimo poder permitir ao
usuário desmarcar uma tarefa como
concluída, de forma que ela retorne à
tabela de tarefas pendentes.
103

Exercício II: TODO versão 1.3
Problema: Nem toda tarefa tem o mesmo grau de importância,
certo? Estudar para uma prova que será amanhã deve ser mais
importante que aprender a fazer bolo. Vamos pensar em três níveis
de prioridade: baixo, médio e alto.
104

Exercício IV: TODO versão 1.4
Problema: Se uma tarefa não tem
prazo, a chance de procrastinação
será maior. Ao adicionar uma tarefa,
deve ser possível informar a data
limite de término.
105

Exercício V: TODO versão 1.5
Problema: Ajudaria muito se o sistema
mostrasse a lista de tarefas
ordenadas pela data de término. As
que estão com prazo curto devem
aparecer no começo da lista.
106
Finalizar
projeto
Angular
15/09/2019
Arrumar
uma
namorada
10/10/2019
Comprar
um carro
31/12/2019

Próximas aulas
1. Revisão de HTML e CSS;
2. Revisão de Javascript e Typescript;
3. SportStore: uma aplicação real;
4. URL Routing, RESTful Web services, Data bindings,
Directives, Events, Forms, Pipes, Serviços, Módulos.
107

Introdução à Programação Web com Angular

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Introdução à Programação Web com Angular (20)

Mais de Elmano Cavalcanti (11)

Introdução à Programação Web com Angular