Angular: Framework de Desenvolvimento

Prévia do material em texto

Frameworks
ANGULAR
O Angular está fundamentado em Orientação a Objetos. 
O framework trabalha com uma arquitetura similar ao MVC.
O MVC é um padrão de projeto baseado em:
· modelos (os formatos dos dados),
· views (a representação dos dados que no front-end pode ser relacionada ao HTML) e
· controladores (entidades que funcionam como "gerentes", controlando os comportamentos baseado no que é solicitado).
No Angular, trabalhamos com componentes (uma mistura de TypeScript e HTML), que resulta em um código independente, isolado e reutilizável. 
A síntese do MVC com componentes resulta na seguinte estrutura:
· Um template (linguagem de marcação, geralmente HTML). É a parte visual de um componente e pode ser entendida como a View;
· A classe principal do componente, que é de fato o componente, todas as suas propriedades e seus métodos (essa estrutura é criada com TypeScript).
Angular = HTML + TypeScript
HTML = faz o template (parte visual do componente)
TypeScript = Faz a classe principal (É de fato o componente)
Segundo a documentação do Angular, o componente é o principal bloco de construção para aplicativos, e é composto por um template, um estilo e uma classe. É no template que encontraremos toda a estrutura HTML, a árvore DOM do componente. Já o estilo é onde será feita a estilização, e a classe onde é definido o comportamento e a lógica feita em Typescript.
Anatomia do arquivo typescript de um componente:
Diferença entre Angular e Angular JS
O Angular JS foi a primeira versão do framework Angular, desde então, uma série de versões novas e reformuladas do Angular 2+ foram lançadas, para ajudar a resolver os problemas encontrados na estrutura JS original.
· AngularJS usa Javascript - Angular 2 usa Typescript.
· AngularJS usa controladores - Angular 2 usa componentes.
ARQUITETURA DO FRAMEWORK 
Como funciona o Angular?
· O Angular funciona a partir de módulos. 
· Os módulos são blocos de códigos utilizados para construir sua estrutura. 
Módulos = são blocos de códigos
Todo componente precisa ser declarado em um módulo para poder ser utilizado na aplicação.
Para a escrita de seus códigos, o Angular usa a linguagem de programação Typescript. 
Quando o código Typescript é compilado, é gerado um código JavaScript, para que a aplicação possa ser executada em navegadores sem problemas de compatibilidade.
Para quê serve a ferramenta Angular CLI?
O Angular CLI é a ferramenta de linha de comando, disponível para instalar o Angular via terminal. 
Quando utilizado, o Angular CLI faz uso do NodeJS, que carrega as dependências necessárias através do gerenciador de pacotes (NPM). 
NPM=gerenciador de pacotes
Em geral, o Angular CLI acelera o processo de configuração e instalação do framework, criando uma estrutura totalmente pronta para uso.
Quais os principais arquivos de uma aplicação Angular?
O Angular possui em sua estrutura cinco arquivos principais, sendo eles: 
· “main.ts”, 
· “angular.json”, 
· “index.html”, 
· “app.module.ts” e
· “app.component.ts”. 
O arquivo “main.ts” contém as informações de inicialização da aplicação.
O arquivo “angular.json” possui dados sobre o framework em geral (nome, versão, caminho para o arquivo “main.ts”, entre outros). 
O “index.html” é o arquivo raiz do projeto, responsável por exibir o conteúdo no navegador. 
Por sua vez, o “app.module.ts” gerencia todos os módulos presentes no Angular.
O “app.component.ts” tem como função integrar os arquivos e componentes utilizados. 
ATENÇÃO: Além desses, também há o “styles.css”, que possui os estilos usados, e a pasta “node_modules”, onde estão as dependências da aplicação. 
Quais os módulos usados em um aplicativo Angular?
· O Angular é um framework modular.
· Sua estrutura é formada a partir da junção de diversos módulos, que são chamados de NgModules. 
· Geralmente, as aplicações Angular possuem os seguintes módulos:
Imports: importa outros módulos necessários para o funcionamento do módulo em questão;
Declarations: declara quais são os componentes, pipes e diretivas do módulo em questão;
Exports: tornam um conjunto de componentes, pipes e diretivas disponíveis para outros módulos;
Providers: declara serviços que a aplicação em geral poderá usar.
DECORATORS 
O decorator é uma forma de dizer ao Angular como uma classe deve ser tratada. 
Decorator = diz como uma classe deve ser tratada
Um exemplo é o @Component, no qual estamos dizendo ao Angular que aquela classe é um componente e assim deve ser tratado, alguns componentes do Angular:
@NgModule
@Component
@Pipe
@Input
@Output
@ContentChild
@ContentChildren
@Injectable
@Directive
@HostBinding
@HostListener
@ViewChild
@ViewChildren
BLOCOS:
Angular trabalha com a ideia de blocos e esses BLOCOS podem ser constituídos de:
· Components
· Templates
· Metadata
· Data Binding
· Directives
· Services
· Dependency Injection
Vamos dar uma olhada em cada um deles.
Components: Um componente é uma classe TypeScript com o decorator @Component.
Um componente de view, por exemplo, controla o GUI (Graphical User Interface), e um component lógico, controla as funções que são endereçadas a ele.
Templates: São neles que definimos onde o Angular irá procurar os arquivos que lidam diretamente na view do usuário, que são os arquivos HTML e CSS, que interagem com o componente que estamos vendo na tela no momento. 
ATENÇÃO:
· O Angular usa {} para interpolação 
· Usa [] para vincular propriedades.
{} interpolação
[ ] propriedades 
Metadata: É onde informamos ao Angular como processar uma classe.
Um exemplo é o @Componente, que é um metadata como selector, templateURL e outros.
Data Binding - Faz a comunicação entre o component view e o lógico.
Vamos dar uma olhada em alguns Data Binding:
· Interpolation: Faz a ligação entre view e lógica;
· Event Binding: Fica escutando para assim reagirmos as respostas por ações, como apertar teclas, movimento do mouse, clicks e toches;
· Property Binding: Controla as propriedades do HTML;
· Custom Binding: Permite a comunicação entre componentes pais e filhos, por um decorator especial;
· Two-way Binding: Permite a combinação Property e Event Binding para lidar com os eventos de dados.
Directives: São classes que ajudam a manipular a View.
As diretivas tem seu decorator @Directive, que contém os metadados para o Angular saber como manipular o DOM.
Um exemplo para mostrar o poder que as diretivas dão a nossa aplicação poderia ser um loop for dentro do HTML:
No Angular temos dois tipos de diretivas:
· Estrutural: Que muda a estrutura da View;
· Atributos: Que muda o estilo da View.
Services: Prover uma funcionalidade comum para um componente.
Dependency Injection (Injeção de Dependência): É uma dependência que injeta todos os recursos que iremos precisar em um determinado componente.
Para fazer isso, usamos o decorator @Injectable, sendo assim, caso um injector já exista, ele usa o existente e não criará um novo desnecessariamente.
image1.png
image2.jpg