Angular Flashcards
O que é um module (módulo)?
Um module é um mecanismo para agrupar components, directives , pipes e services relacionados, de forma a combinar com outros módulos para criar um aplicativo.
São uma forma de organizar e separar seu código logicamente.
Apps menores geralmente só precisam do app.module, maiores projetos passam a usar outros módulos
Para que serve a seção de ‘imports’ no início de módulos
importa outros módulos!… ou até componentes
Dentro do decorator são colocadas algumas propriedas de um Component. Por exemplo, o selector. Para que serve o selector?
selector é como identificamos o nosso componente. Para todo o componente existe um elemento único associado que permite que ele seja adicionado em um documento HTML.
é um string usualmente escrito como ‘app-[[NOME]]’
Dentro do decorator são colocadas algumas propriedas de um Component. Por exemplo, o TemplateUrl . Para que serve o TemplateUrl ?
TemplateUrl é o nome do documento HTML que será a parte visual do componente. Nele podemos ter código em HTML juntamente com todos os bindings e diretivas necessários para a exibição do componente no navegador
A estrutura de um Component é também geralmente formada por HTML+CSS+TS(JS).
Essas partes são organizadas em arquivos separados e unidas nos metadados do componente através de que?
Através do decorator -> @Component, que faz parte, geralmente, do arquivo “exemplo.component.ts”, usualmente dentro da pasta do próprio component
diferença do template VS templateURL (geralmente inseridos no decorator do component)?
template: modelo de codigo dentro do próprio arquivo, modelo embutido, modelo inline.
OBS: utilizar ` `
templateURL: outro arquivo externo é referido
como criar um COMPONENT via comando CLI?
ng generate component NOME-DO-COMPONENT,
ou ainda:
ng g c nome-do-component
(ei, não mate o ng serve ein!)
Ao criar um novo component, o que é minimamente obrigatório alterar no arquivo app.module.ts?
dar um import no início do arquivo, por exemplo:
import { ExemploComponent } from ‘./exemplo/exemplo.component’;
E também declará-lo em ‘declarations’ do decorator @NgModule
String interpolation syntax:
em um arquivo html, usar duplas chaves fechando e abrindo {{ algumconteúdo }} faz o que?
Posso escrever uma expressão em typescript dentro das chaves duplas, mais comumente, chamamos alguma variavel/propriedade.
OBS: o resultado DEVE ser uma string (ou um resultado convertível para string)
Ex: se eu chamar um método la dentro, ele deve retornar uma string obrigatoriamente
–Displaying values with interpolation–
o que é Event Binding?
recurso para vincular um certo evento disparado pelo navegador a um código da aplicação.
O event binding nos permite “escutar” e responder por ações como:
keystrokes, mouse movements, clicks, and touches.
Geralmente escrito como, exemplo:
<button (click)=”onSave()”>Save</button>
(event)=”algumMétodo()”
(geralmente um método!)
- vinculação unidirecional, no sentido do typescript para o html
- associa informação do componente para o template (HTML)
- posso, dessa forma, alterar alguma propriedade de uma tag html
Do que se trata as definições acima?
Property Binding
- [propriedade]=”valor”
diferencie: Interpolação, property binding, event binding e two-way binding
Interpolação: {{ valor }}
associa informação do componente para o template (HTML)
Property Binding: [propriedade]=”valor”
associa informação do componente para o template (HTML)
Event Binding: (evento)=”handler”
associa informação do template (HTML) para o componente
Two-Way Data Binding: [(ngModel)]=”propriedade”
associa informação entre ambos, ou seja, mantém ambos atualizados (componente e template (HTML).
o que é Databinding com Angular?
Podemos dizer que databinding é a comunicação entre a view e a lógica, quando atualizamos a lógica ela reflete na view.
Existem três tipos de databinding no Angular:
One way databinding, que vai da lógica do JS para o view do HTML.
A saída de dados da lógica reflete na view como String Interpolation ou Property binding.
One way databinding, da view para lógica.
Aqui podemos reagir a eventos do HTML, como clicks de botões, com o Event binding.
Two way binding, entre a lógica e a view.
Aqui é uma combinação, podemos reagir a eventos e output ao mesmo tempo.
<input [(ngModel)]=”text”>
<h2>{{ text }}</h2>
o que faz o comando acima? (colocado nas linhas de codigo do app.component.html, por exemplo)
a primeira linha é um comando clássico de TWO WAY DATA BINDING.
nesse caso, é adicionado um input ao “view”, o que for escrito no input é salvo em uma variável chamada text.
Logo abaixo, no h2, é mostrado o que é digitado no input, por meio de uma interpolação.
<div *ngIf=”races.length > 0”><h2>Races</h2></div>
explique o que está ocorrendo no codigo acima
Exemplo de uso da diretiva estrutural ngIf.
Aqui o h2 será exibido (o qual contém o texto “Races”) somente se o races.length for maior que zero. Do contratio, o div sumirá por completo
