AngularJs_ex02

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Verifique o seu desempenho e continue
treinando! Você pode refazer o exercício
quantas vezes quiser.
A
B
C
1
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.
Configurar a inicialização do
aplicativo.
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/691a46e442af42702d...
1 of 17 16/11/2025, 21:34
D
E
Inicializar o ambiente de testes para o
aplicativo.
Incluir elementos para compatibilidade
em diferentes plataformas e
navegadores.
Opa! A alternativa correta é a letra
E. 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.
2
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
2 of 17 16/11/2025, 21:34
A
B
C
D
E
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
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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
3 of 17 16/11/2025, 21:34
A
B
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.
3
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
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.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
4 of 17 16/11/2025, 21:34
C
D
E
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 é
retornado de forma assíncrona
(asyncScheduler). Como temos três
processamentos sendo executados,
precisamos do pipe para 
.
4
Partindo de uma iniciativa do Google, com foco
no sistema Android, o Material Design trouxe
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
5 of 17 16/11/2025, 21:34
A
B
C
D
E
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?
Card, Tabs e Dialog
SnackBar, Banner e Dialog
TextField, Switch e Card
Button, Banner e List
SnackBar, Dialog e Tabs
Opa! A alternativa correta é a letra
B. Confira o gabarito comentado!
Os componentes do Material Design podem
ser categorizados de acordo com seus
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
6 of 17 16/11/2025, 21:34
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
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".
5
A biblioteca RxJS é uma excelente opção para a
implementação de elementos assíncronos, com
a substituição das funções assíncronas (async)
e diretivas de espera (await) por um padrão
Observer, onde temos fontes de dados
assinadas, que enviam suas alterações para o
conjunto de assinantes, com a informação
sendo tratada em funções de resposta.
Considerando a criação de um aplicativo para
acompanhamento estatístico, onde diversos
gráficos são atualizados de forma simultânea, a
cada vez que uma nova pesquisa é cadastrada,
qual seria o componente da biblioteca RxJS
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
7 of 17 16/11/2025, 21:34
A
B
C
D
E
adequado para emissão da informação
atualizada?
Observable
Subject
Operator
Subscription
Observer
Opa! A alternativa correta é a letra
B. Confira o gabarito comentado!
Os componentes que devem receber a
informação devem assinar �Subscription) a
fonte de dados, ficando responsáveis por
tratar a informação recebida �Observer). No
entanto, existem dois modelos para a fonte
de dados: o Observable, que é utilizado
para uma ação pontual com apenas um
assinante, e o , que é voltado para
a criação de canais com múltiplos
assinantes. Nesse contexto, o Subject seria
a solução mais adequada, pois permite a
atualização simultânea de diversos gráficos
a cada vez que uma nova pesquisa é
cadastrada. Quanto aos operadores
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
8 of 17 16/11/2025, 21:34
A
B
C
D
E
�Operator), são os elementos que permitem
operações comuns através do paradigma
funcional.
6
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
Validators.minLength
Validators.requiredTrue
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
9 of 17 16/11/2025, 21:34
Opa! A alternativa correta é a letra
E. 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.
7
Os padrões de desenvolvimento visam resolver
problemas recorrentes na implementação de
sistemas, com a definição de soluções
padronizadas, amplamente testadas e com
modelos bem-organizados, utilizando a notação
UML. Supondo que os gastos com a
manutenção de um determinado sistema
estejam muito altos, devido à proliferação de
instruções SQL ao longo de todo o código, e
você tenha sido contratado para refatorá-lo,
qual padrão deverá utilizar para a melhoria da
estratégia de persistência e consequente
redução do custo de manutenção?
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
10 of 17 16/11/2025, 21:34
A
B
C
D
E
Observer
Proxy
Data Access Object
Flyweight
Service Locator
Opa! A alternativa correta é a letra
C. Confira o gabarito comentado!
O padrão de projeto mais adequado para a
situação descrita no enunciado é o DAO
�Data Access Object). Este padrão é
utilizado para centralizar as chamadas ao
banco de dados em classes específicas,
permitindo que o restante do sistema opere
estritamente com objetos e tipos primitivos.
Isso contribui para a redução da
proliferação de instruções SQL no código, o
que pode levar a uma diminuição dos
custos de manutenção. Quanto aos outros
padrões mencionados, eles têm aplicações
diferentes. O Flyweight, por exemplo, é útil
em ambientes de objetos distribuídos,
sendo usado para a criação de um pool de
objetos. O Proxy é usado para encapsular a
comunicação remota, enquanto o Service
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
11 of 17 16/11/2025, 21:34
A
B
C
D
E
Locator centraliza as chamadas a serviços
remotos. Por fim, o padrão Observer seria
indicado se a necessidade fosse atualizar
as interfaces de forma assíncrona.
8
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) � { });
router.post('/alunos', async (req, res)
� { });
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
12 of 17 16/11/2025, 21:34
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.
9
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
13 of 17 16/11/2025, 21:34
A
B
C
D
E
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
Opa! A alternativa correta é a letra
C. 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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
14 of 17 16/11/2025, 21:34
A
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.
10
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, onde temos 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.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
15 of 17 16/11/2025, 21:34
B
C
D
E
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.
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.
Opa! A alternativa correta é a letra
D. 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
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
16 of 17 16/11/2025, 21:34
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
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.
Firefox https://estacio.saladeavaliacoes.com.br/exercicio/691a46e442af42702d...
17 of 17 16/11/2025, 21:34