1) O documento descreve uma aula sobre desenvolvimento web com Angular, incluindo a instalação das ferramentas necessárias e a criação de um projeto Angular simples para gerenciar listas de tarefas. 2) É apresentado um modelo de dados para armazenar as tarefas, um template HTML para exibir os dados e um componente para conectar o modelo ao template. 3) O fluxo básico de execução de uma aplicação Angular é explicado, ligando o bootstrap, componentes, templates e data binding.

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

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

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

4. 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

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

6. 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

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

8. 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

9. Qual framework web você acha que deve
aprender?
9

10. 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

11. 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

12. 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

13. 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

14. 1) Instalando as ferramentas
necessárias
14

15. 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

16. Do que vou precisar?
1. Node.js
2. Pacote Angular-cli
3. Git
4. Editor de código
5. Browser
16

17. Node.js
● Criado em 20091
● Runtime simples e eficiente 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

18. 18

19. Verificação da instalação do Node.js
19

20. Do que vou precisar?
1. Node.js
2. Pacote Angular-cli
3. Git
4. Editor de código
5. Browser
20

21. 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

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

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

24. 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

25. 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

26. Do que vou precisar?
1. Node.js
2. Pacote Angular-cli
3. Git
4. Editor de código
5. Browser
26

27. 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

28. 28

29. Verificando a instalação do git
29

30. Do que vou precisar?
1. Node.js
2. Pacote Angular-cli
3. Git
4. Editor de código
5. Browser
30

31. 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

32. 32

33. Do que vou precisar?
1. Node.js
2. Pacote Angular-cli
3. Git
4. Editor de código
5. Browser
33

34. 2. Criando meu primeiro projeto
Angular
34

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

36. 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

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

38. Abrindo o projeto no Visual Studio Code
38

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

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

41. O que aconteceu?
O arquivo angular.json é usado para configurar 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

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

43. 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:

44. Processo de build da aplicação
44

45. It works!
45

46. 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

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

48. 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!

49. O que aconteceu?
Não existe elemento todo-app na especificaçã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

50. 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

51. 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

52. 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
especificação Javascript (mesmo antes de
ser suportada pelos navegadores!).
52

53. Criando um modelo de dados: Typescript
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

54. Criando um modelo de dados: Typescript
Crie o arquivo model.ts na pasta src/app com este conteúdo:
54

55. 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ífico
do typescript.
Entretanto, normalmente é melhor programar utilizando recursos
mais avançados do javascript. É o que faremos no próximo slide!
55

56. Alterando o arquivo model.ts (ES6)
56

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

58. Javascript (ES6)
● O código dos dois últimos slides ainda é em javascript;
porém, referente a uma especificaçã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

59. 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

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

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

62. 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

63. 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.

64. 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

65. 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

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

67. 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. Compreendendo o arquivo app.component.ts
68
Exemplo de um Decorator:
- Provê metadados de uma classe
- Fornece informações de configuração
Reveja o slide 45!

69. Compreendendo o arquivo app.component.ts
69
Definição de classe (semelhante a como é feito em java)

70. 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.

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

72. 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

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

74. 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

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

76. 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 identifica 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.

77. 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

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

79. 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

80. 80

81. Como ficou o sistema agora:
81

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

83. 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

84. Permitindo que o usuário finalize uma tarefa
84

85. Verificando como ficou o sistema
85

86. Compreendendo o que foi feito
● Veja que o “modelo de dados está vivo”.
● Isso simplifica 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

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

88. Relembrando as funcionalidades da app
Requisitos funcionais:
● 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

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

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

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

92. 92

93. Relembrando as funcionalidades da app
Requisitos funcionais:
● 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

94. 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

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

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

97. Adicionando uma tarefa
Método addItem:
97

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

99. Resumo
● Desenvolvemos uma simples aplicação que permite criar,
listar e filtrar 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

100. Aperfeiçoando o app TODO

101. 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

102. 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

103. 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

104. 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

105. 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

106. 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

107. 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