Introdução ao Angular - Do básico ao Hand-On

Slide utilizado no curso Tecnologias em Sistemas para Internet - Programação para Front-End WeB

1. Angular
Visão Geral
Prof. Norton Guimarães

2. Introdução
O Angular é uma plataforma e framework para construção de single-page
application (SPA) usando HTML e TypeScript.
É desenvolvida e mantida pela GOOGLE.
Sendo considerado um dos mais usados frameworks para desenvolvimento
web.
Abrange desde soluções básicas até ferramentas e bibliotecas de construção,
teste e gerenciamento da aplicação web.
Versão vigente Angular 20 (28 de Maio de 2025).

3. Versões do Angular

4. Vantagens
★Customização e reutilização de componentes
★Produtividade e consistência de código
★Suporte a Cross Plataforma
★Melhora a velocidade e performance
★Suporte ao teste unitário
★Suporte a Interface do Usuário
★Open Source

5. Requisitos mínimos
Suporta os Sistemas Operacionais Windows, Linux e Mac
Node.js v22 ou superior
IDE que suporte JavaScript e HTML

6. Ambiente de Trabalho
Será necessário preparar o ambiente de desenvolvimento. Serão necessários:
1.Instalar o NodeJS e NPM
2.Instalar o Angular CLI via NPM
3.Instalar o Visual Studio Code ou Similar
4.Criar um novo projeto usando Angular CLI
5.Abrir a pasta do projeto no Visual Studio Code
6.Iniciar o servidor usando NodeJS

7. Instalando NodeJS e NPM

8. Instalando o Angular CLI via NPM
➢Para instalar a última versão:
○npm install -g @angular/cli
➢Para instalar uma versão específica
○npm install -g @angular/cli@18
➢Para desinstalar
○npm uninstall -g @angular/cli
➢Verificar se está instalado
○ng version

9. Comandos do Angular CLI
Ação Comando
Criar um aplicação ng new application nome_app
Criar um componente ng g c nome_componente
Criar um módulo ng g m nome_modulo
Criar um serviço ng g s nome_serviço
Criar um Guard ng g g nome_guard

10. Projeto Padrão (Project Template)
Módulo baseado em Padrão
Incluído a partir da versão 16
Standalone Template
Incluído na versão 17 (app.module)
Comando:
ng new <nome_projeto> --no--standalone

11. Material UI
Material UI é um conjunto de
componentes prontos para
uso que segue as diretrizes do
Material Design, uma
abordagem de design criada
pelo Google.
Comando:
ng add @angular/material

12. Componentes
Os componentes são o
núcleo do bloco de
construção da aplicação
angular.
Ele representa a parte da
interface do usuário e
encapsula a lógica.

Cada componente consiste em 3 partes:
Classe TypeScript, HTML e CSS

13. Interpolação
Interpolação é uma sintaxe especial que permite mesclar expressões com o
HTML.
Torna dinâmico a inserção de valores em tempo real.
A sintaxe da interpolação segue o duplo chave {{ }}.

14. Interpolação
Property Binding

15. Pipes
Os pipes são recursos de transformação de dados.
São funções de conversão.
Temos disponíveis:
Date Pipe
UpperCase Pipe
LowerCase Pipe
Currency Pipe
Decimal Pipe
Percentage Pipe
Json Pipe
Slice Pipe
Title Case Pipe

16. Property Binding
É a técnica de colocar valores das propriedades do html dinamicamente na
página.
A sintaxe usa os colchetes
[propriedade_html] = “nome_atributo_componente”

17. Property Binding
Property Binding

18. Property Binding

19. Two way binding
Permite a sincronização dos dados entre o modelo e visão
Utiliza a diretiva [{ngModel}]
Combina propriedades e eventos

20. Event Binding
Permite disparar os eventos com a interação do usuário, tais como teclado,
mouse e outros.
Eventos utiliza a sintaxe dos parênteses ( ).

21. Modulos
É o lugar onde podemos agrupar os componentes, diretivas, pipes e serviços.

22. Rotas
Rotas são, praticamente, parte do alicerce que forma uma single-page
application (SPA).
Criando uma aplicação com o Angular CLI, é criado um array de rotas (vazio)
no arquivo app.routes.ts, em src/app. O CLI configura estas rotas no arquivo
app.config.ts, na função provideRouter() que faz o roteamento.

23. Guardião
É uma interface do Angular que faz o meio de campo antes de chamar a rota
de fato, seja navegando entre os componentes ou saindo de algum deles.
Existem alguns tipos para rota de guarda:
●CanActivate – Verifica se o usuário pode acessar a rota;
●CanActivateChild – Verifica se o usuário pode visitar uma rota filha;
●CanDeactivate – Verifica se o usuário pode sair da rota;
●CanLoad – Verifica se o usuário pode utilizar lazy loaded.

24. Lazy Loading
O lazy loading (algo como "carregamento lento", em português) é o processo
de carregamento de componentes, módulos ou outros ativos de um site,
conforme necessário.

