Angular: Diretivas e Módulos

Prévia do material em texto

Verifique o seu desempenho e continue
treinando! Você pode refazer o exercício
quantas vezes quiser.
A
B
C
1
Em um sistema de controle de estacionamento,
devem ser exibidas apenas as vagas vazias na
página de listagem, através de tags div
configuradas como painéis, permitindo que o
operador associe a vaga ao carro que estiver
acessando o local naquele momento. Qual
diretiva do Angular permitirá condicionar o
desenho da div ao estado atual da vaga?
ngIf
ng-app
ngFor
Questão de 10
Corretas
Incorretas
Em branco
1 2 3 4 5
6 7 8 9 10
Angular
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
1 of 15 16/11/2025, 21:44
D
E
ng-template
ngModel
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
A diretiva correta seria , aplicada na
forma de atributo, com uma expressão que
retorna valor booleano, indicando se o
elemento será desenhado ou não. Para o
contexto descrito, poderia ser algo como . Quanto às
demais opções, ngFor permite repetir o
desenho do elemento para cada objeto de
um conjunto, ngModel define um
relacionamento bidirecional entre um
campo de entrada e um atributo da classe,
ng-app é o seletor que identifica o
aplicativo, e ng-template define um trecho
reutilizável no modelo.   A diretiva ngIf é
utilizada para exibir ou ocultar um elemento
de acordo com uma condição. No caso do
exemplo, a condição é que a vaga esteja
vazia. Se a vaga estiver vazia, o elemento
será exibido. Se a vaga estiver ocupada, o
elemento não será exibido.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
2 of 15 16/11/2025, 21:44
A
B
C
D
E
2
Com a estrutura modular do Angular,
conseguimos acrescentar funcionalidades ao
sistema de forma muito simples, através da
importação dos módulos necessários. Entre os
módulos mais comuns, em um sistema baseado
no Angular, qual deles permite gerenciar a troca
de conteúdo com base em rotas, dentro de uma
interface no estilo SPA �Single Page
Application)?
BrowserModule
ReactiveFormsModule
RouterModule
FormsModule
HttpClientModule
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
O módulo que permite gerenciar a troca de
conteúdo com base em rotas, dentro de
uma interface no estilo SPA �Single Page
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
3 of 15 16/11/2025, 21:44
A
B
C
Application), é o . Este
módulo deve ser configurado a partir de um
objeto Routes, que contém o mapeamento
das rotas disponíveis para os componentes
de resposta. No nível dos modelos HTML,
os links são associados às rotas por meio
do atributo routerLink, e o conteúdo é
exibido no seletor router-outlet. Portanto, a
alternativa correta é a letra C.
3
No Angular é possível efetuar as críticas sobre
os campos de um formulário durante o seu
preenchimento, com base na tecnologia de
formulários reativos. O processo envolve a
criação de um FormGroup, ao nível da classe,
contendo as configurações para cada campo,
incluindo a possibilidade de uma lista de
validadores, e o grupo é associado ao
formulário, no modelo. Para uma situação em
que o usuário deve aceitar as regras do site
para se cadastrar, com a marcação de uma
caixa de seleção, qual seria o validador correto
para o campo?
Validators.required
Validators.pattern
Validators.max
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
4 of 15 16/11/2025, 21:44
D
E
Validators.minLength
Validators.requiredTrue
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
Para exigir a marcação da caixa de seleção,
adotamos . Quanto
aos demais, required exige o
preenchimento de algum campo não
selecionável, como texto, número ou e-
mail, pattern define um padrão de
preenchimento, para dados como CEP, max
define o valor máximo aceito para um
número, e minLength define o número de
caracteres mínimo para um campo de
texto.
4
Durante o desenvolvimento de um sistema,
principalmente nas fases iniciais, alguns
recursos necessários para a funcionalidade
desejada podem não estar disponíveis,
impedindo a execução de testes. No entanto,
podemos emular os recursos, permitindo a
continuidade do projeto. No caso do Angular,
qual interface permite emular um servidor REST
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
5 of 15 16/11/2025, 21:44
A
B
C
D
E
com persistência em banco de dados?
CanActivate
OnInit
HttpClient
InMemoryDbService
Router
Opa! A alternativa correta é a letra
D. Confira o gabarito comentado!
Na linguagem de programação Angular, a
interface que permite emular um servidor
REST com persistência em banco de dados
é a InMemoryDbService. Esta interface é
utilizada para fornecer dados de teste
(createDb) e o processo de geração da
chave primária (genId). Assim, toda
chamada efetuada por um HttpClient será
direcionada para o servidor emulado. As
demais opções apresentadas na questão
têm funções diferentes: o CanActivate é
utilizado no processo de autenticação para
as rotas do front-end, o OnInit especifica o
método de inicialização de um
componente, o HttpClient permite acessar
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
6 of 15 16/11/2025, 21:44
A
B
C
D
E
endereços HTTP e o Router controla as
rotas internas do front-end.
5
Para trabalhar com as coleções do MongoDB a
partir de um serviço Web, construído com base
no NodeJS, devemos inicialmente obter uma
conexão com a base de dados, através de um
objeto do tipo MongoClient, oferecido na
biblioteca mongodb. A partir da conexão,
acessamos as coleções, e podemos utilizar os
métodos que são disponibilizados por elas para
manipulação e consulta de documentos. Qual
desses métodos permite a inclusão de um
documento?
insertOne
persist
findOne
create
find
Parabéns, você selecionou a
alternativa correta. Confira o
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
7 of 15 16/11/2025, 21:44
A
B
gabarito comentado!
O método adequado para adicionar um
documento à coleção é o , que
recebe como parâmetro um documento no
formato JSON. Os métodos find e findOne
são utilizados para a pesquisa de
documentos, sendo que o primeiro permite
retornar um conjunto de documentos e o
segundo retorna apenas um. Quanto aos
métodos persist e create, eles não são
suportados pelo cliente para MongoDB,
estando disponível apenas o método
createCollection, que cria uma coleção a
partir do objeto de conexão.
6
O uso de decorações, ou anotações, permite a
definição de configurações para os diversos
elementos do Angular de forma simples, como
na definição das propriedades do módulo, por
meio da anotação NgModule. Qual dos atributos
de NgModule define o componente principal de
um módulo do Angular?
imports
providers
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
8 of 15 16/11/2025, 21:44
C
D
E
exports
bootstrap
declarations
Opa! A alternativa correta é a letra
D. Confira o gabarito comentado!
Os atributos da anotação NgModule
permitem definir quais outros módulos
serão importados para o módulo corrente
(imports), quais componentes serão
disponibilizados para utilização a partir dos
seletores (declarations), os serviços que
estarão disponíveis para utilização via
injeção de dependência (providers), e os
módulos exportados para outros módulos
(exports). Entre os componentes
disponibilizados, um deles deve ser
especificado como principal, ou raiz, no
atributo .
7
Para qualquer programador Angular, é
fundamental conhecer a utilização da biblioteca
RxJS para implementação de funcionalidades
assíncronas. Considere o fragmento de código
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
9 of 15 16/11/2025, 21:44
A
B
C
D
E
seguinte.
const observable = interval(1000).pipe(map((x:number)�x*x))
      .pipe(observeOn(asyncScheduler));
