Componentes e Módulos Angular

Prévia do material em texto

Verifique o seu desempenho e continue
treinando! Você pode refazer o exercício
quantas vezes quiser.
1
Partindo de uma iniciativa do Google, com foco
no sistema Android, o Material Design trouxe
diretivas relacionadas ao design que se
tornaram uma referência de mercado, visando
sempre a garantia de usabilidade,
responsividade e acessibilidade nas mais
diversas plataformas. Além das diretivas
estabelecidas, temos a especificação de
componentes padronizados e modelo para
implementação em cada plataforma, como
Android, Web, iOS e Flutter. Os componentes
podem ser categorizados de acordo com seus
objetivos, e segundo essa classificação, qual
das opções a seguir contém apenas elementos
para comunicação, feita através da exibição de
mensagens?
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/691a6de742af42702d...
1 of 16 16/11/2025, 21:37
A
B
C
D
E
Card, Tabs e Dialog
SnackBar, Banner e Dialog
TextField, Switch e Card
Button, Banner e List
SnackBar, Dialog e Tabs
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
Os componentes do Material Design podem
ser categorizados de acordo com seus
objetivos. Nesse sentido, temos que os
elementos Card e List são voltados para a
organização do conteúdo, pertencendo,
portanto, ao grupo de exibição. Já os
componentes TextField e Switch são
destinados à entrada de dados pelo
usuário, fazendo parte do grupo de
entrada. O componente Button, por sua
vez, pertence ao grupo de ações, pois é
voltado para a execução de um processo
qualquer. O componente Tabs integra o
grupo de navegação, pois reflete a
alternância de rotas ou telas. Por fim, temos
os componentes SnackBar, Banner e
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
2 of 16 16/11/2025, 21:37
A
B
C
D
E
Dialog, que pertencem ao grupo de
comunicação, pois são responsáveis por
prover diferentes formas de exibição de
mensagens para o usuário. Portanto, a
alternativa correta é a B� "SnackBar, Banner
e Dialog".
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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
3 of 16 16/11/2025, 21:37
A
B
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
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
Na estrutura de um projeto baseado em
Angular, temos um conjunto de arquivos no
diretório raiz voltados para a configuração geral
do aplicativo. Entre os arquivos encontrados,
temos um com o nome polyfills.ts, que tem
como objetivo:
Definir o conteúdo da página inicial do
aplicativo.
Estabelecer as formatações globais,
através de configurações CSS.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
4 of 16 16/11/2025, 21:37
C
D
E
Configurar a inicialização do
aplicativo.
Inicializar o ambiente de testes para o
aplicativo.
Incluir elementos para compatibilidade
em diferentes plataformas e
navegadores.
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
Na base do diretório src temos o ícone do
aplicativo (favicon.ico), 
, main.ts, com o
código de inicialização, uma folha de
estilos com as formatações globais
(styles.css), o conteúdo inicial do
aplicativo, na página index.html, e a
inicialização do ambiente de testes, no
arquivo test.ts.
4
Devido às exigências de qualidade e prazos
extremamente curtos para a criação de
softwares, produtividade é um fator essencial
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
5 of 16 16/11/2025, 21:37
A
B
C
D
E
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
Opa! A alternativa correta é a letra
B. 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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
6 of 16 16/11/2025, 21:37
A
B
C
D
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.    
5
Considerando um serviço no estilo REST,
implementado com base no NodeJS e na
biblioteca Express, e uma entidade Aluno,
persistida no MongoDB via MongoClient, qual a
assinatura do método, no servidor, para
responder à chamada http://localhost:3000/
alunos/29891, obtendo como retorno os dados
do aluno de matrícula 29891 no formato JSON?  
router.get('/alunos', async (req, res) �
{ });
router.put('/alunos/:id', async (req, res)
� { });
router.get('/alunos/:id', async (req, res)
� { });
router.delete('\alunos/:id', async (req,
res) � { });
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
7 of 16 16/11/2025, 21:37
E
router.post('/alunos', async (req, res)
� { });
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
De acordo com a definição do REST, o
método GET do HTTP é utilizado para
realizar consultas, o POST para incluir uma
entidade, o PUT para alterar uma entidade
existente e o DELETE para remover uma
entidade. Quando queremos consultar os
dados de uma entidade específica, o
identificador, ou chave primária, deve ser
fornecido no último segmento da chamada,
o que leva à necessidade da definição de
uma variável (id) na rota. Os métodos de
resposta do Express, que são
disponibilizados a partir de um Router,
adotam os mesmos nomes dos métodos
HTTP, e usam como parâmetros a rota e a
função para tratamento. Portanto, a
assinatura correta para a situação descrita
no enunciado é:
router.get('/alunos/:id', async (req, res) � {
});
Essa assinatura indica que estamos
utilizando o método GET para buscar um
aluno específico, identificado pelo id na
rota. A função assíncrona (req, res) � { } é
o tratamento que será dado à requisição e
resposta do servidor.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
8 of 16 16/11/2025, 21:37
A
B
C
6
Uma novidade interessante do HTML 5 foi a
definição de folhas de estilo por escopo,
trazendo a possibilidade de adotar formatações
específicas para o elemento e seus filhos, sem
interferir no restante da página. Essa
característica é utilizada pelos componentes do
Angular, ondetemos formatações CSS
específicas, adotadas no escopo de utilização
do seletor. Observe o fragmento de código que
é apresentado a seguir.
.container{
display: flex; flex-direction: row; flex-wrap:
wrap;
width: 100%; overflow-y: scroll; height:230px;
}
Qual informação é verdadeira, acerca da
formatação que foi definida?
Exibe uma barra de rolagem horizontal
quando a quantidade de elementos
ocupar uma área superior às
dimensões especificadas.
Especifica que o elemento formatado
pela classe terá uma largura de 100
pixels.
Define uma exibição sequencial de
elementos na vertical, com a quebra
de linha para cada elemento filho
adicionado ao corpo da tag.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
9 of 16 16/11/2025, 21:37
D
E
Permite definir uma área de exibição
na forma de grid, com o
posicionamento sequencial de
elementos e a quebra de linha quando
não há mais espaço na horizontal.
Especifica que o elemento formatado
pela classe utilizará 100% do espaço
vertical disponível.
Parabéns, você selecionou a
alternativa correta. Confira o
gabarito comentado!
O código CSS apresentado define uma
classe chamada "container" que possui
várias propriedades. A propriedade
"display: flex" permite que os elementos
filhos do container sejam dispostos em uma
linha ou coluna flexível. A propriedade
"flex-direction: row" define que os
elementos serão dispostos em linhas. A
propriedade "flex-wrap: wrap" permite que
os elementos sejam quebrados para a
próxima linha se não houver espaço
suficiente na linha atual. A propriedade
"width: 100%" define que o container
ocupará 100% da largura disponível. A
propriedade "overflow-y: scroll" garante
que uma barra de rolagem vertical seja
exibida, mesmo que não haja conteúdo
suficiente para preencher a altura do
container. Por fim, a propriedade "height:
230px" define a altura do container em 230
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
10 of 16 16/11/2025, 21:37
A
B
C
D
E
pixels. Portanto, a alternativa D é a correta,
pois afirma que o código permite definir
uma área de exibição na forma de grid,
com o posicionamento sequencial de
elementos e a quebra de linha quando não
há mais espaço na horizontal.
7
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
ng-template
ngModel
Parabéns, você selecionou a
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
11 of 16 16/11/2025, 21:37
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.
8
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
12 of 16 16/11/2025, 21:37
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
Opa! A alternativa correta é a letra
E. 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
define o conteúdo principal, e article
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
13 of 16 16/11/2025, 21:37
A
B
C
D
E
caracteriza um conteúdo genérico, como
um painel para apresentação de
informações específicas.
9
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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
14 of 16 16/11/2025, 21:37
A
alternativa correta. Confira o
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.
10
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
com persistência em banco de dados?
CanActivate
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
15 of 16 16/11/2025, 21:37
B
C
D
E
OnInit
HttpClient
InMemoryDbService
Router
Parabéns, você selecionou a
alternativa correta. 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
endereços HTTP e o Router controla as
rotas internas do front-end.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a6de742af42702d...
16 of 16 16/11/2025, 21:37