INTRODUÇÃO AO ANGULAR

?
ATÉ AGORA…
● O que vocês acharam das sessões de
HTML, CSS e JavaScript?
● Foi fácil juntar tudo até aqui?

● E se precisássemos construir muitas

telas diferentes?
● E conectar a aplicação a um back-end?
● E lidar com muita informação ao
mesmo tempo?
 CONTEÚDO: O
QUE É O ANGULAR
E POR QUE USÁ-LO
?
O QUE É O ANGULAR...

O que é um
framework?
⟲
⟲ Reflexão

Reflita e mencione algumas

necessidades/problemas
repetitivos que você
encontrou nas sessões de
desenvolvimento front-end.
? o que é o
ANGULAR?

O que são Single-Page

Applications?
⟲
⟲ Reflexão

Vocês conhecem outros

exemplos populares de
sites que aparentemente
são SPAs? Quais?
?
Quais vocês
acreditam ser as
principais
vantagens do
Angular?
 PRINCIPAIS
VANTAGENS
DO ANGULAR

• Open-source e gratuito.
• A comunidade é grande, ou seja...
○ Um dos frameworks de front-end mais populares atualmente.
○ A documentação é boa, é fácil encontrar recursos de ótima qualidade para estudar
Angular gratuitamente do nível iniciante ao avançado.
○ Excelente absorção pelo mercado: o Angular é um dos frameworks mais populares
entre as grandes empresas
• O Angular é muito completo, sendo o único dentre os frameworks populares que funciona
sozinho no front-end.
• Está sempre evoluindo: cada versão do Angular ver com melhorias drásticas em todos os
aspectos.
⟲
⟲ Reflexão

Quais vocês acreditam ser as

vantagens de se ter

● uma boa documentação,

● uma comunidade ativa e
● uma equipe de
desenvolvimento
renomada em um
framework?
 O QUE É O TYPESCRIPT?
• O JavaScript não foi originalmente projetado para grandes aplicações complexas (principalmente
uma linguagem de script, com construções de programação funcional), carece de mecanismos de
estruturação como Classe, Módulo, Interface.

• Typescript é um superconjunto tipado de JavaScript que compila para JavaScript simples.

• Adiciona recursos adicionais como tipo estático (opcional), classe, módulo etc. ao JavaScript

• Tecnologia Microsoft.

• Código aberto. Versões.

• Publicado pela primeira vez em outubro de 2012.

CONTEÚDO: COMPONENTES
BÁSICOS DE UMA
APLICAÇÃO DE ANGULAR
Quais são os blocos que
constroem uma
aplicação básica de
Angular?

NgModules
Componentes
 NgModules

• Uma aplicação Angular é definida como um conjunto de módulos

• Os NgModules transformam trechos de código em conjuntos funcionais.

• Root > APP Module = Funcionalidades

• Organizar o código em módulos com funcionalidades e objetivos distintos

ajuda a gerenciar o desenvolvimento de aplicações complexas e facilita a
reutilização de módulos.

• Essa técnica permite explorar melhor as vantagens do lazy-loading, a

tecnologia de carregar módulos sob demanda.

• Os módulos agregam os demais elementos da aplicação Angular.

 COMPONENTES

● Um componente não é necessariamente uma tela (que no angular chamamos de

view) a ser exibida por usuário.

● É nos componentes que os dados da aplicação são conectados ao DOM, a API do

HTML com a qual o JavaScript se comunica.

● Há dois tipos de ligação entre os dados e o DOM:

○ Ligação de eventos, ou event binding,

○ Ligação de propriedades, ou property binding

● O angular utiliza o chamado two-way data binding, ou ligação bilateral

de dados. Isso significa que mudanças na view (no DOM) alteram os
dados da aplicação e vice-versa.
 COMPONENTES

● Os componentes são os elementos responsáveis por definir

o comportamento da aplicação.

● Um componente pode encapsular outros componentes.

● O é basicamente uma classe que gerencia as propriedades e

comportamentos de um template HTML e CSS ligada.

● O componente é composto portanto desses três itens: a classe, um

template HTML e a folha de CSS relacionada.
⟲
⟲ Reflexão

Ao olharmos para a tela

do Gmail, aplicação de
e-mails da Google,
quais subdivisões de
componentes podemos
supor?
 serviços

• Os serviços lidam com as regras de negócio da aplicação.

○ Toda a lógica ou dados que não é associada a uma view específica
○ Os serviços normalmente são usados para encapsular o código
responsável pelo relacionamento com APIs

• A Injeção de dependências é na verdade um padrão de projeto

que provê os objetos necessários que uma determinada classe
precisa.

○ A imagem a seguir ilustra o relacionamento entre os

diferentes elementos que vimos até agora:
Serviços