Para que serve o método pipe no código
apresentado?
Gerar números sequencialmente.
Elevar cada número gerado ao
quadrado.
Fornecer o resultado de forma
assíncrona para o assinante da fonte
de dados.
Gerar o conjunto de números inteiros
compreendido entre 1 e 1000.
Direcionar o fluxo de dados para o
processamento seguinte, antes de
enviar o resultado.
Opa! A alternativa correta é a letra
E. Confira o gabarito comentado!
No código temos a criação de um
Observable, que gera números
sequencialmente, em intervalos de 1
segundo (interval), cada número gerado é
elevado ao quadrado (map) e o valor final é
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
10 of 15 16/11/2025, 21:44
A
B
C
retornado de forma assíncrona
(asyncScheduler). Como temos três
processamentos sendo executados,
precisamos do pipe para 
.
8
Formulários são a forma padrão para viabilizar a
entrada de dados em sistemas cadastrais para
Web, podendo ser especificados no Angular ao
nível dos modelos HTML. No entanto, para a
construção de um formulário em um front-end
baseado no Angular, temos algumas regras de
implementação que devem ser observadas.
Qual das opções a seguir constitui uma regra
válida para a implementação de formulários no
Angular?
A diretiva ngModel será utilizada para
estabelecer um relacionamento
unidirecional com os atributos da
classe.
É necessário importar o módulo
RouterModule para a definição de
formulários.
O evento de submissão do formulário
deve ser associado a um método da
classe.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
11 of 15 16/11/2025, 21:44
D
E
Todo formulário precisa de um botão
do tipo Reset para envio das
informações.
Não é possível utilizar as tags
convencionais do HTML para campos
de entrada.
Opa! A alternativa correta é a letra
C. Confira o gabarito comentado!
Para trabalhar com formulários no Angular,
precisamos da importação do módulo
FormsModule, ou ReactiveFormsModule,
para adicionar o suporte necessário. Com o
suporte ativado, utilizamos a diretiva
ngModel para estabelecer um
relacionamento bidirecional entre o campo
de entrada e o atributo da classe. São
utilizados tags convencionais do HTML
para definir os campos de entrada,
incluindo um botão para envio, do tipo
Submit. Finalmente, 
,
permitindo que o clique sobre o botão de
envio ative o método associado, sem a
mudança de endereço.
9
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
12 of 15 16/11/2025, 21:44
A
B
C
D
E
As tags semânticas trouxeram para o HTML 5 a
possibilidade de transmitir significado para as
áreas nas quais uma página é dividida,
viabilizando a melhoria no reconhecimento a
partir dos sistemas de busca, como o que é
utilizado pelo Google. Qual dessas tags deve
ser utilizada para configurar a porção inferior de
uma página?
article
main
header
aside
footer
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
De acordo com a estrutura mais comum de
um site, a tag corresponde ao
rodapé, na parte inferior da página, header
define a parte superior, ou cabeçalho, aside
é uma divisão lateral (esquerda ou direita),
normalmente para a navegação secundária
ou informações complementares, main
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
13 of 15 16/11/2025, 21:44
A
B
C
D
E
define o conteúdo principal, e article
caracteriza um conteúdo genérico, como
um painel para apresentação de
informações específicas.
10
Devido às exigências de qualidade e prazos
extremamente curtos para a criação de
softwares, produtividade é um fator essencial
para a área de desenvolvimento, e embora seja
possível criar projetos para Angular através de
simples editores de texto, o Visual Studio Code
é um excelente ferramental para ganho de
produtividade no uso do Angular. Entre as
funcionalidades oferecidas pelo ambiente, qual
delas permite a identificação rápida de
instruções de controle, variáveis, atributos,
métodos e demais tipos de elementos adotados
na linguagem?
debugging
syntax highlighting
code completion
refactoring    
error highlighting
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
14 of 15 16/11/2025, 21:44
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
Através do , ou realce
de código, temos o uso de cores para a
diferenciação de cada tipo de elemento em
meio ao texto, permitindo uma rápida
identificação visual. Com relação às demais
opções, error highligthing exibe uma
marcação sob elementos com erro de
sintaxe, debugging (depuração) possibilita
a execução passo-a-passo, refactoring
engloba ações de restruturação no código,
como a criação de getters e setters para os
atributos, e code completion oferece
opções para complementação automática
de código.    
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6f4f04606e12512...
15 of 15 16/11/2025, 21:44