25. Hooks
Os hooks são métodos programados para serem executados em determinado
momento.
●ngOnInit: é executado uma vez quando o componente é inicializado;
ngOnChanges: executado uma vez na criação do componente e quando sofrer alguma
mudança;
●ngDoCheck: executado a cada mudança que o ngOnChange não detecta;
●ngOnDestroy: executado na destruição do componente.
Além desses existem outros quatros hooks dentro do ngDoCheck:
●ngAfterContentInit: conteúdo vindo de uma fonte externa do componente;
●ngAfterContentChecked: quando o conteúdo externo é verificado;
●ngAfterViewInit: executado após os dados dos filhos/próprio componente ser inicializado;
●ngAfterViewChecked: sempre que é detectado uma alteração do conteúdo.

26. Diretivas
Colocando em simples palavras, são instruções no DOM.
As diretivas também usam um decorator para eles “@Directive” e temos três tipos:.
●Component Directives, são os usados na classe principal do componente. Eles
contém as informações de como o componente será processado, instanciado e
usado.
●Attribute Directives, são usados para mudar o estilo e comportamento dos
elementos do DOM. Temos algumas pré-construídas como “ngClass” e
“ngStyle”.
●Structural Directives, aqui é onde mudamos e manipulamos as estruturas dos
elementos do DOM. São usados o operador “*” e também temos algumas
pré-construídas como o “*ngIf” e “*ngFor”.

27. Diretivas

28. Formulários
Os formulários são as partes de construção da interação da aplicação web.
Podem ser de dois tipos:
●Template-driven forms
●Reactive forms

29. Template Driven Form
É um simples caminho para criar formulários usando diretivas
É utilizado quando queremos construir formulários rapidamente e o mínimo
de validação necessária ou carregamentos complexos.
Basicamente, interação do Angular no HTML.

30. Reactive Forms
Reactive forms é uma abordagem orientada a modelos para construção de
formulários no Angular. Desta forma o modelo é criado na classe do
componente é mostrado no HTML com um markup especial para ele.
Ele consiste em alguns blocos:
●FormGroup;
●FormArray;
●FormControl.

32. Serviços
Os serviços nos auxiliam a separar do componente algumas informações
importantes e também o modo como vamos obtê-las, lógica de negócios,
além de dados de requisições ao servidor.
Eles são úteis porque o código contido neles pode ser utilizado por toda a
aplicação e não será repetido em vários locais diferentes, visto que essas
funcionalidades podem ser compartilhadas entre os componentes.

33. HTTP interceptor
É essencialmente uma classe que implementa a interface HttpInterceptor.
Esta interface permite a interceptação de requisições e respostas HTTP,
possibilitando que modifiquem, adicionem ou removam informações dessas
requisições ou respostas antes de serem enviadas ou recebidas.
Sendo útil para tarefas como:
●Autenticar usuários;
●Adaptar informações;
●E tratar erros do servidor.

34. Controles de fluxo
Refere-se a habilidade condicional dos elementos HTML ou aplicar lógica em
certas condições.
Os controles de fluxo pode ser:
●@if
●@for
●@switch

35. Deferrable View
Visualizações adiáveis podem ser usadas em modelos de componentes para
adiar o carregamento de dependências selecionadas dentro desse modelo.
Essas dependências incluem componentes, diretivas, pipes e qualquer CSS
associado. Para usar esse recurso, você pode encapsular declarativamente
uma seção do seu modelo em um @deferbloco que especifica as condições
de carregamento.
Suportam uma série de triggers, prefetching e vários sub-blocos
usados para placeholder, loading e estado de erro.

36. Para mais detalhes
Visite o site do Angular
https://v17.angular.io/docs
Alura
https://www.alura.com.br/cursos-online-front-end/angular
Udemy
https://www.udemy.com/pt/topic/angular/

37. Hands on Angular CLI

38. Passo-a-passo de como instalar o Angular

39. Instalar o Angular

40. Angular CLI - Instalado

41. Pasta do Projeto

42. Pasta do Projeto no VSCode

43. Criando meu Primeiro Projeto

44. Criando meu Primeiro Projeto

45. Criando meu Primeiro Projeto

46. Criando meu Primeiro Projeto

47. Subir o Servidor

48. Servidor ON

49. Hello, my-app

50. Estrutura do Angular

51. Detalhes do Angular - Projeto
Arquivos Gerais - Sem alterações para Iniciantes
●editorconfig - configurações
●gitgnore - restrições no GIT
●angular.json - configuração geral
●package-lock.json - dependências
○package.json
●serve.ts - configurações Express
●tsconfig.app.json - Configurações TypeScript
○tsconfig.json
○tsconfi.spec.json

52. Source Angular
Arquivos src - Globais
●index.html - página principal SPA
●main.server.ts - servidor principal
●main.ts - TypeScript Principal
●style.css - CSS padrão

53. App Angular
Componentes principais
app.component.
●css
●html
●spec.ts - Teste Unitário
●ts
app.config.
●serve.ts
●ts
app.routes.ts

54. Angular Language Service - Extensão

55. Criando Componentes

56. Criar um componente simples

57. Novo Componente

58. Vínculo do novo componente no App.Component

59. Vínculo do Componente no App.Component.HTML

60. Pratique
Crie 5 componentes simples e vincule no HTML
●Menu
●Rodapé
●Galeria
●Lista de Produtos
●Notícias
Customize o HTML com base na função de cada componente.

61. Desafio
1.Em cada componente criado
a.Inclua uma variável
b.Inclua uma função que retorne valores
c.Incluir caixa de texto
d.Demonstre os valores por Interpolação e Property Binding
e.Explore os eventos